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

Using react router Link inside components – SEO

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>
);

  2. 0

    Personally i use to create a SEO component in my projects to avoid problems. I also like to use react-helmet, wich will manage all changes to the <head/>

    For example:

    import Helmet from "react-helmet";
import React from "react";

// mini SEO component
function SEO ({ title, description, keywords, url, lang }) {
    return (
        <Helmet
            htmlAttributes={{ lang }}
            title={{ title }}
            meta={[
                {
                    name: 'description',
                    content: description
                },
                {
                    name: 'keywords',
                    content: keywords
                },
                {
                    property: 'og:url',
                    content: url
                }
            ]}
        />
    );
}

export default SEO;

    So, import it in each page with the desired props

    <SEO 
    title='example'
    description='example'
    keywords=''
    url='https://example.com'
    lang='en-us'
/>

    Hope it helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search