{"id":7986,"date":"2018-03-14T19:00:56","date_gmt":"2018-03-14T13:30:56","guid":{"rendered":"https:\/\/www.rankwatch.com\/blog\/?p=7986"},"modified":"2022-09-30T14:12:49","modified_gmt":"2022-09-30T08:42:49","slug":"our-solution-to-make-seo-work-for-a-react-js-site","status":"publish","type":"post","link":"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/","title":{"rendered":"Our Solution to Make SEO Work for a React JS Site"},"content":{"rendered":"

\"Our<\/a><\/p>\n

Our client <\/span>Pickyourtrail<\/span><\/a> shares this interesting case study where the company has solved their issue of Google not crawling their React JS site.<\/span><\/p>\n

A little background<\/h2>\n

Pickyourtrail website offers travel solutions\/packages and also has a destination guide for travelers. <\/span><\/p>\n

The Pickyourtrail team came up with this whole solution because their both the \u2018products\u2019 are built on different stacks. <\/span><\/p>\n

The stacks don\u2019t use Java, instead, they are built on React\/angular using Node at the backend. When they built the product, they shifted from JS to React. The reason is that Java is an established language while Node was still new. While they didn\u2019t have an issue with Java and they don\u2019t see any reason to move out of Java architecture, they did face a challenge. <\/span><\/p>\n

Here is the case study, as written by team Pickyourtrail and we are pretty sure you will connect with them the same way we did \ud83d\ude42<\/span><\/p>\n

The Case<\/h2>\n

Google was not crawling all the pages on our site that have been rendered with ReactJS. Take this page as an example – \u00a0<\/span>https:\/\/pickyourtrail.com\/guides\/bali<\/span><\/a> is powered by React and the data for the application is dependent on our backend API\u2019s. <\/span><\/p>\n

When we did our research, we found that most articles would talk of fetch+render on Google webmasters. When we tried this solution on our page, it seemed to work, but not entirely. The content of this page was not indexed, we found. <\/span><\/p>\n

Methods like SSR (Server Side Rendering) or pre-rendering was the most common way people solved this issue. However, in our case, this was a time-consuming task and not feasible. So we decided to come up with our own solution. <\/span><\/p>\n

The Solution<\/h2>\n

When it comes to crawling javascript generated content, Google is said to be robust and there are many discussions around this. Our application with ReactJS was done using the create-react-app boilerplate. When we submitted this to Google for indexing, some of the pages were indexed while others weren\u2019t.<\/span><\/p>\n

It was strange. <\/span><\/p>\n

We analyzed the pages that were indexed to understand the behavior:<\/span><\/p>\n

\"Our<\/a><\/p>\n

The above GSC screenshot shows the Googlebot view (left) and visitor view (right). It is obvious from this that Googlebot is unable to read\/crawl the content rendered based on API response.<\/span><\/p>\n

So the API call seemed to be creating the issue. Refer to the test below-<\/span><\/p>\n

\"Our<\/a><\/p>\n

The react pages we built falls under the last category that is dependent on an AJAX API data call. The entire page took more than 5 seconds to render completely since the page had more than 20 – 25 images, a couple of Google maps embedded and a carousel, etc.<\/span><\/p>\n

To ensure we had hit upon the real issue, we tried removing all the images and the embedded Google maps from the page. We also removed some parts of the response payload to reduce the size of the DOM tree. <\/span>
\n<\/span>
\n<\/span>We tried submitting the page to Google again.<\/span><\/p>\n

The screenshot shows that Googlebot wasn\u2019t crawling the API content. After we removed the images, we added a javascript timer on the header of the page. Then we did a Fetch & Render in GSC.<\/span><\/p>\n

\"Our<\/a><\/p>\n

Voila! <\/span><\/p>\n

At last, Googlebot was able to see what the user would see. The bot waited exactly 5 seconds and crawled whatever is available in the DOM. Now we knew clearly which way to head – the entire page had to load within 5 seconds at a reasonable internet speed. <\/span><\/p>\n

And this how the test worked:<\/span><\/p>\n

\"Our<\/a><\/p>\n

The golden \u20185 seconds\u2019 and how we came to it<\/h2>\n

We had quite a challenge to get the entire page to load in 5 seconds, based on the API response. <\/span><\/p>\n

We used react router to render for routing and the page functions as below:<\/span><\/p>\n

Step 1<\/span><\/p>\n

The Page Loads<\/span><\/p>\n

Step 2<\/span><\/p>\n

An API call is made based on the requested URL.<\/span><\/p>\n

Step 3<\/span><\/p>\n

Content is rendered based on the response received from the API.<\/span><\/p>\n

Conclusion: Three different ways to approach this problem<\/h2>\n

Approach 1: Progressively loading the content<\/h3>\n

The entire page had one API call that gave a relatively large payload with the content. Initially, we had an idea of breaking this into multiple API calls to reduce the size of the payload. This would also load the content in such a way that the DOM tree would be minimal for the first load. <\/span><\/p>\n

Since Googlebot would see different content and user sees a different content, our SEO ( search engine optimization ) team said NO to this plan. <\/span><\/p>\n

Pros: Reduced initial page load time, better UX<\/span><\/p>\n

Cons: Possibility of a negative SEO implication<\/span><\/p>\n

 <\/p>\n

Approach 2: Using a \u201cRead more\u201d button<\/h3>\n

We had another idea where if we could load the main fold content alone using a quick API call, put a \u2018Read more\u2019 call to action, load the rest of the page\u2019s content with another API call. <\/span><\/p>\n

This would resolve the issue of cloaking, as the content would be the same for both the bot and the user until the user clicks on the Call to action button. This, however, leads to very poor user experience and so it was a NO. <\/span><\/p>\n

Pros: Reduced initial page load time, no risk of SEO penalization for cloaking<\/span><\/p>\n

Cons: Leads to poor UX<\/span><\/p>\n

 <\/p>\n

Approach 3: Optimize everything, almost everything<\/h3>\n

The safe method of performance optimization was what we had to go back to, and this worked for us. <\/span><\/p>\n

    \n
  1. API Response payload size was reduced. <\/span><\/li>\n
  2. Highest possible lossless compression of images on a page. <\/span><\/li>\n
  3. Removed every unwanted line and optimized the CSS<\/span><\/li>\n
  4. Optimized our javascript code and deferred loading of some.<\/span><\/li>\n
  5. Cached the API response (though this didn\u2019t have an impact from crawlability stand-point)<\/span><\/li>\n
  6. Lazy loaded all the images and progressively loaded the embedded Google maps.<\/span><\/li>\n
  7. Enabled GZIP <\/span><\/li>\n<\/ol>\n

    The page now loads very well under 5 seconds, however, the image loads a little after. The initial load of this page is well within the \u2018less than 5 seconds\u2019 test. <\/span><\/p>\n

    We crossed our fingers and submitted it to Google Webmaster tools to fetch and render.<\/span><\/p>\n

    And it got crawled in a couple of days! \ud83d\ude42<\/span><\/p>\n

    How did we handle meta title and description?<\/h3>\n

    This project was a Client Side Rendering one and we had to dynamically rewrite the meta title values and index.html page description for every dynamic page. The documentation of create-react-app suggests replacing the values of meta title and description at the server as seen below.<\/span>
    \n<\/span>
    \n<\/span>\u201cGenerating Dynamic <meta> Tags on the Server<\/p>\n

    Support Server rendering is not supported by the Create React App and so it might be a problem as to how to make <meta> tags dynamic to reflect the current URL. To solve this, we recommend to add placeholders into the HTML, like this:<\/span><\/p>\n

    \"Our<\/a><\/p>\n

    Irrespective of the backend you use, on the server it is possible to read index.html into memory. Replace placeholders such as __OG_TITLE__, __OG_DESCRIPTION__ with values corresponding to the URL. To ensure these +placeholders are safely embedded into HTML, cleanup interpolated values.<\/span><\/p>\n

    You can share the route matching logic between client and server if you are using a Node server. The other option would be to duplicate it and it works fine in simple cases.<\/span>\u201d<\/span><\/p>\n

    This solution, however, is not in our scheme of things, given the limitations of our architecture. So we looked out for other options.<\/span><\/p>\n

    Using React Helmet to manage the meta tags<\/h3>\n

    React helmet is a javascript plugin built to take control of the <head> section of pages built with ReactJS from within the React components. We gave it a try and it worked well in our demo projects so we integrated it with Pickyourtrail Guides.<\/span>
    \n<\/span>
    \n<\/span>Be cautious when you use React Helmet. Because React Helmet replaces the meta tags after it\u2019s invocation in the client\u2019s browser. Although it happens in a fraction of seconds, you really need to know that it doesn\u2019t change the meta tag values as it loads from the server. One of the best practices, while you use React Helmet, is to Render <Helmet> component as close to the top of the root element\u2019s render method. <\/span>
    \n<\/span>
    \n<\/span>React Helmet really worked for us. We were able to change the meta title and description values as received from the response to our backend API calls. We run tests on various meta descriptions as well, they get crawled without any issues.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

    Our client Pickyourtrail shares this interesting case study where the company has solved their issue of Google not crawling their React JS site. A little background Pickyourtrail website offers travel solutions\/packages and also has a destination guide for travelers. The Pickyourtrail team came up with this whole solution because their both the \u2018products\u2019 are built […]<\/p>\n","protected":false},"author":25489,"featured_media":8081,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","footnotes":""},"categories":[25,34],"tags":[],"class_list":["post-7986","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-basic-seo","category-ui-ux","entry"],"acf":[],"yoast_head":"\nOur Solution to Make SEO Work for a React JS Site - RankWatch Blog<\/title>\n<meta name=\"description\" content=\"Our client Pickyourtrail shares this amusing case study where the company has solved the issue of Google not crawling its React JS site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Our Solution to Make SEO Work for a React JS Site - RankWatch Blog\" \/>\n<meta property=\"og:description\" content=\"Our client Pickyourtrail shares this amusing case study where the company has solved the issue of Google not crawling its React JS site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/\" \/>\n<meta property=\"og:site_name\" content=\"RankWatch Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/RankWatch\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-14T13:30:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-30T08:42:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.rankwatch.com\/blog\/wp-content\/uploads\/2018\/03\/if_teacher_writing_on_board_1741313.png\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"PickYourTrail\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@rankwatch\" \/>\n<meta name=\"twitter:site\" content=\"@rankwatch\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"PickYourTrail\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/\"},\"author\":{\"name\":\"PickYourTrail\",\"@id\":\"https:\/\/www.rankwatch.com\/blog\/#\/schema\/person\/43e41f282caab7527e77e2df7c712923\"},\"headline\":\"Our Solution to Make SEO Work for a React JS Site\",\"datePublished\":\"2018-03-14T13:30:56+00:00\",\"dateModified\":\"2022-09-30T08:42:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/\"},\"wordCount\":1398,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/www.rankwatch.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.rankwatch.com\/blog\/wp-content\/uploads\/2018\/03\/if_teacher_writing_on_board_1741313.png?fit=512%2C512&ssl=1\",\"articleSection\":[\"Basic SEO\",\"UI & UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/\",\"url\":\"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/\",\"name\":\"Our Solution to Make SEO Work for a React JS Site - RankWatch Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.rankwatch.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.rankwatch.com\/blog\/wp-content\/uploads\/2018\/03\/if_teacher_writing_on_board_1741313.png?fit=512%2C512&ssl=1\",\"datePublished\":\"2018-03-14T13:30:56+00:00\",\"dateModified\":\"2022-09-30T08:42:49+00:00\",\"description\":\"Our client Pickyourtrail shares this amusing case study where the company has solved the issue of Google not crawling its React JS site.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/www.rankwatch.com\/blog\/wp-content\/uploads\/2018\/03\/if_teacher_writing_on_board_1741313.png?fit=512%2C512&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.rankwatch.com\/blog\/wp-content\/uploads\/2018\/03\/if_teacher_writing_on_board_1741313.png?fit=512%2C512&ssl=1\",\"width\":512,\"height\":512,\"caption\":\"Our Solution to Make SEO Work for a React JS Site\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.rankwatch.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Our Solution to Make SEO Work for a React JS Site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.rankwatch.com\/blog\/#website\",\"url\":\"https:\/\/www.rankwatch.com\/blog\/\",\"name\":\"RankWatch Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.rankwatch.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.rankwatch.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.rankwatch.com\/blog\/#organization\",\"name\":\"Rankwatch\",\"url\":\"https:\/\/www.rankwatch.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.rankwatch.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i0.wp.com\/www.rankwatch.com\/blog\/wp-content\/uploads\/2021\/07\/400x90rec.png?fit=400%2C90&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.rankwatch.com\/blog\/wp-content\/uploads\/2021\/07\/400x90rec.png?fit=400%2C90&ssl=1\",\"width\":400,\"height\":90,\"caption\":\"Rankwatch\"},\"image\":{\"@id\":\"https:\/\/www.rankwatch.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/RankWatch\/\",\"https:\/\/x.com\/rankwatch\",\"https:\/\/www.instagram.com\/rankwatch_seo\/\",\"https:\/\/in.linkedin.com\/company\/rankwatch\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.rankwatch.com\/blog\/#\/schema\/person\/43e41f282caab7527e77e2df7c712923\",\"name\":\"PickYourTrail\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.rankwatch.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ffa1d52650e7cfe8763b1254e5f0081e?s=96&d=blank&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ffa1d52650e7cfe8763b1254e5f0081e?s=96&d=blank&r=g\",\"caption\":\"PickYourTrail\"},\"description\":\"Pick your trail was built with the aim to break the constraining packaged tours offered by travel companies and dramatically change the customer experience. Using our platform, travelers can build their own itinerary, completely suited to their tastes and get best online prices thanks to our unique proprietary algorithm. We also have a dedicated team that shadow travels with our travelers to ensure that there are no breaks.\",\"url\":\"https:\/\/www.rankwatch.com\/blog\/author\/pickyourtrail\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Our Solution to Make SEO Work for a React JS Site - RankWatch Blog","description":"Our client Pickyourtrail shares this amusing case study where the company has solved the issue of Google not crawling its React JS site.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/","og_locale":"en_US","og_type":"article","og_title":"Our Solution to Make SEO Work for a React JS Site - RankWatch Blog","og_description":"Our client Pickyourtrail shares this amusing case study where the company has solved the issue of Google not crawling its React JS site.","og_url":"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/","og_site_name":"RankWatch Blog","article_publisher":"https:\/\/www.facebook.com\/RankWatch\/","article_published_time":"2018-03-14T13:30:56+00:00","article_modified_time":"2022-09-30T08:42:49+00:00","og_image":[{"width":512,"height":512,"url":"https:\/\/www.rankwatch.com\/blog\/wp-content\/uploads\/2018\/03\/if_teacher_writing_on_board_1741313.png","type":"image\/png"}],"author":"PickYourTrail","twitter_card":"summary_large_image","twitter_creator":"@rankwatch","twitter_site":"@rankwatch","twitter_misc":{"Written by":"PickYourTrail","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/#article","isPartOf":{"@id":"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/"},"author":{"name":"PickYourTrail","@id":"https:\/\/www.rankwatch.com\/blog\/#\/schema\/person\/43e41f282caab7527e77e2df7c712923"},"headline":"Our Solution to Make SEO Work for a React JS Site","datePublished":"2018-03-14T13:30:56+00:00","dateModified":"2022-09-30T08:42:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/"},"wordCount":1398,"commentCount":3,"publisher":{"@id":"https:\/\/www.rankwatch.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.rankwatch.com\/blog\/wp-content\/uploads\/2018\/03\/if_teacher_writing_on_board_1741313.png?fit=512%2C512&ssl=1","articleSection":["Basic SEO","UI & UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/","url":"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/","name":"Our Solution to Make SEO Work for a React JS Site - RankWatch Blog","isPartOf":{"@id":"https:\/\/www.rankwatch.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/#primaryimage"},"image":{"@id":"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.rankwatch.com\/blog\/wp-content\/uploads\/2018\/03\/if_teacher_writing_on_board_1741313.png?fit=512%2C512&ssl=1","datePublished":"2018-03-14T13:30:56+00:00","dateModified":"2022-09-30T08:42:49+00:00","description":"Our client Pickyourtrail shares this amusing case study where the company has solved the issue of Google not crawling its React JS site.","breadcrumb":{"@id":"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/#primaryimage","url":"https:\/\/i0.wp.com\/www.rankwatch.com\/blog\/wp-content\/uploads\/2018\/03\/if_teacher_writing_on_board_1741313.png?fit=512%2C512&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.rankwatch.com\/blog\/wp-content\/uploads\/2018\/03\/if_teacher_writing_on_board_1741313.png?fit=512%2C512&ssl=1","width":512,"height":512,"caption":"Our Solution to Make SEO Work for a React JS Site"},{"@type":"BreadcrumbList","@id":"https:\/\/www.rankwatch.com\/blog\/our-solution-to-make-seo-work-for-a-react-js-site\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.rankwatch.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Our Solution to Make SEO Work for a React JS Site"}]},{"@type":"WebSite","@id":"https:\/\/www.rankwatch.com\/blog\/#website","url":"https:\/\/www.rankwatch.com\/blog\/","name":"RankWatch Blog","description":"","publisher":{"@id":"https:\/\/www.rankwatch.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.rankwatch.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.rankwatch.com\/blog\/#organization","name":"Rankwatch","url":"https:\/\/www.rankwatch.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.rankwatch.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/www.rankwatch.com\/blog\/wp-content\/uploads\/2021\/07\/400x90rec.png?fit=400%2C90&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.rankwatch.com\/blog\/wp-content\/uploads\/2021\/07\/400x90rec.png?fit=400%2C90&ssl=1","width":400,"height":90,"caption":"Rankwatch"},"image":{"@id":"https:\/\/www.rankwatch.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/RankWatch\/","https:\/\/x.com\/rankwatch","https:\/\/www.instagram.com\/rankwatch_seo\/","https:\/\/in.linkedin.com\/company\/rankwatch"]},{"@type":"Person","@id":"https:\/\/www.rankwatch.com\/blog\/#\/schema\/person\/43e41f282caab7527e77e2df7c712923","name":"PickYourTrail","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.rankwatch.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ffa1d52650e7cfe8763b1254e5f0081e?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ffa1d52650e7cfe8763b1254e5f0081e?s=96&d=blank&r=g","caption":"PickYourTrail"},"description":"Pick your trail was built with the aim to break the constraining packaged tours offered by travel companies and dramatically change the customer experience. Using our platform, travelers can build their own itinerary, completely suited to their tastes and get best online prices thanks to our unique proprietary algorithm. We also have a dedicated team that shadow travels with our travelers to ensure that there are no breaks.","url":"https:\/\/www.rankwatch.com\/blog\/author\/pickyourtrail\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.rankwatch.com\/blog\/wp-content\/uploads\/2018\/03\/if_teacher_writing_on_board_1741313.png?fit=512%2C512&ssl=1","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.rankwatch.com\/blog\/wp-json\/wp\/v2\/posts\/7986","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rankwatch.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rankwatch.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rankwatch.com\/blog\/wp-json\/wp\/v2\/users\/25489"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rankwatch.com\/blog\/wp-json\/wp\/v2\/comments?post=7986"}],"version-history":[{"count":6,"href":"https:\/\/www.rankwatch.com\/blog\/wp-json\/wp\/v2\/posts\/7986\/revisions"}],"predecessor-version":[{"id":15653,"href":"https:\/\/www.rankwatch.com\/blog\/wp-json\/wp\/v2\/posts\/7986\/revisions\/15653"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rankwatch.com\/blog\/wp-json\/wp\/v2\/media\/8081"}],"wp:attachment":[{"href":"https:\/\/www.rankwatch.com\/blog\/wp-json\/wp\/v2\/media?parent=7986"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rankwatch.com\/blog\/wp-json\/wp\/v2\/categories?post=7986"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rankwatch.com\/blog\/wp-json\/wp\/v2\/tags?post=7986"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}