Server Side Rendered Open Graph Meta Tags in Vue JS

Facebook and Twitter use META tags in HTML markup to form cards in their respective platforms. Bare minimum code to generate an output similar to the image above would look something like this:

<meta property="og:title" content="Workplace By..." />
<meta property="og:description" content="Bring Your..." />
<meta property="og:image" content="http://image-link.jpg" />

Its easy in static infrastructure but if you have a dynamic URL strategy like “http://my-app/news/:id”, then you have to process info in the server itself. Nuxt.js provides an easy way for achieving this. Follow the steps to run a Hacker News skeletal demo

mkdir my-app && cd my-app

Create package.json file

Install Nuxt and Axios. Nuxt is basically Vue + SSR and makes development comfortable

npm install --save nuxt axios

Create these additional files

~/app.html

~/plugins/client.js

~/store/index.js

~/pages/index.vue — The entry point or the home page

~/pages/_id.vue — The news page (which will have the meta tags)

If all this seems confusing, feel free to clone the Github repository : https://github.com/ramansah/nuxtjs_starter

Run the development server & navigate to localhost:3000

npm run dev

Click on a particular story

Press Ctrl+U to see page source

The server sends two meta tags pre-rendered. Image source (og:image) can be added if desired.

Twitter also follows a similar strategy in creating cards in Twitter feed. It depends on these tags:

<meta property="twitter:title" content="..." />
<meta property="twitter:description" content="..." />
<meta property="twitter:image" content="..." />

Hope this guide helps you in incorporating the sharing feature in Facebook or Twitter.