MARTIN SPLIT: 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 read 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 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?
[MUSIC PLAYING]
Let's start looking at a typically React app.
While your React projects might be
different in the libraries and components you use
and their content and complexity,
there is 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 place holder 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 and a list.
Moving onto our app component, we import the router along
with the switch and route components
and change the render function so
that we render the post 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 Google bot 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 Google bot 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 a 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 content into it
isn't very useful either.
To do this in React, we can use the helmet component
that we install from NPM [INAUDIBLE],,
and then add it to the render method in our components.
We can configure the title of 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 us 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 is 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 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 the series for more great tips
on making your app visible and successful with Google search.
We have a couple more episodes about JavaScript
SEO your 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're
finding our new series useful.
See you soon.