Get Started with Nuxt with Debbie O'Brien

Nuxt SEO

Our application is looking great but we need people to be able to find our site no matter what planet they are on. We can do this by adding Search Engine Optimization. Sounds complicated. But don't worry Nuxt uses vue-meta so we can easily add meta tags such as title and description to our application.

If we look in our Nuxt config you will see we already have a head tag with a title and some Meta which includes the charset, the viewport, a description with some empty content and a link to the favicon which can be found in the static folder.

show static folder

If we go to or browser and inspect the head tag, you'll see we get the title of nuxt mission and and a content description which is empty. Let's add a description. For example. A mission to explore the Jamstack using Nuxt.

content: 'A mission to explore the Jamstack using Nuxt.'

The nuxt.config is at the very top level and the next level down after that is the layout then the page component. So we can add our meta data to our nuxt.config and it will be available across any page or we can add to our layout which will be available across all the pages that use that layout.

Let's copy our title and meta from our nuxt.config file into our layout and let's change the title so it doesn't have a hyphen

copy meta into layout
change title to Nuxt Mission

And if we check in our browser you will see our new title can be seen in the head tag.

inspect head tag

However we are now going to get the same title and description across all our pages. We can improve this further by adding meta to our page components. As the slug page is using the API to get its title dynamically we can also use the title from our API in the head property. But in order to work with dynamic data we need to use the head as a function and not an object. By using a function we have access to this and can then get our data using this.planet.title.

head() {
  return {
    title: this.planet.title,
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: this.planet.description,
      },
    ],
  }
},

As the API also gives us a description we can use it in our meta description.

Did you notice the hid: description?

What's that? the hid is the unique identifier. When working with Vue it is called VMID, in Nuxt it is called HID. This ensures we don't have duplicate meta content in our page such as the description from our layout component and our page component. We only want to have one unique description and the HID ensures that.

Let's look at our page in the browser and if we go to mars we have our title of mars and our description and if we go to another planet we get that title and description. Cool.

show in browser

Although our title isn't that great. It would be best to also add something like Jamstack Explorers to all of our titles on all of our pages. We can do that using templates. Templates allow us to add what is in the template followed by what our title is. The %s will get replaced by our title. We can add this to our nuxt.config so it is available on all our pages or to our layouts so it is available only to specific layouts. In that way we can have different title templates for different layouts.

titleTemplate: 'Jamstack Explorers | %s',

Now in our browser you will see we have our Jamstack Explorers followed by our planet and on the home page we have Jamstack Explorers followed by our Nuxt Mission title. Nice.

show in browser

We can improve our SEO even further by adding a lang attribute to tell our search engines what language the content is in. We do this using htmlAttrs. htmlAttrs will add attributes to our html tag. Lets add en for English.

htmlAttrs: {
  lang: 'en',
},

And if we inspect our html tag you will see when now have lang set to 'en'.

inspect in browser

Another thing we can add is the canonical url. This addresses SEO problems with duplicate content which can happen when a website is accessible with or without the www prefix in it's URL.

The canonical url goes in the link tag of our website.

link: [
  {
    hid: 'canonical',
    rel: 'canonical',
    href: `https://jamstack-explorers-nuxt-mission`
  }
]

We now have a canonical url on every page but it's not correct. The canonical URL should be the correct URL for that page and not the URL for the home page. We can add the canonical link to our slug page and use route params to get the correct url.

{
  hid: 'canonical',
  rel: 'canonical',
  href: `https://jamstack-explorers-nuxt-mission/${this.$route.params.slug}`,
},

And now you will see we have the correct canonical url on each page. Perferct.

show in browser

As we have already explored the link tag lets see what else we can do with it. We can add fonts to our application using the link tag. Lets add a google font by setting the rel to stylesheet and the href to a url for the Nunito font from Google.

{
  rel: 'stylesheet',
  href: 'https://fonts.googleapis.com/css?family=Nunito&display=swap'
}

We can now use this font anywhere in our application using the font-family property with the font name from google followed by the generic family name which in this case is sans-serif . Let's add it to our planets page

<style scoped>
h1 {
  font-family: Nunito, sans-serif;
}
</style>

Now all our planets are using the Nunito font and our home page is using a different font. Nice

show in browser

We can also use the script tag to add JavaScript to our application. Normally we would to this by installing a module or using a plugin but there are times when that isn't possible such as if we needed to add something like JQuery to our site for example. We can do this by using the script tag and adding our url as the src.

script: [
  {
    src:
      'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js',
  }
],

Nice we have now added a js file to our head tag.

We are almost there and our marketing team is going to be so happy with us but there is still one thing left to do. If we want to share our application on social media then we should add twitter and open graph meta. I am going to paste the code directly in our nuxt.config and then we will walk through it.

These are the social meta tags we need to add so when we share our page what will be shown is the title and description that we add here as well as a social image. For this example I have already created a social preview image and added it into the static folder.

// Twitter
{
  hid: 'twitter:card',
  name: 'twitter:card',
  content: 'summary_large_image',
},
{ hid: 'twitter:site', name: 'twitter:site', content: '@nuxt_js' },
{
  hid: 'twitter:url',
  name: 'twitter:url',
  content: 'https://jamstack-explorers-nuxt-mission.com',
},
{
  hid: 'twitter:title',
  name: 'twitter:title',
  content: 'Nuxt Mission',
},
{
  hid: 'twitter:description',
  name: 'twitter:description',
  content: 'A mission to explore the Jamstack using Nuxt.',
},
{
  hid: 'twitter:image',
  name: 'twitter:image',
  content:
    'https://jamstack-explorers-nuxt-mission.com/social-preview.png',
},

// Open Graph
{
  hid: 'og:site_name',
  property: 'og:site_name',
  content: 'JamStack Explorers - Nuxt',
},
{ hid: 'og:type', property: 'og:type', content: 'website' },
{
  hid: 'og:url',
  property: 'og:url',
  content: 'https://jamstack-explorers-nuxt-mission.com',
},
{
  hid: 'og:title',
  property: 'og:title',
  content: 'Nuxt Mission',
},
{
  hid: 'og:description',
  property: 'og:description',
  content: 'A mission to explore the Jamstack using Nuxt.',
},
{
  hid: 'og:image',
  property: 'og:image',
  content:
    'https://jamstack-explorers-nuxt-mission.com/social-preview.png',
},
{
  hid: 'og:image:secure_url',
  property: 'og:image:secure_url',
  content:
    'https://jamstack-explorers-nuxt-mission.com/social-preview.png',
},
{
  hid: 'og:image:alt',
  property: 'og:image:alt',
  content: 'Nuxt Mission',
},

And that is all that is needed. We can see in our head tag we now have twitter and og tags. Our application is ready to be shared with the world.

show in browser

Explorers

your progress

610