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

Ewa Gasperowicz
X

ウェブ コンポーネントと、Polymer などのサポート ライブラリの人気が高まるにつれ、カスタム要素は UI 機能を構築する魅力的な方法になっています。カスタム要素のデフォルトのカプセル化は、独立したウィジェットの作成に特に役立ちます。

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

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

同じデータ スニペットを再利用してさまざまなウィジェットに入力し、検索エンジンやその他のユーザーにページのコンテンツを通知することで、重複を回避し、データの整合性を確保できれば便利です。これは、schema.org 標準とデータの JSON-LD 形式を使用すると実現できます。

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

通常、JSON は特定のウィジェットにデータを挿入するのに便利な方法です。JSON-LD のサポートが拡大するにつれて、同じデータ構造を再利用して、UI だけでなく、検索エンジンやその他の構造化データのコンシューマにも、ページの内容の正確な意味を伝えられるようになりました。

ウェブ コンポーネントと JSON-LD を組み合わせることで、アプリケーションの明確なアーキテクチャを作成できます。

  • schema.org と JSON-LD はデータレイヤを表します。schema.org はデータのボキャブラリを提供し、JSON-LD はデータの形式と転送を構成します。
  • カスタム要素は表示レイヤを表し、データ自体から分離して構成できます。

例

次の例（Google オフィスのいくつかの場所を一覧表示するページ）について考えてみましょう。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 の強力な兄弟である JSON-LD

ご存じのとおり、これは、単純な JSON を使用してデータを渡す場合と非常によく似ています。ただし、JSON-LD には、schema.org との互換性から直接派生するいくつかの利点があります。

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

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

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

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

作成したカスタム要素を @polymer で紹介してください。