Q. Gridsomeでtitleやmetaの内容を動的に変更するには？

専用のフックが用意されています

Gridsomeには、HTMLヘッダーの中身を動的に変更するために「metaInfo」という専用のフックが用意されています。

<script>
export default {
  name: 'Blog',
  metaInfo: {
    title: this.$page.blog.title,
    meta: [
      {
        name: 'author',
        content: this.$page.blog.author.title
      }
    ],
    link: [
      {
        rel: 'stylesheet',
        href: '/css/index.css'
      }
    ]
    // etc...
  }
}
</script>

metaInfoの中身はただのハッシュなので、サンプルを見ながらやればすぐに理解できます。ちなみに、metaInfoという名前ですが、meta以外のHTMLヘッダも変更可能です。

Gridsomeのtemplateとpageでは、処理設定内で「this」でGridsomeのデータにアクセスが出来るので、GraphQLで取得してきたデータは全て利用可能です。

動的に変更されたmetaなどのHTMLヘッダの中身は、ビルド時にしっかりとHTMLに記述されるので、SEO的にも安心です。