Let's walk through how you can optimize your JavaScript site and make it search-friendly.
There are some slight differences from the "normal" SEO which I'm going to show you.
Allow Crawlers
Allow Googlebot to access and download resources on your site so that they can properly render your content and index. Your robots.txt file should look this:
User-Agent: Googlebot
Allow: .js
Allow: .css
Use ‘History’ Mode Instead Of The Traditional ‘Hash (Fragments)’ Mode For URLs
To allow Googlebot to find links on your pages use the History API. Googlebot looks for links on your page and only considers the links in href of the HTML attribute.
Anything after #/ is ignored and Googlebot won't crawl it. So avoid the use of fragments to load different page content (most especially single-page applications) and only use the History API.
Use meaningful HTTP status codes
One thing Googlebot uses to detect if something went wrong during crawling is the HTTP status code.
Use HTTP status code to tell Googlebot which page it should crawl and index or which ones it shouldn't.
You can use 401 (Unauthorized status code) for pages behind a login for example, and you can tell Googlebot if a page has moved to a new URL so as to update the index when crawling again.
Most SEOs used the 301/302 redirect. But redirect works differently in JavaScript being a client-side. 301/302 are server-side redirects and so when adding redirects, the recommended function is window.location.replace().
An example of what a JavaScript redirect to my homepage looks like:
<html>
<head>
<script>
window.location.replace("https://www.semoladigital.com/");
</script>
</head>
</html>
When set up this way, it'd send visitors to https://www.semoladigital.com/ upon page load.
Although many would advise you to use…
Window.location.href.
But The problem with this implementation is that - the current URL is added to the visitor's navigation history. This can cause the visitor to get stuck in back-button loops.
Whereas, the window.location.replace() would not.
Avoid using the window.location.href when you want to redirect visitors immediately to another URL.
This redirect method works well for JavaScript, it's supported by Google and passes PageRank.
Webmaster Trends Analyst John Mueller responded in a #AskGoogleWebmasters to whether Googlebot can detect client-side JavaScript redirects. And Mueller said,
“We support JavaScript redirects of different types and follow them similar to how we’d follow server-side redirects"
Client-side JS Redirects: Can Googlebot Detect Them? #AskGoogleWebmasters
Use meta robots tags correctly
Sometimes you might have some pages (or content) that you want to prevent search engines from indexing.
For pages like thin content or upcoming promotions, you can use the meta robot tag to prevent Googlebot from indexing or following links on the page.
For example, the code below on a page will block Googlebot from indexing the page:
<!-- Googlebot won't index this page or follow links on this page -->
<meta name="robots" content="noindex, nofollow">
On-Page SEO
Do on-page optimization as you would for a non-javaScript site. Keep to the optimization guidelines for content, title, meta description, image alt attribute, and so on…
For more on on-page SEO optimization follow the link.
Duplicate content
Handle duplicate content with canonical tags as you would for every other type of website.
Canonical tags allow you to choose only one version and hint search engines to index that version.
SEO “plugin” type options
In JavaScript apps and websites, plugins are referred to as modules. Modules are used by JavaScript frameworks and perform the same functions as the plugins you're used to in WordPress.
A React Helmet allows you to set the popular tags that you would need to do JavaScript SEO.
Use structured data
Implementing structured data on your JavaScript site is as easy as every other type of site. You can generate the required JSON-LD and then, inject it into the page using JavaScript. Just be sure that you carry out testings using Google structured data testing tool to prevent unnecessary issues.
Sitemap Generation
JavaScript frameworks each has their own module that can easily be used to generate a sitemap.
For example,
The following code will generate and save your site sitemap:
sitemap-builder.js
require('babel-register');
const router = require('./router').default;
const Sitemap = require('../').default;
(
new Sitemap(router)
.build('http://my-site.ru')
.save('./sitemap.xml')
);
Whatever framework you use, typing the framework +sitemap on Google will return a link to where and how you can implement the sitemap on your site.
Error Pages
JavaScript sites can't throw a 404 error because it is client-side based and not server-side. To handle error pages, use JavaScript redirects to pages with 404 status code.
You can also add a noindex tag to pages that are failing along with something like: "404 page Not Found" since a 404 Not Found page will return a status code of 200, which is what you want.
Lazy Loadings
Working with JavaScript SEO is not different from working with WordPress SEO. In the sense that, while you've plugins to do virtually all you want to achieve on your site, there are also modules to add different functionality to the JavaScript site. Lazy and Suspense are the two most popular modules to help solve this type of issue. A good practice to improve your site's overall SEO is to lazy load images so that they only load when users are about to view them.
Conclusion
JavaScript is a ubiquitous and powerful part of web applications that don't seem to be leaving the webspace anytime soon. Therefore, an understanding of how Googlebot and other crawlers read, crawl, and render JavaScript applications is essential to optimizing your Javascript web app to rank top of search engines.
Need SEO Expert for your next project, follow that link for a free consultation.
Top comments (2)
SEO for JavaScript is tough, ever-changing requirements adding extra-burden on dev-team while implementation of SSR is tricky and time-consuming. We are using prerendering.com for our projects and projects we maintain
Nice post! Search Engine Optimization is an integral part of a successful online strategy for any business in the modern world. As an experienced SEO specialist, I understand firsthand the importance of this. Increasing your online presence can be a daunting task, but with mississaugaseo.net help, you can be sure that your company will be at the forefront of your industry. Trust us to achieve great results together and ensure your online success.