2018-04-16

react-helmetでJSON-LDを埋め込む

概要

セマンティック・ウェブの一つに、構造化データというものがあります。構造化データを記載することで、データの「意味」を、クローラー等に分かりやすく伝えることができます。

場合によってはSEO対策にもなります。例えば、Googleで検索した時に下記のような「リッチスニペット」と呼ばれるものが出てくることがありますが、これはJSON-LDの構造化データを使用しています。

方法

構造化データにもいくつか種類がありますが、今回はJSON-LDに対応してみました。

手法としては、React Helmetで動的にこれらのデータを埋め込んでみました。 React Helmetは、Headタグ内のデータを動的に生成してくれる便利なReactコンポーネントです。

今回は各ページにHelmetを設置し、それぞれ適切な情報を出力しています。（まったく動的になっていないので、改善の余地があります）

index.jsx

<Helmet
  script={[
    {
      type: 'application/ld+json',
      innerHTML:(JSON.stringify({
        '@context': 'http://schema.org',
        '@type' : 'Corporation',
        'name': 'Yuuniworks',
        'url' : 'http://www.yuuniworks.com/',
        'logo' : 'https://www.yuuniworks.com/images/logo_for_schema.png',
        'address': {
          'postalCode': '697-0000',
            'addressCountry': 'JP',
            'addressRegion': '島根県',
            'addressLocality': '松江市',
            'streetAddress': '殿町1番地',
        },
        "contactPoint": [
          { "@type": "ContactPoint",
            "telephone": '+81-90-1234-5678',
            "contactType": "sales",
          },
        ],
        'founder': {
          '@type': 'Person',
          'givenName': '太郎',
          'familyName': '山田',
        },
        'foundingDate': '2018-4-11',
        "description": "島根県浜田市を拠点に、主にフロントエンド開発のお手伝いをしているフリーランスエンジニアです。",
        "sameAs": [
          'https://www.facebook.com/yuuniworks/',
        ],
      })),
    },
  ]}
/>

出力結果(headタグ内)

<script type="application/ld+json" data-react-helmet="true">
  {
    "@context": "http://schema.org",
    "@type": "BlogPosting",
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": "http://www.yuuniworks.com/blog/2018-04-09-JAMStackなWebサイトの作成/"
    },
    "headline": "JAM StackなWebサイトの作成",
    "image": [
      "https://www.yuuniworks.com/blogImages/20180409.png"
    ],
    "datePublished": "2018-04-09T15:00:00+09:00",
    "dateModified": "2018-04-16T17:00:00+09:00",
    "author": {
      "@type": "Person",
      "name": "Shota Tamura"
    },
    "publisher": {
      "@type": "Organization",
      "name": "Yuuniworks",
      "logo": {
        "@type": "ImageObject",
        "url": "https://www.yuuniworks.com/images/logo_for_schema.png"
      }
    },
    "description": "JS+API+Markupで構成されるサーバレスな枠組みで、自社のWebサイトを構築してみました。"
  }
</script>

Yuuniworks Blog

react-helmetでJSON-LDを埋め込む

概要

方法

index.jsx

出力結果(headタグ内)

参考