Social share cards for Vue and Nuxt

How to improve your content's word-of-mouth by providing good looking social cards

Introduction

Yes! People are able to find our content. They're so impressed they're sharing it. Writing their tweet and 'Eeehw...', the tweet looks awful. They were hoping they'd get a nice title, description and image when they copied your url. In this post we're going to fix this by adding social card information to a createMeta function.

The meta function

We start by creating a meta function to create a folder utils and the file createMeta.

utils/createMeta.ts

export const createMeta = () => {
  const metaObj = {}

  return metaObj
}

Twitter Card

First we're going to update this improve the Twitter Card. All we have to do is tell twitter about:

the type of Twitter Card
the title
our twitter handle (optional)
the description (optional)
an image url + alt (optional)

Inside our createMeta function we're adding these steps to our function. For the type we're using 'summary_large_image'. Read the documentation for more information on card types and the other options.

utils/createMeta.ts

export const createMeta = ({
  title,
  description,
  imageUrl,
  imageAlt
}: {
  title: string
  description: string
  imageUrl: string
  imageAlt: string
}) => {
  const metaObj = {
    meta: [
      // Required type of card
      { name: 'twitter:card', content: 'summary_large_image' },

      // Required title
      {
        hid: 'twitter:title',
        name: 'twitter:title',
        content: title,
      },

      // Optional Twitter handle
      { name: 'twitter:site', content: '@marten_west' },

      // Optional description
      {
        hid: 'twitter:description',
        name: 'twitter:description',
        content: description,
      },

      // Optional image
      {
        hid: 'twitter:image',
        name: 'twitter:image',
        content: imageUrl,
      },

      // Optional text describing the image
      {
        property: 'twitter:image:alt',
        content: imageAlt,
      },
    ],
  }

  return metaObj
}

We just added everything we need to help Twitter create a nice looking card linking to our content.

Open Graph

Lastly we can add the Open Graph protocol to our function. This helps the display of our content on platforms like Facebook. We're going to add:

the type of our object
the title
the canonical url
the image url + width + height + alt text
the description (optional)

For the type we'll choose website. For the image width and height I use the recommended sizes. Read the documentation to learn more about the Open Graph protocol.

utils/createMeta.ts

export const createMeta = ({
  title,
  description,
  imageUrl,
  imageAlt,
  url,
}: {
  title: string
  description: string
  imageUrl: string
  imageAlt: string
  url: string
}) => {
  const metaObj = {
    meta: [
      { name: 'twitter:card', content: 'summary_large_image' },
      {
        hid: 'twitter:title',
        name: 'twitter:title',
        content: title,
      },
      { name: 'twitter:site', content: '@marten_west' },
      {
        hid: 'twitter:description',
        name: 'twitter:description',
        content: description,
      },
      {
        hid: 'twitter:image',
        name: 'twitter:image',
        content: imageUrl,
      },
      {
        property: 'twitter:image:alt',
        content: imageAlt,
      },

      // Required type
      { hid: 'og:type', property: 'og:type', content: 'website' },

      // Required title
      {
        hid: 'og:title',
        property: 'og:title',
        content: title,
      },

      // Required canonical url
      {
        hid: 'og:url',
        property: 'og:url',
        content: url,
      },

      // Required image (you can add an image parameter if you want to change images per page or read part 3 how we generate an image per page)
      {
        hid: 'og:image',
        property: 'og:image',
        content: 'https://www.exampleofanimage.com',
      },

      // Optional image width
      { property: 'og:image:width', content: '1200' },

      // Optional image heigth
      { property: 'og:image:height', content: '627' },

      // Optional image alt text
      {
        property: 'og:image:alt',
        content: imageAlt,
      },

      // Optional description
      {
        hid: 'og:description',
        property: 'og:description',
        content: description,
      },
    ],
  }

  return metaObj
}

Now we can use the function in your Vue file to provide information for nice social cards. I'm using Nuxt's head method. If you're using Vue, replace head with metaInfo and add the vue-meta package.

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

  export default {
    head() {
      return createMeta({
        title: 'This is a descriptive example of a title',
        description:
          'This is a short and unique summary of what my page is about.',
        imageUrl: 'https://www.exampleofanimage.com',
        imageAlt: 'example of an image alt text',
        url: 'https://www.example.com',
      })
    },
  }
</script>

Conclusion

Yes. Now you're audience can share your content without being embarrassed by the rendered social card. It looks like a lot of information but that's why we created a createMeta function. We can use it on every page and only need to provide a title, description, image and an url.

Show me your social card by sharing your work with me on Twitter.

I suggest reading this blog from Jason Lengstorf about automatically generating social images to make your cards even more shareable.