{"id":4621,"date":"2022-01-10T21:56:51","date_gmt":"2022-01-10T21:56:51","guid":{"rendered":"https:\/\/www.joshuageorge.co.uk\/?p=4621"},"modified":"2022-05-21T13:15:47","modified_gmt":"2022-05-21T13:15:47","slug":"can-google-index-react-apps","status":"publish","type":"post","link":"https:\/\/www.joshuageorge.co.uk\/can-google-index-react-apps\/","title":{"rendered":"Can Google Index React Apps? | Everything you need to know"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"4621\" class=\"elementor elementor-4621\">\n\t\t\t\t\t\t<div class=\"elementor-inner\">\n\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-28499a0 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"28499a0\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4f40e9c\" data-id=\"4f40e9c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2b11829 elementor-widget elementor-widget-text-editor\" data-id=\"2b11829\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p><strong>What are Google React apps and can they be indexed in Google?<\/strong><\/p><p>I am often asked about how easy it is for Google to index React apps online and whether there is anything else you should be doing in order to get your React application picked up by Google.<\/p><p>In this article we will look at <strong>React apps<\/strong> in further detail, finding out <strong>what they do exactly<\/strong> and <strong>how they can be optimised for Google search results<\/strong>.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-644f78f elementor-widget elementor-widget-text-editor\" data-id=\"644f78f\" data-element_type=\"widget\" id=\"what-is-react\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<h2>What is react?<\/h2><ol><li><a href=\"#what-is-react\"><u>What is React?<\/u><\/a><\/li><li><a href=\"#what-react-is-used-for\"><u>What is React app used for?<\/u><\/a><\/li><li><a href=\"#is-seo-possible-in-react\"><u>Is SEO possible in React?<\/u><\/a><\/li><li><a href=\"#is-react-good-for-seo\"><u>Is React good for SEO?<\/u><\/a><\/li><li><span style=\"text-decoration: underline;\"><a href=\"#can-google-index-react-apps\">Can Google index React Apps?<\/a><\/span><\/li><li><a href=\"#does-google-index-dynamic-content\"><u>Does Google index dynamic content?<\/u><\/a><\/li><li><a href=\"#conclusion\"><u>Conclusion<\/u><\/a><\/li><\/ol><p><strong>React (or React.js) is an open-source front end JavaScript library<\/strong> that enables developers to build web-based user interfaces. React can be used to develop single-page web and mobile applications. Although React is a library rather than a language, it is widely used in web development.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a6912be elementor-widget elementor-widget-image\" data-id=\"a6912be\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-image\">\n\t\t\t\t\t\t\t\t\t\t\t\t<img width=\"950\" height=\"562\" src=\"https:\/\/www.joshuageorge.co.uk\/wp-content\/uploads\/2022\/01\/what-is-react-1.jpg\" class=\"attachment-full size-full\" alt=\"what is react (1)\" loading=\"lazy\" srcset=\"https:\/\/www.joshuageorge.co.uk\/wp-content\/uploads\/2022\/01\/what-is-react-1.jpg 950w, https:\/\/www.joshuageorge.co.uk\/wp-content\/uploads\/2022\/01\/what-is-react-1-500x296.jpg 500w, https:\/\/www.joshuageorge.co.uk\/wp-content\/uploads\/2022\/01\/what-is-react-1-768x454.jpg 768w\" sizes=\"(max-width: 950px) 100vw, 950px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6e21a69 elementor-widget elementor-widget-text-editor\" data-id=\"6e21a69\" data-element_type=\"widget\" id=\"what-react-is-used-for\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<h2><b>What is React app used for?<\/b><\/h2><p><span style=\"font-weight: 400;\">There are a number of uses for React applications with it being one of the most popular front-end JavaScript libraries for building Web apps.<\/span><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b7d8a5d elementor-widget elementor-widget-image\" data-id=\"b7d8a5d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-image\">\n\t\t\t\t\t\t\t\t\t\t\t\t<img width=\"950\" height=\"562\" src=\"https:\/\/www.joshuageorge.co.uk\/wp-content\/uploads\/2022\/01\/instagram-react-app-example.jpg\" class=\"attachment-full size-full\" alt=\"instagram react app example\" loading=\"lazy\" srcset=\"https:\/\/www.joshuageorge.co.uk\/wp-content\/uploads\/2022\/01\/instagram-react-app-example.jpg 950w, https:\/\/www.joshuageorge.co.uk\/wp-content\/uploads\/2022\/01\/instagram-react-app-example-500x296.jpg 500w, https:\/\/www.joshuageorge.co.uk\/wp-content\/uploads\/2022\/01\/instagram-react-app-example-768x454.jpg 768w\" sizes=\"(max-width: 950px) 100vw, 950px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b719b93 elementor-widget elementor-widget-text-editor\" data-id=\"b719b93\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p><span style=\"font-weight: 400;\">Whether you are looking to build an online tool, website or any other web-based application, React javascript allows you to build them fairly simply.<\/span><\/p><p><b>Some of the most notable React applications on the web include:<\/b><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Facebook<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Instagram<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Netflix<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">WhatsApp<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Dropbox<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Asana<\/span><\/li><\/ul><p><span style=\"font-weight: 400;\">React as a script offers far more efficient design capabilities and is why so many of these big names choose ReactJS.<\/span><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7724061 elementor-widget elementor-widget-text-editor\" data-id=\"7724061\" data-element_type=\"widget\" id=\"is-seo-possible-in-react\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<h2><b>Is SEO possible in React?<\/b><\/h2><p><span style=\"font-weight: 400;\">SEO is not a design goal of React applications but certainly, if a website is using React framework for content, then you can certainly optimise them in order to rank better in Google.<\/span><\/p><p><span style=\"font-weight: 400;\">One of the key reasons that you will need to optimise your website if you are using React is because of the reliance on Javascript. The initial HTML does not contain any meaningful content, and a user or a bot must execute JavaScript to see the page\u2019s actual content.<\/span><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7362300 elementor-widget elementor-widget-image\" data-id=\"7362300\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-image\">\n\t\t\t\t\t\t\t\t\t\t\t\t<img width=\"950\" height=\"562\" src=\"https:\/\/www.joshuageorge.co.uk\/wp-content\/uploads\/2022\/01\/react-app-for-seo.jpg\" class=\"attachment-full size-full\" alt=\"react app for seo\" loading=\"lazy\" srcset=\"https:\/\/www.joshuageorge.co.uk\/wp-content\/uploads\/2022\/01\/react-app-for-seo.jpg 950w, https:\/\/www.joshuageorge.co.uk\/wp-content\/uploads\/2022\/01\/react-app-for-seo-500x296.jpg 500w, https:\/\/www.joshuageorge.co.uk\/wp-content\/uploads\/2022\/01\/react-app-for-seo-768x454.jpg 768w\" sizes=\"(max-width: 950px) 100vw, 950px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-01da993 elementor-widget elementor-widget-text-editor\" data-id=\"01da993\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p><span style=\"font-weight: 400;\">When Google crawls these kinds of apps, they will see an empty page on the first pass of the website and the content is only viewable once the entire page is rendered. This means that ensuring your application is as well optimised as it can be is essential if you are looking to build a React application for use as a website or blog.<\/span><\/p><p><span style=\"font-weight: 400;\">Ensuring that you look at the<\/span><a href=\"https:\/\/support.google.com\/webmasters\/answer\/9205520\" target=\"_blank\" rel=\"noopener\"> <span style=\"font-weight: 400;\">Core Web Vitals reports by Google<\/span><\/a><span style=\"font-weight: 400;\"> will give you a better understanding of how you can optimise React apps and ensure that the loading time is minimal.<\/span><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd6b2f1 elementor-widget elementor-widget-text-editor\" data-id=\"dd6b2f1\" data-element_type=\"widget\" id=\"is-react-good-for-seo\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<h2><b>Is React good for SEO?<\/b><\/h2><p><span style=\"font-weight: 400;\">Whilst there are certain constraints that you may need to work within when working with a React app, you can certainly optimise them just like any other website.<\/span><\/p><p><span style=\"font-weight: 400;\">Depending on what you are using React for will determine whether it is the right platform for you. If you require your website to display like an app, for instance, if you have complex search engines and data like comparison sites, then React apps can work great.<\/span><\/p><p><span style=\"font-weight: 400;\">However, for smaller websites, then it may not be what you need if you are considering using it as a website. React does allow you to customise metadata which enables you to optimise your meta titles and descriptions depending on what the page is.<\/span><\/p><p><span style=\"font-weight: 400;\">The reliance on Javascript code can make them slower to load but using optimised images and techniques like server-side rendering will ensure that your React application loads fast and provide a good experience both for Google and for potential visitors to your site.<\/span><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-217a10e elementor-widget elementor-widget-text-editor\" data-id=\"217a10e\" data-element_type=\"widget\" id=\"can-google-index-react-apps\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<h2><b>Can Google Index React applications?<\/b><\/h2><p><span style=\"font-weight: 400;\">Google can certainly index React applications so long as your search engine optimization is not neglected.<\/span><\/p><p><span style=\"font-weight: 400;\">We have discussed how React applications load content and ensuring that you use client-side rendering so that when it comes to crawling your React web app, your content is already pre-loaded and this will help massively.<\/span><\/p><p><span style=\"font-weight: 400;\">You need to build your application in a way that prioritises your important content and provides a good experience for your users.<\/span><\/p><p><b>Some of the best ways to make an SEO friendly react app include:<\/b><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Rendering your page on the server so it can load immediately.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Testing each of your pages using Fetch as Google to ensure that Googlebot is finding your content.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Using images that are optimised, reduced in file size and preload along with the content.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Optimise your metadata to ensure that the pages you build are clear for Google to understand.<\/span><\/li><\/ul>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f5de5c0 elementor-widget elementor-widget-text-editor\" data-id=\"f5de5c0\" data-element_type=\"widget\" id=\"does-google-index-dynamic-content\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<h2><b>Does Google index dynamic content?<\/b><\/h2><p><span style=\"font-weight: 400;\">Google does index dynamic content but it is slightly harder to process than it would be just indexing fixed content. Ensuring that your dynamic content pages in React are optimised in a way that reduces dynamically generated URL&#8217;s is one way to help Google crawl your website more efficiently. You can submit Robots.txt files that will prevent Google from crawling any parameters that are generated through the dynamic content. Also, ensuring that the content you want Google to crawl is made available and is easy to discover will ensure that the right pages of your React app are indexed.<\/span><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8d020a4 elementor-widget elementor-widget-text-editor\" data-id=\"8d020a4\" data-element_type=\"widget\" id=\"conclusion\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<h2><b>Conclusion<\/b><\/h2><p><span style=\"font-weight: 400;\">Google can certainly index React web apps but it is certainly more challenging to optimise, compared to your standard WordPress or Shopify website.<\/span><\/p><p><span style=\"font-weight: 400;\">You will require some coding knowledge in order to understand what is required to ensure your web pages load efficiently. You also need to understand how to set up server-side rendering to ensure that your key web pages are pre-loaded prior to both Google and your potential customers landing on your website. (I highly recommend<\/span><a href=\"https:\/\/www.fastly.com\/\" target=\"_blank\" rel=\"noopener\"> <span style=\"font-weight: 400;\">Fastly<\/span><\/a><span style=\"font-weight: 400;\"> as a way to preload the content you want on display).<\/span><\/p><p><span style=\"font-weight: 400;\">You should only consider using React applications if you believe that it is necessary to house your content. For most businesses, using WordPress, Shopify or Magento will give you the necessary framework to build your online business.<\/span><\/p><p><span style=\"font-weight: 400;\">For single-page applications, however, React can be a great framework to use and can certainly go a lot further than most content management systems.<\/span><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>What are Google React apps and can they be indexed in Google? I am often asked about how easy it is for Google to index React apps online and whether there is anything else you should be doing in order to get your React application picked up by Google. In this article we will look &hellip; <a href=\"https:\/\/www.joshuageorge.co.uk\/can-google-index-react-apps\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Can Google Index React Apps? | Everything you need to know<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":4967,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false},"categories":[82,92],"tags":[],"_links":{"self":[{"href":"https:\/\/www.joshuageorge.co.uk\/wp-json\/wp\/v2\/posts\/4621"}],"collection":[{"href":"https:\/\/www.joshuageorge.co.uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.joshuageorge.co.uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.joshuageorge.co.uk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.joshuageorge.co.uk\/wp-json\/wp\/v2\/comments?post=4621"}],"version-history":[{"count":14,"href":"https:\/\/www.joshuageorge.co.uk\/wp-json\/wp\/v2\/posts\/4621\/revisions"}],"predecessor-version":[{"id":5528,"href":"https:\/\/www.joshuageorge.co.uk\/wp-json\/wp\/v2\/posts\/4621\/revisions\/5528"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.joshuageorge.co.uk\/wp-json\/wp\/v2\/media\/4967"}],"wp:attachment":[{"href":"https:\/\/www.joshuageorge.co.uk\/wp-json\/wp\/v2\/media?parent=4621"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.joshuageorge.co.uk\/wp-json\/wp\/v2\/categories?post=4621"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.joshuageorge.co.uk\/wp-json\/wp\/v2\/tags?post=4621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}