Manage SEO in JavaScript applications
When developing any single page application or a website that uses JavaScript to fetch content from APIs, you need to think carefully about search engine optimization.
Table of contents
Content fetched from Kentico Kontent via client-side AJAX requests will not be indexed by Google, Bing and other search engines. Kentico Kontent doesn't allow it, and even if it did, most engines apart from Google don't even try to index JavaScript calls.

The current best practice is to make sure search engines are served fully rendered HTML with all the content you wish to be indexed. This can be achieved in several ways, each of them presenting a trade-off between performance, complexity, and cost. In general, you have three options:
- Server-side rendering
- Prerendering
- Static site generators
Below you will find a brief intro to each approach and links to more resources. There is no one best solution; you always need to consider the specific requirements of your project.
Server-side rendering
Server-side rendering is the practice of using a server to render content and serve the rendered HTML on the initial page load. The full JavaScript bundle loads later and subsequent requests are handled by the client. This solves the SEO problem and can improve perceived performance by reducing the initial load time of your single page app.
These kinds of apps are sometimes called isomorphic applications because their code can run on both client and server.
On the downside, server-side rendering increases the complexity of your application and can hinder performance in some situations, for example, when the server is under a heavy load.
- Read more about server-side renderingOpens in a new window to decide if it makes sense for your project.
All major front-end frameworks support server-side rendering or provide dedicated server-side rendering frameworks:
- React: Read about React server-side renderingOpens in a new window or check out Next.jsOpens in a new window.
- Angular: See Angular UniversalOpens in a new window.
- Vue: Read the Vue server-side rendering guideOpens in a new window or check out Nuxt.jsOpens in a new window.
Prerendering
Rather than using a web server to compile HTML on-the-fly per request, prerendering simply generates static HTML files for specific routes at build time. The advantage is that setting up prerendering is simpler and it allows you to keep your frontend as a static site without the need for a node server.
Any single page application using webpack can be prerendered using the Prerender SPA PluginOpens in a new window (often used for Vue apps).
For React specifically, there is react-snapshotOpens in a new window and react-snapOpens in a new window:
react-snapshot
tutorial on Mediumreact-snap
tutorial on Medium
Prerendering is also provided by several 3rd party services, for example:
- NetlifyOpens in a new window provides basic prerendering even for free its free plan.
- Prerender.ioOpens in a new window is a dedicated prerendering service and is also available as open-source.
Static site generators
Static site generators are tools that take your source code, assets, content from APIs, etc., and generate your website as a collection of static files. You can host the static files anywhere and SEO is not a problem. If your website doesn't require authentication or display real-time or user-specific data, consider using a static site generator.
- Staticgen.comOpens in a new window provides an overview of all static site generators.
- Gatsby.jsOpens in a new window is a React-based static site generator with a Kentico Kontent source pluginOpens in a new window.
- Nuxt.jsOpens in a new window works as a Vue-based static site generator and has a Kentico Kontent moduleOpens in a new window.
For more resources on using Kentico Kontent with static sites, see
Note: Some tools combine more that one approach, for example, Next.js and Nuxt.js support both server-side rendering and static site generation. The lines between server-side rendering, static site generators and prerendering can be blurry.
Testing
You can use the Fetch as GoogleOpens in a new window tool to test and examine how search engines see your website.
What's next?
In this article, we have covered three different ways to reliably allow search engines to index your JavaScript application. This is a rapidly evolving area of the JavaScript landscape so we encourage you to research the best approach for your specific requirements. This article just serves as a starting point; you are likely to find more tools or alternative solutions online.
- Have a look at our JavaScript sample apps and tools.
- Read a blog by one of our advocates on How to generate a static website with Vue.js in no timeOpens in a new window.
- See Going beyond static sites with Kentico Cloud & GatsbyOpens in a new window.
- If you have any questions, get in touch with us using the chat button in the bottom-right corner.