We’re lucky enough to live in an era where there are many ways to go about building your ideal website. The developments and possibilities around building site elements with enhanced interactivity to suit almost every user need continue to evolve.
Many JS frameworks allow ease of implementation in features such as caching, lazy loading code splitting, and various interactive elements on websites. As with any JS implementation, however, there are drawbacks, and when not considered properly, this can negatively impact SEO as well as overall website performance.
We’ll take a look at some of the overall SEO considerations for JS frameworks later in the article. First, let’s dive into some of the popular JS frameworks in use today and their respective pros and cons.
React, maintained by Facebook's parent company Meta, is often the preferred JS framework when it comes to building single page or mobile applications. React is quick due to its use of a virtual DOM (Document Object Model) and offers wide documentation with reusable components and community support.
However, React alone isn’t a fully-fledged JS framework and will require layering on of additional libraries (such as Next.js) to achieve functionalities such as server-side rendering.
Next.js is popular with those on the lookout for server-side rendering in their JS ventures, with use cases being large, JS-heavy eCommerce websites, for example. Its ability to pre-render components has a great SEO benefit (as we covered in our server-side rendering piece) and can reduce payload by minimising the work the client (such as a web browser) needs to undertake in order to render the page.
Drawbacks come in the form of potential higher maintenance of the codebase, and the fact that Next.js is an “opinionated” framework, meaning that developers have to follow the path of the framework and there is limited flexibility.
Vue.js is an open-source JS framework with common use cases in single-page applications, progressive web applications and mobile apps. Incredibly lightweight and relatively easy to use, it boasts quick performance and can be used alongside other libraries. Its “official” libraries are smaller in scope, however, and from an SEO standpoint, it doesn’t support server-side rendering without the help of additional frameworks such as Next.js.
Created and maintained by Google, Angular has a large and active community that offers plenty of libraries and tools. You’ll often see it in the wild, deployed on enterprise-scale websites given its comprehensive framework and high number of built-in features.
Angular comes with a steep learning curve, given its complexity, and it isn’t especially lightweight, though it comes with server-side rendering capabilities allowing you to create pre-rendered content.
Free and open source, Gatsby is based on React, with a view to empowering developers to build fast, responsive websites. It boasts excellent image handling and optimised static site generation. Gatsby also comes with the option of additional bolt-ons to assist SEO efforts, in the form of plugins. All of this makes it a very popular choice when building websites in the modern day.
It does have a limited number of libraries compared to other frameworks, so may require additional development for certain features.
Ember.js is known for its openness to configuration, allowing developers to get to grips with it relatively easily and flexibly. It’s often used for complex web interfaces and enterprise sites and supports server-side rendering which, again, is good news for SEO teams.
Despite its flexibility, it doesn’t possess as many libraries as other frameworks and has a smaller active community.
Built on Chrome’s V8 engine, Node.js offers high performance and can be used to build out scalable applications. Node.js is popular among companies such as Netflix and Uber, as it is suitable for apps that require streaming and messaging.
It can provide a heavy CPU payload and the API has been known to be unstable, but can be used alongside server-side applications such as Next.js or Nuxt.js for those looking for an SEO benefit.
As you can see above, there are a few recurring themes which need to be factored in. A key cornerstone of any JS execution with SEO in mind is that it needs to be crawled, rendered, and therefore deemed liable for indexation by Google and other search engines.
In terms of how Googlebot works with JS, we know that JS elements are often queued for processing in a “second wave” of indexing once the HTML has been read, which can lead to delays in indexation. This can lead to a lot of troubleshooting, inspecting pages in Google Search Console and Chrome to establish which resources are being read and rendered properly — where improvements need to be made.
A solution that the Chrome team has provided is the option to bring back full prerendering of future pages that a user is likely to navigate to. This modern reboot of prerendering rolled out from Chrome 108.
Here are a few more SEO considerations when looking to deploy some of the JS frameworks we’ve detailed above:
Ensure your metadata elements, such as page titles and meta descriptions, are available in your website’s source code. Some JS frameworks use dynamic content loading, which can mean that metadata (and other on-page SEO elements) may be changed and not represented in the source code, depending on the user interacting with the page. Use crawling tools like Screaming Frog to help you in your JS troubleshooting of on-page elements.
Ensure your URL structure and links in the source code are clean and crawlable by search engines. Some JS frameworks use link markup formats that won’t be crawlable or discoverable. In the source code, check that all links are marked up with a <a> tag and an href attribute.
Implement progressive enhancement techniques, which enable the emphasis on users (and search engines) reading the content of and functionality of the site over everything else. This is particularly important if JS isn’t fully supported or enabled by a user’s browser.
If you’re using structured data deployment with JS, make sure this is validated. Along with other areas of content, JS frameworks can also be used to generate structured data on a site with greater ease. Make sure you’re testing this code via Google’s Rich Results Test so you’re still in line for featured snippets, image results, or other non-traditional search results on Google.
JS framework case studies for SEO: the good and the bad
Many of the above frameworks (and others) are now very commonplace on the wider web. This, of course, has led to various examples of things going both well and badly from an SEO standpoint.
A/B testing SEO tool SearchPilot undertook a test whereby they implemented the use of React via server-side rendering on an eCommerce site’s product pages. They needed to improve user experience in the purchase process, a common issue that JS can be looked to in order to address.
Their results, following careful consideration to ensure all on-page elements, such as metadata, were placed in the source code, saw a 13% uplift in organic for the new React-based product pages.
There are also plenty of case studies where performance improved when a website moved from JS framework to the other. In 2018, Hong Kong-founded logistics platform Easyship moved its web frameworks from Angular to Next.js, citing frustrations with Angular’s performance and SEO shortcomings in light of modern best practices. The ability to render content on the server side saw website performance jump by 37% and organic traffic climb by 14%.
As we’ve mentioned, there are plenty of pros and cons for all JS frameworks and there is no silver bullet. However, a server-side approach is a clear recurring theme of SEO success.
It may be hard to find explicitly negative case studies about things going wrong with JS framework implementations from an SEO standpoint (who would want to own up to that?). But common difficulties with JS framework migrations do arise.
These difficulties often manifest themselves in the form of cached versions of JS-generated pages shown to Googlebot, without the full content or internal links being read properly. This can lead to massive drop offs in revenue caused by content not being crawled and indexed properly on Google.
The key thing to remember is that if you’re deploying JS frameworks, if a version of your website’s HTML, be it on the server side or otherwise, isn’t readily available to the user and to Googlebot, your SEO will no doubt take a hit.
The evolution of many of the aforementioned popular JS frameworks has seen their use skyrocket, with many webmasters looking for malleable and efficient ways to enhance their user experience while also maintaining their SEO visibility.
Some of these frameworks have revolutionised the way modern web apps are built. SEO concerns remain, but ensuring you take the necessary steps to ensure your content is available and rendered accurately by Googlebot will hold you in good stead. A lot of this is solved by server-side rendering in some form.
There are many benefits to be gained by adopting JS frameworks. Many of these we’ve listed above, though the crux of it lies in streamlining development processes and building dynamic and interactive websites easily and at scale. JS-led user experience elements can also help engagement rates and conversion rates improve, given the wide array of libraries available, active community support, and wealth of flexibility.