How to add Twitter and Facebook cards to your vue app
Tags: vue
Published: 2019-09-07 13:05:07

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:

{% twitter 1016476808638656521 %}

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](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards), 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](https://ogp.me/), 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 [<u>Vue CLI</u>](https://cli.vuejs.org/) 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](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/](https://v1--vue-social-cards-sample.netlify.com/), lets see what happens if we share that to Twitter:

{% twitter 1170080375835676672 %}

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](https://vue-meta.nuxtjs.org/) 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](https://prerender.io/)

In your Netlify account, go to* Site settings -&gt; Build &amp; Deploy -&gt; Prerendering*

<img src="https://res.cloudinary.com/ximg/image/upload/w_732,h_500,c_limit/f_auto/whoami/4a595384/post/tCG9Uvcv1bbmXvnc.png"><figcaption>Prerendering allows Twitter and Facebook to see the meta tags</figcaption>

Lets see how it looks now

<img src="https://res.cloudinary.com/ximg/image/upload/w_732,h_500,c_limit/f_auto/whoami/8e65b3bb/post/zpdInhkpIMl1C3Z4.png"><figcaption>Much nicer</figcaption>

The code for this example is available at [https://github.com/lpellis/vue-social-cards-sample](https://github.com/lpellis/vue-social-cards-sample).

<small>Originally published at <a href="https://loftie.com/post/how-to-add-twitter-and-facebook-cards-to-your-vue-app">https://loftie.com/post/how-to-add-twitter-and-facebook-cards-to-your-vue-app</a></small>