So, you spent a ton of time making THE perfect website. You have amazing images, inspiring content and even a great look and feel for your brand. Then at last, you get your first visitor! They love your article so much they share it on social media. There is just one problem.

THE SHARE LOOKS LIKE TOTAL TRASH.

And just like that, your chance for a flood of additional visitors abruptly comes to an end. Your share has to have an engaging image and enough content to make people want to click the link.

If you plan on making content you want shared, you have to take the additional steps to make your content shareable. Let's see how to do that with Nuxt.

Social Cards

When you paste a link into a social platform like Twitter or Facebook you usually see an image with text pop up. This is commonly referred to as a "Social Card". If you have all of the right markup on your page, it will look something like this:

Not bad eh? You want an image that commands attention, then content that is engaging and interesting so the user wants to click the link.

Let's find out how to make these sweet cards show up when your site is shared.

Open Graph

To get these cards to show up on social networks, your site has to have Open Graph HTML tags. Open Graph is a standard that was created by Facebook, and is supported in virtually all social sharing sites.

Here is how it works. You add some meta tags with specific properties and content, and when you share your site on a social network, their robots scape your site and use the values of these tags.

Let's start out with some basic tags. All of these will be inside your head function in Nuxt.

og:type

This tag describes the type of the object, in our case, a website.

export default {
  head(){
    return {
      meta:[
        { hid: 'og-type', property: 'og:type', content: 'website' },
      ]
    }
  },

og:title

As you might have guessed, this is the title of your shared item.

{ hid: 'og-title', property: 'og:title', content: 'My Title' },

og:description

This is the text that is shown in relation to your share card, normally shown under your main image.

{ hid: 'og-desc', property: 'og:description', content: 'This is a sweet post' },

og:image

This is the image of your card. Make sure it's something eye catching and meaningful.

{ hid: 'og-image', property: 'og:image',
  content: 'https://domain.com/my-image.jpg'
},

og:url

The url you want to send visitors to when they click on your social card. This is handy if the current page has some state information in the url and you want people to enter your site with a clean Url.

{ hid: 'og-url', property: 'og:url', content: 'https://domain.com/my-post' },

After you add these tags to your site you'll want to test them out. One way is using the Facebook Sharing Debugger. Just enter the url of your public site and Facebook will hit the page and give you a report on the share features it detected.

Open Graph covers a lot of different social networks, but there is 1 tweak you should add just for Twitter. You need to tell it to use the large image layout for showing your card. You can do that by adding a meta tag with twitter:card with the content of summary_large_image. Trust me, this will make a big difference!

{ hid: 't-type', name: 'twitter:card', content: 'summary_large_image' },

If you want more information on other options for Twitter, you can read their developer docs, but this combined with Open Graph does a great job.

Testing In Production

When you first setup your sharing tags and want to test in production, I would urge you to add test query strings after your url.

https://domain.com/my-post/?test=1

Some social platforms cache the social fetch result (even if you don't post it) so if you try to use the real url and it doesn't look right, it will be cached for a long time and you can't post your new article without it looking like trash.

By using a query string, you safeguard your live-testing and if that looks good, then you can use the real url and post to social media.

Get Social Already!

By following the steps above you can be sure when someone finally wants to share your awesome content, it will look great and be a true representation of your hard work and brand.