Simple SEO setup for a Nuxt App
Tags: nuxt, vue, seo, javascript
Published: 2022-03-23 19:20:00

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](https://vue-astro.netlify.app/)

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

```javascript
 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](https://ogp.me/) 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.

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

**og:title**

This will be the title of the object.

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

**og:description**

Allows you to add a description to the object.

```javascript
  {
    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.

```javascript
  {
    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 :)

```javascript
  {
    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.

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

We should now have a file looking like this: 

```javascript
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](https://developers.facebook.com/tools/debug/).

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qga33bf9y2ct1zrpqrqc.png)


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**

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

or **twitter:site**

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

You can also add atl text to twitter card

```javascript
  {
    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](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started)!

They also have a resource to check how your twitter card will look like called [Card Validator](https://cards-dev.twitter.com/validator).

As well as [Linkedin's Post Inspector](https://www.linkedin.com/post-inspector/) or your can have an all in one approach at [metatags.io](https://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](https://thenextbit.de/en/blog/nuxtjs-seo)

[How to Setup your Social Card by Josh Deltener](https://masteringnuxt.com/blog/setting-up-nuxt-for-social-cards-and-meta-tags-to-improve-seo)

[How to define OG alt text and why it might not matter by Stefan Judis](https://www.stefanjudis.com/today-i-learned/how-to-define-open-graph-twitter-image-alt-text-and-why-it-might-not-matter/)

[Open Graph Meta Tags by Michal Pecanek](https://ahrefs.com/blog/open-graph-meta-tags/)

**Check out** the [Vue Astro Repo](https://github.com/raulsposito/vue-astro/) for further reference.