Make your React web apps discoverable - JavaScript SEO

If you are creating single page applications, you may be using a JavaScript framework to do so. One of the most popular frameworks is

react

. React influenced a number 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 be useful when we're trying to

make

sure our users access content as quickly as possible, as we'll see later, so what should you do to

make

sure

your

React applications? they can be discovered in search and how SEO is handled.

Let's start looking at a typical

react

app, while

your

react projects may be different in the libraries and components it uses and in content and complexity, there are many things that all react

apps

have in common for this. video, we will start by creating a new app using the react app creation helper utility. In this video, we are using react app version 2.0 to build and first we create the skeleton of the app using this command. This created a very basic react app that we can work with. for this video, let's take a look at it by running the suggested development server which we can also install via NPM, so if our application only has a content part, let's make this more interesting by first adding another path and another content part. install React Router Dom now that we have a router to handle different pages, we can add a component for another page, we will use a placeholder API to retrieve some posts, so we will call it posts list component when this component is ready to be displayed, we retrieve the data from the API endpoint and store it, truncate it a bit and save it to the components local state.

In the render method, we assign the posts to list the elements containing the post title and then render all the posts in a moving list. In our app component, we import the router along with the switching and routing 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 also discard the default CSS and then check. In our in-browser app, we now see a list of post titles as you would expect, very similar to the post list component. Now we can add a component called post detail to display an individual article with the title as the title and the content below it. is very similar to post list, except we just retrieve a post from the API and take the post ID from the URL parameters.

Let's add this component to our router configuration. Last but not least, we will configure our posts list components to provide links to each of these article pages, we will use the react router link component for this, now we build our project and deploy it somewhere Instead with our sample app up and running, we can look to improve discoverability so users can find our content more. easily on the web, a good first stop to check how we're doing is the mobile-friendly test. We simply enter the URL in the field and see what the Googlebot sees when it crawls our pages, we see that all our content appears and that the buildings are tagged with an href attribute which is what Googlebot will collect and crawl so that our content is indexed, but we can do better here.

First, we want to make sure we provide meaningful titles and descriptions for all of 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 need to set the title for the post title and the description for the most important conclusions or summary, well we don't have . that information here, so instead of the description we'll just use the first 100 characters of the blog post. Please note that this is an arbitrary length. The meta description has no length restrictions, but including the entire post ponton isn't very helpful.

Whether to do this and react, we can use the hull component that we installed from NPM or thread and then add it to the render method in our components. We can set the title, canonical URL, and any meta tags now by checking one of the On the post pages in the mobile-friendly test, we see that the title is the same as the blog post style. This is great because it helps users searching for a specific topic see how the blog post is relevant to their goal. The same goes for the description. We display a snippet of the description and search results to help users make an informed decision about which result is best for their needs.

Well, let's look at a more complex topic as we explained in a previous video. When we crawl your pages, we defer. executing JavaScript to a later time when the resources for rendering are available, this leads to two ways of indexing the first which does not execute JavaScript and then potentially a second 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 may want to make sure your content is available in the first wave of indexing, so without JavaScript it is also a good idea not to rely too much on JavaScript, as that other BOTS may not run. and you may also get better performance for users if you don't rely on JavaScript to display your content.

Fortunately, react has some ways to help us reduce the dependency on JavaScript using a hybrid of server-side or dynamic rendering. In our example, the content won't change as frequently, 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 try it out. Here you are tracking all our posts. pages, if we now look at the source code of our page in the browser, we can see that these files contain our content even if JavaScript has not been executed. Configurations like this are not always so easy to achieve, but there is plenty of documentation to figure this out.

To learn more about the other possibilities for server-side or pre-rendering with react, we could also decide to serve only the pre-rendered version to bots like Googlebot, which would be called dynamic rendering, in which case take a look at our dynamic rendering documentation as Well, I suggest you also check out the other videos in this series for more great tips on how to make your app visible and successful in Google search. We have a couple more episodes on SEO in JavaScript, so stay tuned and let us know what you think. until now in the comments below and also like and share if you find our new series useful, see you soon