AuthorDaniel Cartland
LinkedIn
SEO considerations should always be at the forefront of your mind when migrating and when migrating to a JavaScript framework this is even more crucial. Not only to ensure your website continues to grow, but to mitigate the associated risks and traffic loss.
We’ve run through some essentials to consider when migrating to a JavaScript based website.
1. Make sure all important URLs remain as URLs
You need to have URLs for all your pages. It can be tempting not to do this as information can be loaded in dynamically when using a JavaScript site, however, if Google doesn’t see information that was on a previous URL, reflected on a new site, it will not continue to rank you for those given keywords.
JavaScript websites such as SPAs may not by default generate a URL for every page unless the History API (or similar) is being utiised. Therefore, this is a key consideration as otherwise Google will only be able to see the homepage of your new site.
2. Make sure your URLs can be crawled (aka server side rendering)
For your new JavaScript website to rank post-migration, search engines will need to be able to crawl the site. For this to happen, you need to have some sort of server side rendering solution. This can either be full server side rendering, or another solution such as pre-rendering.
This means that when a search engine requests a site, it will receive the rendered HTML and be able to crawl through a site, easily understand it, index and rank it.
3. Make sure you use elements that can be crawled
A JavaScript site gives you options for other ways to present information, for example the use of infinite scroll vs pagination, or dynamically generated elements such as onclick, which can change what is shown on the page.
The issue with these is that they may prevent certain information from being seen by search engines, as it requires interaction on the page that crawlers cannot do.
Even if this is great for users, you need to make sure that search engines such as Google can also see the relevant information, or you may not be rewarded in the SERPs for this (and it may even be detrimental if it was present and accessible on your site pre-migration).
4. Make sure you redirect map all your old URLs to new URLs
If you’re migrating this can either be a domain change, replatforming, or re-categorisation. In any of these examples if you are changing your URLs you need to make sure that you set up comprehensive redirect mapping to pass all the authority of your current domain, to your new domain.
Crucially this includes redirecting all pages you keep and all pages you’re consolidating to their closest equivalent. This will help to ensure that the authority is passed across and prevent soft 404s.
5. Keep internal linking consistent
When you’re using a JavaScript framework, it may be tempting to utilise the available functionality at your fingertips and load information in without linking to and requesting the new URL. For example using product modals.
However, since internal linking signals are an important part of determining the relative importance of pages on your site, in addition to making sure crawlers can easily access pages, and associate their content.
If you change this during a migration, you may be giving different signals on the importance of pages, or worse still, making your pages less likely (or impossible) to be found!
If you’re implementing JavaScript such as modal product windows from category pages for users, make sure to deep link to the actual product URL as well to ensure they are accessible to crawlers.
6. Keep signals consistent
With JavaScript websites you can have the added complexity of sometimes serving signals that may be contrasting. For example, your HTML may include a canonical that is different to that in the rendered DOM. In this situation, you are forcing Google to make a choice about if the page should rank and then which page should rank for a given term. For SEO purposes, you want to make sure that all signals are as consistent and as easy for Google to understand as possible.
When working with one of our clients we noticed that different URLs were resolving with and without JavaScript (with and without trailing slash). With JS disabled the non-trailing slash URL was resolving, with JS enabled, this URL would redirect to the trailing slash version.
No JS – example.com/test – resolves
With JS – example.com/test 301 – redirects to example.com/test/
A common issue we have seen with Angular websites is pages returning different status codes depending upon whether they are navigated to from the site, or visited directly. This is a big problem for SEO (as well as users!).
This meant that both were being indexed and competing in the SERPs – not great for SEO!
.jpg&w=828&q=75)