How to make a Nuxt.Js application SEO friendly
Tags: javascript, vue, nuxt, seo
Published: 2021-12-31 22:34:51

If you want to use Nuxt.js for your web application's quick and responsive UI, you need also to know how to use Nuxt.js to create an SEO-friendly application. In this article, we'll look at how we can improve the SEO performance of our Nuxtjs website.

##What is SEO
SEO (Search Engine Optimization) is the process of taking efforts to improve the ranking of a website or piece of content on Google.
The main distinction between SEO and sponsored content is that SEO involves "organic" ranking, which means you don't have to pay to be in that spot. To put it another way, search engine optimization is the process of improving a piece of online material so that it appears near the top of a search engine's page when someone searches for something.

##Nuxt.js and SEO
Nuxt, one of the most popular Vue frameworks for new web apps, can greatly improve your app performance and SEO. One of the most important Nuxt configurations is the mode, as it determines how your app is built, deployed, and served. There are three main types of web apps out there today:

1. Classic Single-Page App (SPA)
2. Universal/Isomorphic Web App (UWA)
3. Pre-Rendered Single-Page App

It is important to use the Universal mode for SEO and here is why:
In a classic SPA, the HTML served to the client is relatively empty, and JavaScript dynamically renders HTML once it gets to the client. Because of this, you may see a "white flicker" before the webpage is fully loaded.

![Classic SPA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xil6y2wwslh2xwukt9zi.jpg)
While in a UWA, JavaScript renders the initial HTML the same way SPAs do, but now the JavaScript runs on your Nuxt server before the content is sent back to the client. This way, the client receives the rendered HTML immediately, and will behave like a classic SPA afterwards. This is done so that search engine crawlers can interpret and index our website's pages. As a result, Universal mode is important for SEO.

![UWA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9q5zuafbw6n6usr5pn3k.jpg)

```vue
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>New App</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/js/app.js"></script>
  </body>
</html>
```
Now that our setup is complete, we should install some npm packages to improve our SEO by **adding a Dynamic Sitemap**.

A sitemap is a blueprint of your website that help search engines find, crawl and index all of your website’s content. Sitemaps also tell search engines which pages on your site are most important. We will include a sitemap in our app, but first we must install the nuxt module.
```
npm install @nuxtjs/sitemap
```

```
yarn add @nuxtjs/sitemap
```
We only need to add an entry to our nuxt.config.js file after installing the sitemap module.
```javascript
{
  modules: [
    '@nuxtjs/sitemap'
  ],
}
```

**Next we Add Google Analytics.**
Google Analytics is a web analytics service that provides statistics and basic analytical tools for search engine optimization (SEO) and marketing purposes.To use Google Analytics with Nuxtjs, simply install the following module.
```
npm install --save-dev @nuxtjs/google-analytics
```
```
yarn add --dev @nuxtjs/google-analytics
```
_If you are using Nuxt < v2.9, you have to install the module as dependency (without --dev or --save-dev)_

We also need to add an entry to our nuxt.config.js file after installing the Google Analytics module.
```javascript
{
  buildModules: [
    '@nuxtjs/google-analytics'
  ],
}
```
Now we must link this nuxt application to our Google Analytics account. To do so, we must include the Google Analytics ID in nuxt.config.js.
```javascript
export default {
  googleAnalytics: {
    id: 'UA-XXX-X'
  }
}
```
**Now we Add Meta Tags**
Nuxt lets you define all default <meta> tags for your application inside the nuxt.config.js file using the head property. This is very useful for adding a default title and description tag for SEO purposes or for setting the viewport or adding the favicon.
```javascript
export default {
  head: {
    title: 'my website title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: 'my website description'
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  }
}
```
_Note that this code above will give you the same title and description on every page_

Adding titles and meta for each page can be done by setting the `head` property inside your script tag on every page:
```javascript
<script>
export default {
  head: {
    title: 'Home page',
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: 'Home page description'
      }
    ],
  }
}
</script>
```
_Use `head` as an object to set a title and description only for the home page_
```vue
<template>
  <h1>{{ title }}</h1>
</template>
<script>
  export default {
    data() {
      return {
        title: 'Home page'
      }
    },
    head() {
      return {
        title: this.title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: 'Home page description'
          }
        ]
      }
    }
  }
</script>
```

## Conclusion
That's all there is to it; these steps will undoubtedly boost your SEO performance. However, keep in mind that this isn't all there is to SEO; there are many other factors to consider.

Thank you for Reading