seo Question posted in
Some basic information to get you started with this can be found here.

ReactJS not displaying the HTML in when clicked on View Page Sorce – SEO

I am new to ReactJS, and I want to build a ReactJS website and futher implement SEO to it. While practicing whenever I click to “View Page Source” option, it does not the display whole html of page, instead it only displays content of index.html.

I tried implementing it with server-side rendering reference from here,

but it didn’t worked.

When I build and run this with- npm run build && npm run start, it gives error :-

  [email protected] babel /usr/react_projects/project_frontend
> babel src -d views

 { SyntaxError: /usr/react_projects/project_frontend/src/bundle.js: Unexpected token (8:2)

   6 | const store = configureStore();
   7 | render(
>  8 |   <Provider store={store}>
     |   ^
   9 |     <App />
  10 |   </Provider>,
  11 |   document.querySelector("#app")
  at Parser.raise (/usr/react_projects/project_frontend/node_modules/@babel/parser/lib/index.js:4028:15)
  at Parser.unexpected (/usr/react_projects/project_frontend/node_modules/@babel/parser/lib/index.js:5343:16)
  at Parser.parseExprAtom (/usr/react_projects/project_frontend/node_modules/@babel/parser/lib/index.js:6432:20)
  at Parser.parseExprSubscripts (/usr/react_projects/project_frontend/node_modules/@babel/parser/lib/index.js:6019:21)
  at Parser.parseMaybeUnary (/usr/react_projects/project_frontend/node_modules/@babel/parser/lib/index.js:5998:21)
  at Parser.parseExprOps (/usr/react_projects/project_frontend/node_modules/@babel/parser/lib/index.js:5907:21)
  at Parser.parseMaybeConditional (/usr/react_projects/project_frontend/node_modules/@babel/parser/lib/index.js:5879:21)
  at Parser.parseMaybeAssign (/usr/react_projects/project_frontend/node_modules/@babel/parser/lib/index.js:5826:21)
  at Parser.parseExprListItem (/usr/react_projects/project_frontend/node_modules/@babel/parser/lib/index.js:7111:18)
  at Parser.parseCallExpressionArguments (/usr/react_projects/project_frontend/node_modules/@babel/parser/lib/index.js:6227:22)
pos: 234,
loc: Position { line: 8, column: 2 },
code: 'BABEL_PARSE_ERROR' }
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] babel: `babel src -d views`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] babel script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2018-11-26T04_40_59_532Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `npm run pack && npm run babel`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2018-11-26T04_40_59_580Z-debug.log

Can anyone please suggest a better way/tutorial to implement this.

Tags:

2

Answers


  1. 0

    If you try to view page source,
    you will see this

    <body>
    <div id="root"></div>
    <script ........./>
</body>

    when ReactJS dev server runs, the bundle.js is auto-compiled and the page will be re-rendered.

    The reason why you can’t see full page source is natural.
    So If you want to see source work on browser, please use React/Redux Development Extension on browser

    Login or Signup to reply.
  2. 0

    You can use react-meta-tags. It allows you to meta tags in a declarative way and in normal jsx format, which will be moved to head (Check server usage on the doc).

    import React from 'react';
import MetaTags from 'react-meta-tags';

class MyComponent extends React.Component {
  render() {
    return (
        <div class="wrapper">
          <MetaTags>
            <title>Page 1</title>
            <meta id="meta-description" name="description" content="Some description." />
            <meta id="og-title" property="og:title" content="MyApp" />
            <meta id="og-image" property="og:image" content="path/to/image.jpg" />
          </MetaTags>
          <div class="content"> Some Content </div>
        </div>
      )
  }
}

    Or you can use JS to change meta tags inside your componentDidMount() method

    document.title ="Welcome | here is your page title to display"; 
document.getElementsByTagName("META")[2].content="Your description about the page or site here to set dynamically";
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search