 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 chips with will come in handy when we are trying to make sure our users get through 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 their 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.02. 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 far, 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 the switch and route components and change the render function so that we render the posts list 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 component 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 the links 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 homepage, 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 the entire post content into it isn't very useful either. To do this in React, we can use the helmet component that we installed 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 blog post title. 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 in 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 available 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 Googlebot. 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!