Nuxt.js seo ready

Seo is a major pillar in web development and every production project have to be optimized for seo.

We'll need to install 1 package that will assist us on seo, Will make our site stand out while sharing the link on social networks, Her's a preview.

You can add: image, title, descreption and theme color.

Let's start with installing nuxt-social-meta

npm i nuxt-social-meta
or
yarn add nuxt-social-meta

Let's add meta tags on nuxt-config.js

head: {
    htmlAttrs: {
      // Add the default language of the website
      lang: 'en',
    },
    title: 'My website title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      // Add a descreption for the website
      {
        hid: 'description',
        name: 'description',
        content: 'Descreption...',
      },
    ],
    link: [
      // Add the author
      {
        name: 'author',
        content: 'John Doe',
      },
      // Keywords related to the website
      {
        name: 'keywords',
        content: 'the best website ever',
      },
      // Favicon
      { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
    ],
  },

Now let's add the module responsible for social networks url sharing.

modules: [
    [
      'nuxt-social-meta',
      {
        title: 'website-title',
        description: 'website-descreption',
        url: 'https://website.com',
        img: '/bg.png',
        locale: 'en',
        themeColor: '#000',
      },
    ],
],

If you want to add custom meta tags for a page then do the following

<script>
export default {
  head() {
    return {
      title: 'my website',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'a website descreption',
        },
      ],
    }
  },
}
</script>

You're nuxt app is seo ready !

Blog

Tajeddine Alaoui

Join Our Newsletter. No Spam, Only the good stuff.

Related