SEO optimization for Nuxt.js - The complete guide!

Is Nuxt.js good for SEO optimization?

Every business that has a website should know how important it is to optimize it for SEO. When you think "SEO" the first things that come to mind are keywords, external and internal links, content creation.

‍

However, technical measures such as website optimization are also very important. One of Nuxt's biggest selling points is that you can use search engine optimization (SEO) to assist your application and raise your rank on Google. Learn how to do this in this article. We present the complete guide!

‍

What is Nuxt.js?

Nuxt is an open-source Vue.js framework. Its goal is to help developers to take advantage of top-notch technologies. The main features of Nuxt.js are:

‍

- Server-Side Rendering (SSR)

- Static site generation

‍

Of course, there are much more of them, but in today's article, I would like to focus on those two which are most important from an SEO and optimization point of view.

‍

Server-side rendering is the ability to generate a web page on a Node.js server and send a fully rendered page to the client, while static site generation renders the whole application during the building phase. This means that no server is needed to deploy your application.

‍

Both solutions improve performance and allow you to optimize the SEO of your web page. Needless to say how important it’s nowadays to be easily spotted by Google Bots. I would like to show you how effortlessly you can configure your Nuxt.js application to achieve high healthy scores. I was able to reach 96/100 according to ahrefs.com for the Qarbon IT web page.

‍

The most important steps in optimization:

1. Meta tags:

Nuxt.js gives a few options to add meta tags. Metadata is not displayed on the page. It’s used by browsers, search engines, and other web services.

‍

- Default meta tags for all pages

‍

Nuxt lets us add default meta tags for all pages. To do that we can use the head property inside nuxt.js.config

‍

‍

- Setting meta tags for each page individually.

‍

Nuxt.js also allows you to set meta tags for each page individually. To do that we have to use the head function inside the component. In Qarbon IT meta tags depends on the currently selected language. We are using the i18n library to maintain translation. I am going to mention it a little bit later concerning SEO optimization.

‍

- Setting up meta tags for dynamic pages

‍

When our pages have dynamic content usually meta tags also depend on that content. In Nuxt.js we can handle that easily because inside component we’ve access to all this.

‍

‍

2. Generating a sitemap for your web-page:

It’s essential for Google Bots if your site has implemented a sitemap.xml file in the main folder. This file should be accessible for Google Bots via yoursite.com/sitemap.xml URL. In nuxt.js we can benefit from nuxt/sitemap which is responsible for automatically generating sitemap.xml.

‍

Configuration is really easy, below is a Qarbon IT website configuration as an example. This configuration is a little bit more complicated than in a simple website because we have many dynamically generated pages and those routes have to be included in our sitemap.xml file.

‍

‍

3. Generating robots.txt file:

There is a library that generates robots.txt file - robots-module. This library automatically generates robots.txt while we are building our web page. Configuration should be implemented in nuxt.config.js. No more than that. For more sophisticated configuration please refer to the documentation.

‍

4. i18n configuration:

There should be a separate post about this configuration but I decided to go through some main points here. Before you will dive into this matter in more detail I strongly recommend reading the documentation here.

‍

- Turn off automatic language detection

‍

I faced an issue because the default language of the Qarbon IT website is Polish and Google while crawling it was redirected to the English language. It was confusing for Google Bots and we have lost a few positions in Google Search Console. This is why I recommended turning off that opinion. Below you can find our configuration of i18n.

‍

- Add additional metadata and links to head.

‍

A special function offered by the i18n-module is called $nuxt18nHead. This function returns metadata which we can easily add to the HTML Head element.

‍

< link > - defines the relationship between the current web page and external resources

< meta > - explained above

‍

This is a sample code from the Qarbon IT website. In our case, I’ve decided to add this function to nuxt layout to avoid duplicating the code.

‍

And done! This is what SEO optimization looks like in Nuxt.

‍

Hope you found the material helpful. Thanks to these few simple steps, you will definitely increase the optimization of your website in terms of SEO. It is worth remembering if you want your company to position itself in search results and increase the traffic on the website - and so does the number of your potential customers!