Better SEO in Vue or Nuxt - part 1

Introduction

When sharing your content you want it to be found on Google. This can be done by Search Engine Optimization (SEO). In this blog I'm going to share 3 SEO basic must haves to improve your chances on a top page search result in Vue or Nuxt.

Difference approach Vue and Nuxt

If you're using Nuxt you're all set for this tutorial. When you only use Vue you have to install vue-meta and instead of head in the examples use metaInfo.

Title tag

We start with the HTML title tag. The title will display in your tab and will be rendered as the famous blue line in the Google search results.

When creating titles make sure they are descriptive and concise.

Nuxt allows you to create a head() method to set the HTML head tags for the current page.

<script>
  export default {
    head() {
      return {
        title: 'This is a descriptive example of a title - brandname',
      }
    },
  }
</script>

This will be rendered as:

<title>This is a descriptive example of a title - brandname</title>

Meta description tag

A title doesn't say it all. You probably want to give some extra information to your potential audience. A meta description is perfect for giving a short summary what the page is about. This summary can be displayed under the blue link to your site in the search results.

Read the Google documentation how to write good meta descriptions.

With Nuxt you can add a meta array in your head() method. Inside there we add a description object. More will be added to this array in a later blog.

<script>
  export default {
    head() {
      return {
        meta: [
          {
            hid: 'description',
            name: 'description',
            content:
              'This is a short and unique summary of what my page is about. This can be used as a snippet by Google if the algoritm deems it relevant',
          },
        ],
      }
    },
  }
</script>

This will be rendered as:

<meta
  data-n-head="ssr"
  data-hid="description"
  name="description"
  content="This is a short and unique summary of what my page is about. This can be used as a snippet by Google if the algoritm deems it relevant"
/>

Canonical url

Whenever you have non-www pages (e.g. 'https://example.com' and 'https://www.example.com' ), or you share content across different platforms (e.g. you have the same blog on your website and a blogging platform) you can tell Google which of these sources is the original. this canonical page will then be crawled most regularly.

Read Google documentation about canonical urls.

In Vue and Nuxt it's very easy to indicate the primary url. Inside the head() method add a link array with a canonical object. Enter your url in the href.

<script>
  export default {
    head() {
      return {
        link: [
          {
            hid: 'canonical',
            rel: 'canonical',
            href: 'https://www.example.com',
          },
        ],
      }
    },
  }
</script>

This renders to:

<link
  data-n-head="ssr"
  data-hid="canonical"
  rel="canonical"
  href="https://www.example.com"
/>

Bringing it all together

Bringing the three steps together, you'll end up with this head() method.

<script>
  export default {
    head() {
      return {
        title: 'This is a descriptive example of a title - brandname',
        meta: [
          {
            hid: 'description',
            name: 'description',
            content:
              'This is a short and unique summary of what my page is about. This can be used as a snippet by Google if the algoritm deems it relevant',
          },
        ],
        link: [
          {
            hid: 'canonical',
            rel: 'canonical',
            href: 'https://www.example.com',
          },
        ],
      }
    },
  }
</script>

Simplifying with a 'createMeta' function

You can imagine that using the previous head method will be a lot of copying and pasting and takes a lot of rows in the file. In a follow up post we will even add more information.

That's why we're going to make it easier if we make a function. For the next example I'll be using TypeScript. You can easily remove the types and use it as a normal JS function.

Create a utils folder in your root and add a createMeta.ts file.

export const createMeta = ({
  title,
  description,
  url,
}: {
  title: string
  description: string
  url: string
}) => {
  const metaObj = {
    title,
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: description,
      },
    ],
    link: [
      {
        hid: 'canonical',
        rel: 'canonical',
        href: url,
      },
    ],
  }

  return metaObj
}

This function will simply ask for a title, description and a url. This will then output the exact object as the object inside the head method in the Bringing it all together step.

<script>
  import { createMeta } from '~/utils/createMeta'

  export default {
    head() {
      return createMeta({
        title: 'This is a descriptive example of a title - brandname',
        description:
          'This is a short and unique summary of what my page is about. This can be used as a snippet by Google if the algoritm deems it relevant',
        url: 'https://www.example.com',
      })
    },
  }
</script>

This is a lot more reusable, easier to read and has the added boon that forgetting one of the arguments will give you a TypeScript warning.

Conclusion

We made our first steps towards better Google search results. We created a title tag to display in our tabs and in the search results, a description tag to describe what our page is about and a canonical url to tell Google what the original page is. Finally we placed the logic in it's own function. This was part 1 of a 2 part SEO series. We're going to continue to expand the createMeta function in the next part of this SEO tutorial. See you there.

Better SEO in Vue or Nuxt - part 1 Better SEO in Vue or Nuxt - part 2