Gridsomeで構造化マークアップに対応する

SEO対応の一環としてGoogleの構造化データ対応を行った。

このブログはGridsomeを使って構築しているのでGridsomeでの対応方法をまとめておく。

metaInfoにJSON-LD用のscript設定を追加する。

Google DevelopersのArticle オブジェクトで必須と推奨になっていたデータの対応を行った。

// templates/ContentfulBlogPost.vue

export default {
  metaInfo() {
    return {
      script: [
        {
          innerHTML: this.jsonLd,
          type: "application/ld+json"
        }
      ]
    };
  },
  computed: {
    jsonLd() {
      const jsonLd = {
        "@context": "http://schema.org",
        "@type": "Article",
        name: this.$page.post.title,
        headline: this.$page.post.title, // 必須
        datePublished: this.$page.post.publishDate, // 必須
        dateModified: this.$page.post.publishDate, // 推奨
        url: this.current_url,
        mainEntityOfPage: this.current_url, // 推奨
        image: [this.image_url], // 必須
        description: this.$page.post.description, // 推奨
        author: { // 必須
          "@type": "Person",
          name: "hello world"
        },
        publisher: { // 必須
          "@type": "Organization",
          name: process.env.GRIDSOME_SITE_NAME,
          logo: {
            "@type": "ImageObject",
            url: `${process.env.GRIDSOME_SITE_URL}/images/ogp.png`
          }
        }
      };
      return JSON.stringify(jsonLd);
    }
  }
}

対応後、構造化データ テストツールにURLを入力してエラーが出ていないことを確認して完了。

参考

• How to add Schema Markup? · Issue #352 · gridsome/gridsome