3x3 SEO tips for JavaScript web apps

(playful upbeat music) - Hello and welcome to the three by three SEO tips for JavaScript web apps. I like to start with a few words about Google Search, SEO, and JavaScript in general before we dig into the three tips I have for you tonight, plus a little bonus tip at the end. Okay, first things first, Google Search does support JavaScript. Since May 2019, we are also using an evergreen Chromium to render all pages, making sure that we can index content generated by client-side JavaScript as well as content in static pages. Most modern frameworks will work fine out of the box, and SEO isn’t more of a concern than for non-JavaScript-driven pages.

00:52 - So you may wonder, why are so many SEOs nervous when hearing that a website will be implemented using JavaScript frameworks? Well, the short answer is because things can still go wrong. There are lots of potential challenges and aspects that should be considered also from an SEO perspective when building or changing a website. These are not limited to JavaScript sites, though, even if they sometimes do manifest after site relaunch that happens to be leveraging client-side JavaScript. Such things could include issues like marking pages as noindex by accident or blocking our crawler from retrieving crucial JavaScript resources or API end points, or setting up the server in a way that prevents us from accessing your site and its content properly. Again, we do see these problems in JavaScript-driven websites, as much as in non-JavaScript-driven websites.

01:59 - And these can usually be prevented by having a plan for implementation and testing of a new website or a new website version in place. Okay, so we’ve got that out of the way. Let’s look at the first tip, the first thing you should check in a new or an existing project. Does every page have useful metadata? Two bits of metadata are particularly important for your website in Google Search, the title and the meta description, as these show up in search result pages. They are not important for ranking purposes, but they do help your users identify the page they might want to go to in order to find the information that they’re looking for. If all your pages show a generic title and description snippet, that isn’t exactly helpful for users trying to find the best page according to their search intention.

02:57 - If you do have specific titles and descriptions, on the other hand, it is perfectly clear to users which one of your pages would be the best to serve their interest. So how do you get that implemented? In Angular you can use the built in Title and Meta services, import them from the platform-browser package, and inject them in the constructor. Once you’ve done that, you can use them in the lifecycle hooks of your component and specify them with information available in the Components. That way, it reflects the page content. Here, for instance, we set the title and the meta description according to the currently shown recipe, for example. In React, the React helmet library can help with this.

03:50 - Once you installed an imported React helmet, you can use the helmet component in the JSX of your Components random method. Again, we are setting the title and meta description with information from the current recipe. In VUE JS applications, you can install VUE dash Meta from NPM and specify a meta info lifecycle hook in your Component. Similar to the previous examples, here, we are setting both the title and the description snippet with the recipe-specific information from the component data, but title and description aren’t the only pieces of metadata that you might want to set. Tip two is that, in some cases, like on error pages, you may want to prevent Google Search from indexing the pages, and, if multiple URLs point at the same piece of content, you may want to specify which of these you consider to be canonical. Let’s look at how to do this. Let’s start with the error pages.

04:55 - I’m pretty sure you would like to avoid having error pages show up in search results, and so do we. Often, we can spot error pages and exclude them automatically, but it is better to make sure they don’t show up by excluding them explicitly on your site. So if you’re using Angular, you can use the meta service for this. When you specify a robots meta tag and set its content to noindex, the page will be skipped by the indexing pipeline in Google Search. In React, React helmet gives us the same ability.

05:33 - We add a meta tag for robots and set it to noindex if the recipe does not exist. For VUE JS, it’s VUE metas, metaInfo method that we will extend to set the robots tag to noindex when necessary. Okay, now let’s deal with the canonicals because we can pretty much build on the implementations we’ve just seen. So let’s say we have a bunch of different URLs pointing to the same content, like /recipes/cupcakes, or /recipes?id=1337. How can you tell Google Search which of these you would prefer to be shown in search results? For Angular, we could build us a link service ourselves.

06:17 - This service allows to inject link tags into our pages. This implementation is basic but does the job. In our components, we inject the service and then use it to create a new link with relation canonical and the URL we’d like to be showing up in search results for this page. React helmet has this built in. In React applications with React helmet, add the relevant link tag in the helmet section of your components render template and there you go. For VUE JS applications, you can add a link property in the return object of your metaInfo method.

06:56 - Include the relation and HTML attributes and set them to canonical and the desired URL respectively. With that, we got the basic metadata nailed down, so tip three is looking at one more bonus way of having Google Search highlight our content, structured data. Using structured data makes your pages eligible to be shown as rich results if the content falls within one of the many supportive verticals, such as recipes, books, articles, products, and many more. Note, however, that implementing structured data does not guarantee that your page shows up as a rich result, though. To implement this in Angular, we can build us another small service to inject the necessary JSONLD script tag into our pages.

07:48 - The service can then be used in our components similar to the other services we’ve seen in this presentation so far. In React, you might add the information in your random method as part of your helmet markup. For VUE JS applications, you can pass structured data into your template by specifying the JSONLD markup in your data lifecycle hook and then use the v-html mechanism and type to specify them in the rendered HTML. If you want to learn more about structured data, the available verticals and implementation details, check out our search gallery at goo.gle/search-gallery. Oh, I promised a bonus tip. It’s for those of you who use VUE JS. As VUE router lets you pick different strategies as to how you want to do the routing in URLs in your application, let’s make sure that crawlers like Googlebot can actually crawl them because one way of configuring it is to use fragments.

08:53 - These have the upside of being trivial to set up on the server, as the server isn’t really concerned with such URLs. That’s because fragments, the things you see following a hash symbol, are ignored on the network level. They only address content that is part of the content of the document at that URL before the hash symbol. Unfortunately, that does mean that crawlers treat pages that have all the routing information for specific content in the fragment as if they’re all the same URL. To give you an example, a URL like /recipes/cupcakes is very clearly different from, say, /recipes/ or /.

09:45 - Crawlers see these as distinctive different URLs, fine, but what if our our URL is /# and then, say, /recipes/cupcakes? It’s all in the fragment there, then it looks like the homepage when the crawler takes the URL. So crawlers will also just request the homepage, and that means that all the different recipes and all the other content is invisible to this crawler. Luckily, by selecting the history mode in the router configuration and making sure that you server serves all URLs correctly, you can fix that. That way, crawlers can process all your URLs and see all of your content. All right, so those were some of the basic tips for your JavaScript web apps.

10:35 - I’m sure that was quite a bit, and you probably want to dig deeper and learn more. So let me give you the takeaways again and a few more pointers. First and foremost, JavaScript and SEOs aren’t enemies, okay? Most modern frameworks will just work out of the box, but it is crucial to test your implementation and keep an eye on those things and how your site is doing in Google Search. Our testing tools and Google Search Console are fantastic for doing just that, and they’re all free. We also put together a JavaScript SEO basics guide to get you and your coworkers started on this topic.

11:18 - Should you encounter any challenges, check out our troubleshooting guide for more information on the most common issues and solutions. We also do have a YouTube video series on JavaScript SEO that you can check out on our YouTube channel, youtube.com/google webmasters. There’s more episodes to come in the future. Thank you very, very much for watching this video, and do remember to build cool stuff for your users. Have a great time. Stay safe. Bye bye. (playful upbeat music) .