Better SEO in Vue or Nuxt - part 2

How to add structured data to your site to get rich search results

This is part 2 part SEO series. If you haven't read part 1, I recommend you read that first and come back here.

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

Introduction

Ever searched for a recipe and a lot of images popped up with user reviews? This are rich results. this is Google's way of trying to provide a better user experience. And it's working. The rich results get a larger click through rate. To support rich results you can provide structured data to Google. In this second part of our SEO blog we're going to add this structured data to our result of the createMeta function from part 1.

Where we left off

In part 1 of the tutorial we created a createMeta function to add a title- and description tag and inform what the original url is with a canonical url.

utils/createMeta.ts

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
}

And we used this in our head methods on our Vue page.

<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>

Structured data

The recommended way to provide structured data is in JSON-LD. This is a JavaScript notation embedded in a script tag. Structured data can be very different. Maybe you want to provide data for a recipe, an article or an event. Because they're so different you'd probably want to use them on a per use-case basis. So I won't recommend adding it to our function. Create a file named createJsonLdArticle.ts in your utils folder.

We're going to change our head method a little to return an object from our createMeta function and then add the structured data to it.

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

  export default {
    head() {
      const metaObj = 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',
      })

      return metaObj
    },
  }
</script>

Now we add our structured data.

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

  export default {
    head() {
      // We're going to reuse this title
      const title = 'This is a descriptive example of a title - brandname'

      const metaObj = createMeta({
        title,
        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',
      })

      const jsonLd = {
        '@context': 'https://schema.org',
        // NewsArticle tells Google this is an article
        '@type': 'NewsArticle',
        headline: title,
        image: ['https://www.exampleofanimage.com'],
        datePublished: '2021-01-12',
        dateModified: '2021-01-12',
      }

      const newMetaObj = Object.assign(
        {
          script: [
            {
              type: 'application/ld+json',
              json: jsonId,
            },
          ],
        },
        metaObj
      )

      return newMetaObj

      return metaObj
    },
  }
</script>

We declared the '@type': 'NewsArticle', to tell Google this is an article. See Google's datatypes for more options.

We then added the script key to the metaObj having an array value with the jsonLd object. Now you'll find a script tag rendered in your page head with the structured data. You can check if it works with the Rich Result Test.

Conclusion

Now Google will be able to understand our page better and who knows your article will be displayed as a rich result. Let me know if it worked for you and share your rich result with me.

If you liked this you might also like to provide data to your head method for social platforms to create nice looking nice share cards:

Social share cards for Vue and Nuxt