NUXT: How to add meta tags for SEO.

NUXT: How to add meta tags for SEO. cover

Introduction

The main advantage of a server-side rendered application with Nuxt is that you can enhance the way search engines crawl your content. It's very interesting if your website gets data.
In this article, we will see how to add basic SEO meta tags to your Nuxt application.

Why this article?

It's part of my blog category "Nuxt in here". This is a big tutorial compilation where the subject is nuxt and aoooio implementation.

What we will see:

  • 1 | Requirement
  • 2 | Basic SEO meta tags.
  • 3 | Implement SEO meta tags with Vue-meta.

1 Requirement

You will need a blank Nuxt application to follow this tutorial. I wrote an article explaining how to do this with Vue-cli: Aooo.io article

If you already have a Vue-cli environment setup, just start a new project:

vue init nuxt-community/starter-template aoooio_seo_nuxt

then click 'Enter' until the command line setup is finished. You can now enter into the directory to let the magic happen.

cd aoooio_seo_nuxt

2 Basic SEO meta tags.

You now have a standard Nuxt project structure in the folder aoooioseonuxt. Before to start any implementation we will look at the basic SEO meta tags we want to add to our web app.

2.1 Title meta

This basic meta contain the title of the content presented on a page.

<title> My beautifull title </title>

2.2 Description meta

This basic meta contain the description of the content presented on a page.

<meta name="description" content="This is an example of a description.">

2.3 Viewport meta

This basic meta does not directly serve to understand your content. It's used to help the browser to render properly your app on mobile.

<meta name=viewport content="width=device-width, initial-scale=1">

3 Implementing SEO meta tags with vue-meta.

The great thing with Nuxt is that you can directly use the Vue-meta package without adding yourself the dependancy. As its name suggests, this package is used to add all kinds of metas to your pages. If you want more pieces of information on this extension, you can check it's documentation following this link. Let's add some meta to our app.

3.1 Title meta

Open the main page file of your application: /page/index.js. Now you can edit the script tag. All we have to do is adding a head() method to manipulate the metas inside the eponym tag.

<script>  
  import AppLogo from '~/components/AppLogo.vue'  

  export default {  
    // You must add this head() method to add meta to the head of your document  
    head() {  
      return {  
        title: 'A great title for this page',   
      }  
    },  
    components: {  
      AppLogo  
    }  
  }  
</script>

Great, this the moment to check if your title is properly setted. Launch the dev server from the terminal:

npm run dev

You can now open your app at http://localhost:3000/

3.2 Description meta

In the same file we can edit the head() method to add a meta property.

<script>
import  AppLogo  from  '~/components/AppLogo.vue'

export  default {
    head() {
        return {
            title:  'A great title for this page',
            // The array of metas.
            meta: [
                // We set our description meta here
                {
                    hid:  'description',
                    name:  'description',
                    // This is the place of your description content.
                    content:  'This is the description of this page '
                }
            ]
        }
    },
    components: {
        AppLogo
    }
}
</script>

3.2 Viewport meta

The viewport meta is more generic. We want all the pages on our app to have the same viewport meta. To make this convenient Nuxt provides a way to configure Vue-meta globally from the config file. We have to open the nuxt.config.js file from the root of the project. And something magic happens:

/*

** Headers of the page

*/

head: {
    title:  'aoooio_seo_nuxt',
    meta: [
        { charset:  'utf-8' },
        { name:  'viewport', content:  'width=device-width, initial-scale=1' },
        { hid:  'description', name:  'description', content:  'Nuxt.js project' }
    ],
    link: [
        { rel:  'icon', type:  'image/x-icon', href:  '/favicon.ico' }
    ]
},

You see that the viewport was configured during the installation of Nuxt. I wanted to show you this to know where we can add a global meta configuration.

Conclusion:

We can now add all the metas we want to this app. I hope you enjoyed this tutorial. I'll soon write an article on the way to fetch async data with Nuxt.