当サイトはInternet Explorerに対応しておりません。より性能のよい、下記のようなブラウザを使ってみませんか?

IE in the grave
記事一覧に戻る

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>

参考

profile

田村 翔太

Yuuniworks 代表。島根県浜田市を拠点に主にフロントエンド開発のお手伝いをしているフリーランスエンジニアです。React/Vue.jsを用いたSPAの開発や、NodeJSを使ったAPI開発を得意としています。

記事一覧に戻る