Make your React web apps discoverable - JavaScript SEO

Key Takeaways

if you are building single page apps you might be using a JavaScript framework to do so one of the most popular frameworks is react react influenced a series of other frameworks and is also known for introducing a Dom extraction layer and a domain-specific language to write component templates called JSX the virtual Dom that react ships with will come in handy when we are trying to make sure our users get to the content as fast as possible as we will later see so what do you need to do to make sure your react apps are discoverable in search and how do you handle SEO let's start looking at a typical react app while your react projects might be different in the libraries and components you use and that content and complexity there's a lot that all react applications roughly have in common for this video we will start by creating a fresh app using the create react app helper utility in this video we are using create react app version 2.0 to and first we create the application skeleton using this command this created a very basic react app for us to work with for this video so let's take a look at it by running the suggested development server we can install via NPM as well so if our our application only has one piece of content let's make this more interesting by adding another route and another piece of content first we install react router Dom now that we have a router to handle different pages we can add a component for another page we will be using a placeholder API to fetch a few posts so we will call this the posts list component when this component is ready to be displayed we fetch the data from the API endpoint and store it truncate it a little bit and save it in the components local state in the render method we map the posts to list items containing the post title and then render all the posts in a list moving on to our app component we import the router along with switch and route components and change the render function so that we render the posts lists component instead of the header and logo this is a good time to throw out the default CSS as well and then check our app in the browser we now see a list of post titles as we would expect so similar to the posts list component we can now add a component called post detail to show one individual article with the title as the headline and the content below it it is very similar to the post list except we only fetch one post from the API and we take the ID from the post from the URL parameters let's add this component to our router setup last but not least we will set up our post list components so that it provides links to each of these article pages we will use the link component from react router for this now we build our project and deploy it somewhere with our sample application working we can look into improving the discoverability of it so users can find our content more easily on the web a good first stop to check how we are doing is the mobile-friendly test we just put the URL into the field and we see what Googlebot sees when crawling our pages we see that all our content shows up and that buildings are a tags with an href attribute which is what Googlebot will pick up and crawl so our content will be indexed but we can do better here first of all we want to make sure to give meaningful descriptive titles and descriptions to all our pages for the home page that can be the name of the blog as the title and what this blog is about as the description for the individual post pages we should set the title to the post title and the description to the most important takeaways or summary well we don't have that information here so instead for the description we will just use the first 100 characters from the blog post note that this is an arbitrary length the meta description does not have any length restrictions but putting in the entire post ponton into it isn't very useful either to do this and react we can use the helmet component that we install from NPM or yarn and then add it to the render method in our components we can configure the title the canonical URL as well as any meta tags now if we check one of the post pages in the mobile-friendly test we see the title is the same as the blogpost style this is great because it helps users searching for a specific topic to see how the blog post is relevant for their goal the same is true for the description we show a snippet from the description and the search results to help users make an informed decision on which result is the best for their needs all right let's look at a more complex topic as we explained in a previous video when we crawl your pages we defer the execution of JavaScript to a later moment when resources for rendering are available this leads to two ways of indexing the first one that isn't running JavaScript and then potentially a second one where we execute JavaScript to see the content that depends on it if your content changes very frequently or your site is very large you might want to make sure to have your content be available in the first wave of indexing so without JavaScript it is also a good idea to not depend on JavaScript too much as other BOTS might not execute it at all and you might find that you gain a better performance for users as well if you do not rely on JavaScript to display your content luckily react has a few ways of supporting us with reducing the reliance on JavaScript by doing server-side hybrid or dynamic rendering in our example the content won't change that often so we can use a solution like react snap to pre render our content and deploy the resulting static files let's install react snap and take it for a spin here it is crawling all our post pages if we now look at the source of our page in the browser we can see that these files contain our content even if JavaScript hasn't been executed setups like this are not always this easy to accomplish but there's plenty of documentation of to find out more about the other possibilities for server side or pre-rendering with react we could also decide to only serve the pre-rendered version to bots like google bot that would be called dynamic rendering in which case do take a look at our dynamic rendering documentation as well I suggest you also take a look at the other videos of this series for more great tips on making your app visible and successful with Google search we have a couple more episodes about JavaScript SEO coming out so stay tuned and please tell us what you think so far in the comments below and also like and share if you are finding our new series useful see you soon