How to add Twitter and Facebook cards to your vue app

#vue

Adding Twitter/Facebook cards is a great way to improve the experience for when people share your site, and adding it to your vue site only takes a few minutes.

What are Twitter Cards?

Have you noticed how some links expand nicely when viewed in Twitter or Facebook? That functionality is provided by Twitter cards, see an example below:

Tweet with rich content

Displaying Twitter/Facebook cards on your site

Twitter and Facebook cards are just special meta tags that you have to include on your site. When someone then shares your page, Twitter will see those tags and use it to nicely format the post.

Twitter

The list of twitter tags can be seen here, below I've included the most used ones.

<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="https://loftie.com">
<meta name="twitter:title" content="Vue Social Cards Example">
<meta name="twitter:description" content="Vue sample site showing off Twitter and Facebook Cards.">
<meta name="twitter:image" content="http://dev.to/social_previews/user/139093.png">

Facebook

Facebook uses the opengraph protocol, you can see the most used tags below.

<meta property="og:type" content="website">
<meta property="og:title" content="Vue Social Cards Example">
<meta property="og:description" content="Vue sample site showing off Twitter and Facebook Cards.">
<meta property="og:image" content="http://dev.to/social_previews/user/139093.png">

Usage in vue

To see how we can setup this in vue, lets first create a basic vue site using the Vue CLI with all the default settings.

vue create vue-sample

For a detailed example of how to create a vue site and deploy it to Netlify, please check out https://loftie.com/post/deploying-vue-with-netlify-from-scratch

I have deployed the basic version of the site here: https://v1--vue-social-cards-sample.netlify.com/, lets see what happens if we share that to Twitter:

Not very exciting

To enable cards in vue we need some way to update the meta tags. The most popular way is to use the vue-meta package.

npm install vue-meta

Then load it in your main.js file

import Vue from 'vue';
...
import Meta from 'vue-meta';
Vue.use(Meta);
...

To actually include the relevant meta tags we have to add them to the metaInfo. Also note that the image path must be an absolute path, not relative.

In this example I'm using the logo.png as the image, and since vue pre-processes all the assets we have to get the path it ends up using require('./assets/logo.png')

let ROOT_PATH = 'https://your-site-here.com'
export default {
  data() {
    return {
      logo: ROOT_PATH + require('./assets/logo.png')
    }
  },
  metaInfo() {
    return {
      meta: [
          // Twitter Card
          {name: 'twitter:card', content: 'summary'},
          {name: 'twitter:title', content: 'Vue Social Cards Example'},
          {name: 'twitter:description', content: 'Vue sample site showing off Twitter and Facebook Cards.'},
          // image must be an absolute path
          {name: 'twitter:image', content: this.logo},
          // Facebook OpenGraph
          {property: 'og:title', content: 'Vue Social Cards Example'},
          {property: 'og:site_name', content: 'Vue Example'},
          {property: 'og:type', content: 'website'},
          {property: 'og:image', content:  this.logo},
          {property: 'og:description', content: 'Vue sample site showing off Twitter and Facebook Cards.'}
      ]
    }
  }
}

Last steps, prerendering

Currently the meta tags are added using javascript, which is a bit of a problem since the Twitter bot doesn't execute javascript. Luckily the fix is as simple as clicking a single checkbox if you are using Netlify.

If you are not using Netlify then you will have to look into other means to prerender, such as prerender.io

In your Netlify account, go to* Site settings -> Build & Deploy -> Prerendering*