It's all fun and games until someone tries to google our site and they just can't find it anywhere because we forgot to take care of SEO!

No matter how cool our site looks and all the features we added, it's no good if search engines can't find it. It won't look cool when shared in social networks if you don't handle the Social Card... so let's dive right in on how to make our site look good on social media.

Lucky for us! Our ancestors of code created a framework (Nuxt) that follows a few conventions and makes it super easy and fast for devs to take care of this feature. Let's say we start with our typical default nuxt app. In my case I will use as example an app I built for a past article Vue Astro

If you started the project using Nuxt, you should have a file nuxt.config.js where you can find the following:

 head: {
    title: 'vue-astro',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
],

So here is where we would add the meta tags to let the engines learn more about our site. In the case of Facebook for example, you would use the Open Graph protocol to inform the engine with the correspondent tags.

Let's add them!

As the docs specify: 'The Open Graph protocol enables any web page to become a rich object in a social graph.'

This means we will be dealing with an Object and their properties.

og:type

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

{ hid: 'og-type', property: 'og:type', content: 'website' },

og:title

This will be the title of the object.

{ hid: 'og-title', property: 'og:title', content: 'Vue Astro' },

og:description

Allows you to add a description to the object.

  {
    hid: 'og-desc',
    property: 'og:description',
    content: 'Get your horoscope for today!'
  },

og:image

If you want to attract clicks an image will help immensely.

  {
    hid: 'og-image',
    property: 'og:image',
    content: 'LINK TO YOUR IMAGE DIRECTORY'
  },

og:image:alt

You don't want to be the guy who forgets to put an alt text to the image :)

  {
    hid: 'og-image-alt',
    property: 'og:image:alt',
    content: 'An image of the great pyramids with a cosmic flashing background'
  },

og:url

Where you would direct visitors clicking your Social Card.

  {
    hid: 'og-url',
    property: 'og:url',
    content: 'https://vue-astro.netlify.app/'
  },

We should now have a file looking like this:

export default {
  ssr: false,
  head: {
    title: 'vue-astro',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Get your horoscope for today!' },
      { name: 'format-detection', content: 'telephone=no' },
      { hid: 'og-type', property: 'og:type', content: 'website' },
      { hid: 'og-title', property: 'og:title', content: 'Vue Astro' },
      { hid: 'og-desc', property: 'og:description', content: 'Get your horoscope for today!' },
      { hid: 'og-image', property: 'og:image', content: 'https://media4.giphy.com/media/' },
  {
    hid: 'og-image',
    property: 'og:image:alt',
    content: 'An image of the great pyramids with a cosmic flashing background'
  },
      { hid: 'og-url', property: 'og:url', content: 'https://vue-astro.netlify.app/' },
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
}...

Awesome! Now you can go check your Social Card here.

This will give you an idea of how your Social Card will look like when shared.

Now, Open Graph does not cover all social networks so we can also implement Twitters Card as well. Which is also super easy.

We use the twitter:card

  {
    hid: 'twitter:card',
    content: 'Vue Astro. Get your horoscope for today!'
  },

or twitter:site

  { 
    hid: 'twitter:site', 
    content: 'YOUR TWITTER HANDLE HERE' 
  },

You can also add atl text to twitter card

  {
    hid: 'twitter:image:alt',
    content: 'An image of the great pyramids with a cosmic flashing background'
  }

You can learn all about Twitter on their docs!

They also have a resource to check how your twitter card will look like called Card Validator.

As well as Linkedin's Post Inspector or your can have an all in one approach at metatags.io.

Great! So now we look good on Twitter, Facebook, WhatsApp... this is a great start for our site on social media and it wasn't all that hard.

Now it's time to go share that beautiful content you have been working on!

How to Setup Nuxt SEO by Özkan Yanikbas

How to Setup your Social Card by Josh Deltener

How to define OG alt text and why it might not matter by Stefan Judis

Open Graph Meta Tags by Michal Pecanek

Check out the Vue Astro Repo for further reference.