Ad

Using React Router Link Inside Components

I am using Link inside components to go different pages like

 <Link to={'/documents/' + x.id}></Link

However, this causes SEO problems as the meta tags are not refreshing when a page changes. I am also using Server Side Rendering.

What would be the right way to use Link to still have fluent page changes and still have SEO optimizations.

Thanks

Ad

Answer

Thank you @luiz-mariz, I am already using react-helmet but the problem was that I was getting the page information in componentDidMount() however when I do this, the information is not read by the crawlers because they won't wait for API call to pass down information about the content. That was my mistake.

The way I solved it was using getting the specific page information and before page is loaded (using Server Side Rendering) and then passing that information onto the App component.

onPageLoad((sink) => {

  const context = {};
  const data = {
    loading: true,
    loggingIn: false,
    document:-API CALL FOR DOCUMENT INFO-
  };

  const store = createStore(mainReducer, data, applyMiddleware(thunk));
  const initialData = store.getState();
  const stylesheet = new ServerStyleSheet();

  const app = renderToString(stylesheet.collectStyles( // eslint-disable-line
    <Provider store={store}>
      <StaticRouter location={sink.request.url} context={context}>
        <App />
      </StaticRouter>
    </Provider>));

  const helmet = Helmet.renderStatic();
  sink.appendToHead(helmet.meta.toString());
  sink.appendToHead(helmet.title.toString());
  sink.appendToHead(stylesheet.getStyleTags());

  sink.renderIntoElementById('react-root', app);

  sink.appendToBody(`
    <script>
      window.__PRELOADED_STATE__ = ${JSON.stringify(initialData).replace(/</g, '\\u003c')}
    </script>
  `);
});

Also, I have added some more tags to the react-helmet component. Might be useful for some people who want to use facebook or twitter sharing capabilities.

const SEO = ({
  schema, title, description, images, path, contentType, published, updated, category, tags, twitter,
}) => (
  <Helmet>
    <html lang="en" itemScope itemType={`http://schema.org/${schema}`} />

    <title>{title}</title>
    <meta name="description" content={description} />
    <meta itemProp="name" content={title} />
    <meta itemProp="description" content={description} />
    <meta itemProp="image" content={(images && images.google)} />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@sitename" />
    <meta name="twitter:title" content={`${title} | Your-site-name`} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:creator" content={`@${twitter}` || '@sitename'} />
    <meta name="twitter:image:src" content={(images && images.twitter)} />

    <meta property="og:title" content={`${title} | Your-site-name`} />
    <meta property="og:type" content={contentType} />
    <meta property="og:url" content={url} />
    <meta property="og:image" content={(images && images.facebook)} />
    <meta property="og:description" content={description} />
    <meta property="og:site_name" content="your-site-name" />

    <meta name="fb:app_id" content="your-app-id" />

    {published ? <meta name="article:published_time" content={published} /> : ''}
    {updated ? <meta name="article:modified_time" content={updated} /> : ''}
    {category ? <meta name="article:section" content={category} /> : ''}
    {tags ? <meta name="article:tag" content={tags} /> : ''}
  </Helmet>
);
Ad
source: stackoverflow.com
Ad