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

4752 ワード
gatsby React JavaScript JavaScript テキストリンク

はじめに

こんにちは。ホームセンターのカインズホームのネットストアで買って店舗で受け取れるんですが、店舗に在庫ある気づかず、頼んでました、無駄なトラフィックを発生させてしまいすみません (内部的には店舗の在庫を確保しただけなのかもしれませんが )

さて、今回はGatsbyで構造化マークアップを適用しようと思います。

記事の公開日時や更新日時などをGoogleさんに伝えていきたい次第です

前提

私はこちらのgatsby-starter-gcnを使用しています。

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

以下を参考に進めていきます。

1. プラグインをインストールする

既にインストール済みの方は不要です
インストール有無は後続のコマンドで確認できます 

$ npm install react-helmet gatsby-plugin-react-helmet

インストール有無の確認

$ npm ls --depth=0 | grep "react-helmet"

├── [email protected]
├── [email protected]

2. gatsby-config.js編集

./gatsby-config.js
module.exports = {
  plugins: [
    'gatsby-plugin-react-helmet'
  ]
}

3. 作成する構造化マークアップのサンプルを作成する

構造化データ マークアップ支援ツールを使用し、作成する構造化マークアップのサンプルを作成します。

4. 構造化マークアップをねじ込む

/src/components/SEO.jsを編集します。

./src/components/SEO.js
+ import Helmet from 'react-helmet'
+ import React from 'react'

  const SEO = ({ title, description, image, slug = null, publishDateISO = null, updatedAtISO = null }) => {

  ...
  ...
  ...

+   const jsonLd = {
+     "@context" : "http://schema.org",
+     "@type" : "Article",
+     "name" : title,
+     "author" : {
+       "@type" : "Person",
+       "name" : "akitkat"
+     },
+     "datePublished" : publishDateISO,
+     "dateModified": updatedAtISO,
+     "image" : image,
+   }

    return (
      <Helmet

  ...
  ...
  ...
+       {<script type="application/ld+json">{JSON.stringify(jsonLd)}</script>}
      </Helmet>
    )
  }

  export default SEO

5. ビルドするだけ

ビルドします

おわりに

構造化データ マークアップ支援ツールがすごく便利でした！
レビューとか質問とかいろいろ使えるなと思い、今度試してみたいと思います