Make your React web apps discoverable - JavaScript SEO
Make your React web apps discoverable - JavaScript SEO
In this video of the JavaScript SEO series, Webmaster Trends Analyst, Martin Splitt shares how to make your React apps discoverable in search and how to avoid common problems you may encounter with a React app.
Check out ReactDomServer → http://bit.ly/2W2fKUu
Learn more about react-snap → http://bit.ly/2JgeQT0
Learn more about Rendertron → http://bit.ly/2TCZU60
JavaScript SEO is an entirely new series on best practices and SEO for JavaScript.
Subscribe to the Google Search Central Channel → https://goo.gle/SearchCentral
Check out other videos in the JavaScript SEO Playlist → https://bit.ly/JavaScriptSEO
Content
0 -> if you are building single page apps you
2.07 -> might be using a JavaScript framework to
3.99 -> do so one of the most popular frameworks
6.779 -> is react react influenced a series of
10.26 -> other frameworks and is also known for
11.94 -> introducing a Dom extraction layer and a
14.549 -> domain-specific language to write
16.08 -> component templates called JSX
18.8 -> the virtual Dom that react ships with
22.05 -> will come in handy when we are trying to
24.9 -> make sure our users get to the content
26.939 -> as fast as possible as we will later see
29.66 -> so what do you need to do to make sure
33.75 -> your react apps are discoverable in
35.7 -> search and how do you handle SEO let's
43.29 -> start looking at a typical react app
45.68 -> while your react projects might be
48.57 -> different in the libraries and
49.8 -> components you use and that content and
52.53 -> complexity there's a lot that all react
55.26 -> applications roughly have in common for
58.739 -> this video we will start by creating a
60.93 -> fresh app using the create react app
63.09 -> helper utility in this video we are
66.57 -> using create react app version 2.0 to
69.119 -> and first we create the application
72.42 -> skeleton using this command this created
75.78 -> a very basic react app for us to work
78.15 -> with for this video so let's take a look
81.299 -> at it by running the suggested
82.68 -> development server we can install via
84.509 -> NPM as well so if our our application
87.06 -> only has one piece of content let's make
89.79 -> this more interesting by adding another
91.65 -> route and another piece of content first
95.13 -> we install react router Dom now that we
100.56 -> have a router to handle different pages
102.39 -> we can add a component for another page
105.95 -> we will be using a placeholder API to
109.079 -> fetch a few posts so we will call this
111.659 -> the posts list component when this
114.72 -> component is ready to be displayed we
116.88 -> fetch the data from the API endpoint and
118.979 -> store it truncate it a little bit and
121.17 -> save it in the components local state in
123.78 -> the render method we map the posts to
128.009 -> list items containing the post title and
130.89 -> then render all the posts in a list
134.72 -> moving on to our app component we import
138.12 -> the router along with switch and route
139.89 -> components and change the render
141.75 -> function so that we render the posts
143.73 -> lists component instead of the header
145.5 -> and logo this is a good time to throw
148.83 -> out the default CSS as well and then
151.019 -> check our app in the browser we now see
154.2 -> a list of post titles as we would expect
157.43 -> so similar to the posts list component
160.709 -> we can now add a component called post
163.14 -> detail to show one individual article
165.66 -> with the title as the headline and the
167.79 -> content below it it is very similar to
170.37 -> the post list except we only fetch one
172.95 -> post from the API and we take the ID
175.019 -> from the post from the URL parameters
177.89 -> let's add this component to our router
180.239 -> setup last but not least we will set up
184.29 -> our post list components so that it
186.06 -> provides links to each of these article
188.069 -> pages we will use the link component
191.069 -> from react router for this now we build
195.15 -> our project and deploy it somewhere with
198 -> our sample application working we can
200.34 -> look into improving the discoverability
202.62 -> of it
203.4 -> so users can find our content more
205.109 -> easily on the web a good first stop to
208.38 -> check how we are doing is the
209.76 -> mobile-friendly test we just put the URL
212.76 -> into the field and we see what Googlebot
215.4 -> sees when crawling our pages we see that
218.849 -> all our content shows up and that
220.47 -> buildings are a tags with an href
222.569 -> attribute which is what Googlebot will
224.519 -> pick up and crawl so our content will be
227.489 -> indexed but we can do better here first
232.049 -> of all we want to make sure to give
233.94 -> meaningful descriptive titles and
235.62 -> descriptions to all our pages for the
238.709 -> home page that can be the name of the
240.329 -> blog as the title and what this blog is
242.459 -> about as the description for the
244.26 -> individual post pages we should set the
246.329 -> title to the post title and the
248.43 -> description to the most important
249.75 -> takeaways or summary well we don't have
252.299 -> that information here so instead for the
255.09 -> description we will just use the first
256.68 -> 100 characters from the blog post note
259.769 -> that this is an arbitrary length the
262.38 -> meta description does not have any
263.849 -> length restrictions but putting in the
265.38 -> entire post ponton into it
267.27 -> isn't very useful either to do this and
271.02 -> react we can use the helmet component
273.18 -> that we install from NPM or yarn and
275.24 -> then add it to the render method in our
277.919 -> components we can configure the title
280.68 -> the canonical URL as well as any meta
282.87 -> tags now if we check one of the post
285.69 -> pages in the mobile-friendly test we see
288.09 -> the title is the same as the blogpost
289.77 -> style this is great because it helps
292.56 -> users searching for a specific topic to
294.93 -> see how the blog post is relevant for
296.91 -> their goal the same is true for the
299.4 -> description we show a snippet from the
301.77 -> description and the search results to
303.36 -> help users make an informed decision on
305.34 -> which result is the best for their needs
307.199 -> all right let's look at a more complex
310.83 -> topic as we explained in a previous
313.77 -> video when we crawl your pages we defer
316.77 -> the execution of JavaScript to a later
318.599 -> moment
319.139 -> when resources for rendering are
320.789 -> available this leads to two ways of
323.55 -> indexing the first one that isn't
325.8 -> running JavaScript and then potentially
327.84 -> a second one where we execute JavaScript
330.63 -> to see the content that depends on it if
332.97 -> your content changes very frequently or
335.31 -> your site is very large you might want
337.77 -> to make sure to have your content be
339.419 -> available in the first wave of indexing
341.34 -> so without JavaScript it is also a good
345.36 -> idea to not depend on JavaScript too
347.25 -> much as other BOTS might not execute it
349.949 -> at all and you might find that you gain
352.349 -> a better performance for users as well
354.21 -> if you do not rely on JavaScript to
356.31 -> display your content luckily react has a
359.61 -> few ways of supporting us with reducing
361.889 -> the reliance on JavaScript by doing
363.81 -> server-side hybrid or dynamic rendering
366.169 -> in our example the content won't change
369.93 -> that often so we can use a solution like
372.87 -> react snap to pre render our content and
375.69 -> deploy the resulting static files let's
378.389 -> install react snap and take it for a
380.4 -> spin
380.96 -> here it is crawling all our post pages
384.12 -> if we now look at the source of our page
387.479 -> in the browser we can see that these
389.789 -> files contain our content even if
391.8 -> JavaScript hasn't been executed setups
395.219 -> like this are not always this easy to
397.349 -> accomplish but there's plenty of
399.63 -> documentation of
400.47 -> to find out more about the other
401.97 -> possibilities for server side or
404.58 -> pre-rendering with react we could also
407.64 -> decide to only serve the pre-rendered
409.35 -> version to bots like google bot that
412.77 -> would be called dynamic rendering in
414.78 -> which case do take a look at our dynamic
417.18 -> rendering documentation as well I
419.06 -> suggest you also take a look at the
421.56 -> other videos of this series for more
423.81 -> great tips on making your app visible
425.79 -> and successful with Google search we
428.82 -> have a couple more episodes about
430.26 -> JavaScript SEO coming out so stay tuned
432.57 -> and please tell us what you think so far
435.84 -> in the comments below and also like and
439.23 -> share if you are finding our new series
441.15 -> useful see you soon
Source: https://www.youtube.com/watch?v=rKgF0rf009c