Plugin request: Add some general SEO optimizations

Summary

Some meta tags are pretty typical nowadays for SEO optimization and could easily be auto-generated.

Basic example

export default {
  metaInfo: { title: "My super SEO optimized page" }
}

could automatically add meta tags for twitter:title, og:title, etc. Same for “description”.

Another example would be the canonical URL: <link rel="canonical" href="currentURL" /> which would be easy to generate using the current route.

Motivation

SEO optimization is important for many and at least useful for almost everyone else. It is also not hurting anyone to have it.

[DavidCouronne]

I think the best way is to create a global component, and adapt it as needed.

For exemple, you can create a component SEO.vue:

<static-query>
query {
  metadata {
    siteName
    siteUrl
  }
}
</static-query>

<script>
export default {
  metaInfo() {
    return {
      meta: [
        { name: "description", content: this.$page.post.description },

        // Some Open Graph Tags
        { property: "og:title", content: this.$page.post.title },
        { property: "og:description", content: this.$page.post.description },
        { property: "og:image", content: this.$page.post.cover_image },
        {
          property: "og:url",
          content: this.$static.metadata.siteUrl + this.$page.post.path
        },

        // Some Twitter Cards Tags
        { name: "twitter:card", content: "summary_large_image" },
        { name: "twitter:title", content: this.$page.post.title },
        { name: "twitter:image", content: this.$page.post.cover_image },
        { name: "twitter:description", content: this.$page.post.description }
      ],
      //Some ld+json tags
      script: [
        {
          type: "application/ld+json",
          json: {
            "@context": "http://schema.org",
            "@type": "BlogPosting",
            description: this.$page.post.description,
            datePublished: this.$page.post.date,
            author: {
              name: this.$page.post.author
            },
            headline: this.$page.post.title,
            image: this.$page.post.cover_image,
          }
        }
      ]
    };
  }
};
</script>

And then in Post.vue:

import SEO from '~/components/base/SEO.vue'

And place <SEO/> anywhere in the template.

Some testing tools:

• https://cards-dev.twitter.com/validator
• https://search.google.com/structured-data/testing-tool
• https://opengraphcheck.com/

[hacknug]

I recently had to set this up on one of my sites and this is what I came up with. It uses a similar approach to @DavidCouronne’s which I thought made sense for my case. Here we go:

gridsome.config.js

module.exports = {
  siteName: 'mario.tours',
  siteDescription: 'Mario Kart Tour companion site including daily ranking leaderboards, top tier items and much more!',
  siteUrl: process.env.DEPLOY_URL || 'https://www.mario.tours',
  metadata: {
    twitter: {
      site: '@hack_nug',
      creator: '@hack_nug',
    },
  },
}

~/main.js

import DefaultLayout from '~/layouts/Default.vue'

export default function (Vue, { router, head, isClient }) {
  Vue.component('Layout', DefaultLayout)
}

~/layouts/Default.vue

<template>
  <div />
</template>

<static-query>
  query {
    metadata {
      siteName
      siteDescription
      siteUrl
      twitter {
        site
        creator
      }
    }
  }
</static-query>

<script>
import SiteSEO from '~/components/mixins/SiteSEO'

export default {
  mixins: [SiteSEO],
}
</script>

~/components/mixins/SiteSEO.js

import config from '~/.temp/config.js'

export default {
  computed: {
    metaTitle () {
      const pageTitle = this.$parent && this.$parent.$metaInfo && this.$parent.$metaInfo.title

      return {
        content: pageTitle || this.$static.metadata.siteName,
        ...pageTitle ? { template: config.titleTemplate } : {},
      }
    },
    metaDescription () {
      return { content: this.$static.metadata.siteDescription }
    },
    metaImage () {
      return { content: `${this.$static.metadata.siteUrl}/img/banner.png` }
    },
    metaUrl () {
      const path = this.$route && this.$route.path
      return { content: `${this.$static.metadata.siteUrl}${path}` }
    },
    metaSite () {
      return { content: this.$static.metadata.twitter.site }
    },
    metaCreator () {
      return { content: this.$static.metadata.twitter.creator }
    },
  },
  metaInfo () {
    return {
      meta: [
        // { key: 'description', name: 'description', content: this.metaDescription },

        { key: 'og:type', property: 'og:type', content: 'website' },
        { key: 'og:title', property: 'og:title', ...this.metaTitle },
        { key: 'og:description', property: 'og:description', ...this.metaDescription },
        { key: 'og:image', property: 'og:image', ...this.metaImage },
        { key: 'og:url', property: 'og:url', ...this.metaUrl },
        // TODO: Add `article:modified_time` to let Google know when the page was last updated

        { key: 'twitter:card', name: 'twitter:card', content: 'summary_large_image' },
        { key: 'twitter:title', name: 'twitter:title', ...this.metaTitle },
        { key: 'twitter:description', name: 'twitter:description', ...this.metaDescription },
        { key: 'twitter:image', name: 'twitter:image', ...this.metaImage },
        { key: 'twitter:url', name: 'twitter:url', ...this.metaUrl },
        { key: 'twitter:site', name: 'twitter:site', ...this.metaSite },
        { key: 'twitter:creator', name: 'twitter:creator', ...this.metaCreator },
      ],
    }
  },
}

I also looked into using a custom App.vue but that wouldn’t force an update of the tags on page change. May be possible listening to events but I wasn’t sure if that was better or not.

It would be great if we could ~access metadata from inside main.js~ make titleTemplate available inside metadata to save us from importing ~/.temp/config.js which I’m not sure is the best way to handle this.

---

Other useful links:

• https://timdeschryver.dev/posts/gridsome-social-cards
• https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup
• http://debug.iframely.com