Handle meta tags and document title in React for crawlers

4
votes

I have a React (redux) app that uses client side rendering. I wanted my sites description and title to be crawlable by google (they seem to crawl async stuff cause my site shows up fine in google with text from my h1 tags) so I found a library called react-helmet which builds on react-document-library. This library allows me to change the document title and description depending on what route I am currently on.

So here are my questions:

  1. Currently (1 week later) my google search results are unchanged which makes me think either google hasn't crawled my site or google crawled it but didn't notice the dynamic change of description and just used my h1 tags. But how can I check which one has happened?
  2. I notice Instagram have a client side rendered app but somehow when I check the page source they have already changed the title and description on each page even though the body tag is just an empty div as is typical of a client side rendered app. I don't get how they can do that.

react-helmet

2
reactjsreact-routerreduxreact-router-redux
I don't think if you use client side rendering it is crawl-able. You should use server side rendering to be seo friendly. – WitVault
@WitVault The title and description that is to say? Because the site is crawlable and that's how instagram does it. – kjonsson
Google will render client-side JavaScript when crawling. Any AJAX calls will fail though. – Max

2 Answers

1
votes

Follow the React Helmet server rendering documentation: https://github.com/nfl/react-helmet#server-usage.

1
votes

Use Google Search Console to see how Google crawls your site, and to initiate a crawl/index of your pages: https://www.google.com/webmasters/tools/

As for how instagram can show meta tags in a client-side app – they probably render and serve static content server-side when they detect a crawler or bot is viewing it. You can do this yourself for your content without converting your entire app to server-side rendering. Google prerendering services. (I won't mention any examples because I don't want to boost their SEO without having an opinion on them.)

Another option is to render your React app statically, and serve it when necessary. See Graphcool's prep (seems slightly outdated), react-snap, and react-snapshot. All render the site on a local server and download the rendered html files. If all you need is the <head> then you should be good!