metaタグに情報を追加する

App.vueで設定する

参考にしたのはGridsomeでイチからブログを作る - metaタグやOGPを最適化するのサイトです。

方法としては、main.jsに記述する方法もありますが、App.vueに記載したほうが便利っぽい（？）のでApp.vueに記述する方法でやってみます。

脱線しますが、Populating headに外部のCSSやJSの読み込み方記載されてた…ほほぅ

App.vueファイルを作る

新しく「App.vue」を/scr/直下に作ります。
思考錯誤の末にこうなりました。

<template>
  <router-view />
</template>

<static-query>
query {
  metadata {
    siteName
    siteDescription
    pageUrl
    pageTitle
    siteOgImage
    siteOgType
  }
}
</static-query>

<script>
export default {
  metaInfo() {
    return {
      meta: [
        {
          key: 'description',
          name: 'description',
          content: this.$static.metadata.siteDescription
          },
        {
          key: 'og:site_name',
          property: 'og:site_name',
          content: this.$static.metadata.siteName,
        },
        {
          key: 'og:url',
          property: 'og:url',
          content: this.$static.metadata.pageUrl,
        },
        {
          key: 'og:title',
          property: 'og:title',
          content: this.$static.metadata.pageTitle,
        },
        {
          key: 'og:description',
          property: 'og:description',
          content: this.$static.metadata.siteDescription,
        },
        {
          key: 'og:image',
          property: 'og:image',
          content: this.$static.metadata.siteOgImage,
        },
        {
          key: 'og:type',
          property: 'og:type',
          content: this.$static.metadata.siteOgType,
        },
        {
          name: 'twitter:card',
          content: 'summary',
        },
      ]
    }
  }
}
</script>

「viewport」や「charset」の指定はすでに表示されていましたので、それ以外を追加しました。
「description」とOGタグ回りですね。

ページによって変更されるものは「key」を指定します。と記載があったので、変更しそうなものは「Key」の指定を入れました。

デフォルトの設定をgridsome.config.jsで指定します

module.exports = {
  siteName: 'Gridsomeでいこう！',
  metadata: {
    siteName: 'Gridsomeでいこう！',
    siteUrl: 'https://quirky-noyce-a7e03d.netlify.app/',
    siteDescription: 'かなり思い付きで立ち上げましたが、時代はJamstackへ…という流れも感じつつ。軽いノリで「Gridsome」やってみっか！というスタンスで始めています。',
    pageUrl: 'index.html',
    pageTitle: 'Gridsomeでいこう！',
    siteOgImage: 'https://quirky-noyce-a7e03d.netlify.app/og.png',
    siteOgType: 'article',
  },
  plugins: [
   ---以下省略

で、OGImageの画像ってどこに入れるわけ？

勝手に「assets」かな～と思って入れてたんですが、サッパリ表示されません！！
私の画像どこーーー！！

画像は…「/static/」ディレクトリに入れます。
「/static/」内に入ってたmdにキッチリ書いてたわ。。。

Add static files here. Files in this directory will be copied directly to dist folder during build. For example, /static/robots.txt will be located at https://yoursite.com/robots.txt.

This file should be deleted.

そんなわけで言われた通り、画像場所は「/gridsome-site-starter/static/og.png」に入れ。
上記のmdファイルは削除すべきって書いてるので削除。
https://quirky-noyce-a7e03d.netlify.app/og.png
↑
無事画像を確認できました～！

各ページの設定は各テンプレートに記載

デフォルトの指定はしたので、各ページごとに上書きしたいものだけ、各テンプレートに記載していきます。

↓トップぺージの場合は、typeだけ変更したかったので、こんな感じ。
「index.vue」のテンプレートタグの下に入れる。

<script>
export default {
  metaInfo() {
    return {
      meta: [
        {
          key: 'og:type',
          property: 'og:type',
          content: 'website',
        },
      ]
    }
  }
}
</script>

↓私についての場合は、もうちょっとイロイロ上書きしています、こんな感じ。
「about.vue」のテンプレートタグの下に入れる。
メタ情報を上書きする前に「static-query」で「gridsome.config.js」で指定した「siteName」と「pageUrl」を呼び出しています。
呼び出さないと「ないぞー」って怒られます…

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

<script>
export default {
  metaInfo() {
    return {
      meta: [
        {
          key: 'description',
          name: 'description',
          content: 'このサイト「Gridsomeでいこう！」を制作している私についてのページです。',
          },
        {
          key: 'og:url',
          property: 'og:url',
          content: this.$static.metadata.pageUrl+'/about/',
        },
        {
          key: 'og:title',
          property: 'og:title',
          content: 'わたしについて'+ ' | ' + this.$static.metadata.siteName,
        },
        {
          key: 'og:description',
          property: 'og:description',
          content: 'このサイト「Gridsomeでいこう！」を制作している私についてのページです。',
        },
      ]
    }
  }
}
</script>

記事ページのテンプレートはどうなる？

/step/以下にあるmdファイルで更新している記事のテンプレートは「/src/templates/StepPost.vue」です。

こっちは、「page-query」で呼び出している情報を使うことによって各ページのメタ情報を各ページごとに変えます。
「page-query」に「path」を追加しました。

<page-query>
  query StepPost($id: ID!) {
    stepPost(id: $id) {
      title
      path
      tag
      createdAt (format: "YYYY年M月D日")
      updatedAt (format: "YYYY年M月D日")
      content
    }
  }
</page-query>

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

<script>
export default {
  metaInfo() {
    return {
      meta: [
        {
          key: 'description',
          name: 'description',
          content: this.$page.stepPost.title+'の記事ページです。軽いノリで「Gridsome」やってみっか！というスタンスで始めています。',
          },
        {
          key: 'og:url',
          property: 'og:url',
          content: this.$static.metadata.pageUrl+this.$page.stepPost.path,
        },
        {
          key: 'og:title',
          property: 'og:title',
          content: this.$page.stepPost.title + ' | ' + this.$static.metadata.siteName,
        },
        {
          key: 'og:description',
          property: 'og:description',
          content: this.$page.stepPost.title+'の記事ページです。軽いノリで「Gridsome」やってみっか！というスタンスで始めています。',
        },
      ]
    }
  }
}
</script>

各ページごとにメタ情報を変更することができましたーーー

下記サイトで表示が確認できればOK

• Card validator
• Facebookのシェアデバッガー