Web Components と JSON-LD を使用したセマンティック サイトの作成

Ewa Gasperowicz

ウェブ コンポーネントPolymer などのサポート ライブラリの普及に伴い、カスタム要素は UI 機能を構築するための魅力的な方法となっています。カスタム要素はデフォルトでカプセル化されるため、独立したウィジェットを作成する場合に特に便利です。

一部のウィジェットは自己完結型ですが、その多くは、天気ウィジェットの現在の天気予報や地図ウィジェットの会社の住所など、ユーザーにコンテンツを表示するために外部データに依存しています。

Polymer では、カスタム要素は宣言型です。そのため、一度プロジェクトにインポートすると、非常に簡単に HTML で要素を含めて構成できます。たとえば、属性を使用してウィジェットにデータを渡すことができます。

同じデータ スニペットを再利用してさまざまなウィジェットに入力したり、検索エンジンや他の消費者にページのコンテンツについて知らせたりすることで、繰り返しを避け、データの整合性を確保できれば素晴らしいです。そのためには、データに schema.org 標準と JSON-LD 形式を使用します。

コンポーネントに構造化データを入力する

通常、JSON は特定のウィジェットにデータを挿入する便利な方法です。JSON-LD のサポートが拡大しているため、同じデータ構造を再利用して、UI だけでなく、検索エンジンや他の利用者に構造化データのユーザーにページ コンテンツの正確な意味を伝えることができます。

ウェブ コンポーネントと JSON-LD を組み合わせることで、アプリケーションの明確に定義されたアーキテクチャを構築できます。

  • schema.org と JSON-LD はデータレイヤを表し、schema.org はデータの語彙を提供し、JSON-LD はデータの形式とトランスポートを構成します。
  • カスタム要素はプレゼンテーション レイヤを表します。この要素は設定可能で、データ自体から分離されています。

次の例について考えてみましょう。このページには Google Office の場所が複数あります。https://github.com/googlearchive/structured-data-web-components/tree/master/demo

2 つのウィジェットがあります。各オフィスのピンが表示された地図と、場所のリストを含むプルダウンです。両方のウィジェットが同じデータをユーザーに表示することと、検索エンジンがページを読み取れるようにすることが重要です。

ウェブ コンポーネントと JSON-LD デモページ

このデモでは、データの意味を表現するために LocalBusiness エンティティを使用しています。データの意味は、一部の Google オフィスの地理的位置です。

Google によるこのページの読み取りとインデックス登録の状態を確認するには、改善された新しい構造化データ テストツールをご利用ください。[URL を取得] セクションでデモの URL を送信し、[取得して検証] をクリックします。右側のセクションには、ページから取得した解析済みデータと、発生する可能性のあるエラーが表示されます。これは、JSON-LD マークアップが正しく、Google で処理可能かどうかを確認する非常に便利な方法です。

構造化データ テストツールの UI。

このツールの詳細と改善点については、ウェブマスター セントラルのブログ投稿をご覧ください。

コンポーネントを構造化データソースにリンクする

デモとビルドに使用したウェブ コンポーネントのコードは GitHub にあります。combined-demo.html ページのソースコードを見てみましょう。

最初のステップとして、JSON-LD スクリプトを使用してページにデータを埋め込みます。

<script type="application/ld+json">
{...}
</script>

これにより、schema.org 標準と JSON-LD 形式をサポートする他の利用者(検索エンジンなど)がデータに簡単にアクセスできるようになります。

第 2 段階として、次の 2 つのウェブ コンポーネントを使用してデータを表示します。

  • address-dropdown-jsonld - この要素では、「jsonld」属性で渡されるすべての場所を含むプルダウンが作成されます。
  • google-map-jsonld - この要素では、「jsonld」属性で渡されるすべての場所のピンが配置された Google マップが作成されます。

そのためには、HTML インポートを使用して画像をページにインポートします。

<link rel="import" href="bower_components/google-map-jsonld/google-map-jsonld.html">
<link rel="import" href="bower_components/address-dropdown-jsonld/address-dropdown-jsonld.html">

インポートが完了したら、ページで使用できます。

<address-dropdown-jsonld jsonld=""></address-dropdown-jsonld>
<google-map-jsonld jsonld=""></google-map-jsonld>

最後に、JSON-LD データと要素をフックします。そのためには、ポリマー対応コールバック(コンポーネントを使用する準備ができたときにトリガーされるイベント)を使用します。要素は属性で構成できるため、コンポーネントの適切な属性に JSON-LD データを割り当てるだけで十分です。

document.addEventListener('polymer-ready', function() {
    var jsonld = JSON.parse(
        document.querySelector(
            'script[type="application/ld+json"]').innerText);
    document.querySelector('google-map-jsonld').jsonld = jsonld['@graph'];
    document.querySelector('address-dropdown-jsonld').jsonld = jsonld['@graph'];
    });

JSON-LD: JSON の強力な兄弟

お気づきだと思いますが、これは古い JSON を使用してデータを渡すのとよく似ています。ただし、JSON-LD には schema.org との互換性から直接派生したいくつかの利点があります。

  • データは、schema.org 標準を使用して明確な方法で構造化されています。JSON-LD 対応のウェブ コンポーネントに有意義で一貫した入力を提供できるため、これは重要な利点です。
  • データは検索エンジンで効率的に消費されるため、ページのインデックス登録が改善され、検索結果にリッチ スニペットが表示される可能性があります。
  • この方法でウェブ コンポーネントを記述する場合、コンポーネントが想定するデータについて新しい構造(およびドキュメント)を学んだり、考案したりする必要はありません。schema.org が、手間のかかる作業やコンセンサスの構築をすべて行ってくれます。また、互換性のあるコンポーネントのエコシステム全体を簡単に構築できます。

まとめると、JSON-LD と schema.org をウェブ コンポーネント テクノロジーと組み合わせることで、デベロッパーにとっても検索エンジンにとっても使いやすい、再利用可能なカプセル化された UI を構築できます。

独自のコンポーネントを作成する

GitHub の例を試すか、再利用可能なコンポーネントの作成に関する Polymer のガイドをお読みになり、独自の作成を開始してください。 JSON-LD でマークアップできるさまざまなエンティティのヒントについては、developers.google.com の構造化データに関するドキュメントをご覧ください。

作成したカスタム要素を紹介するために、@polymer までご連絡ください。