9.1 マイクロフォーマットとは？
マイクロフォーマット (structured data) は、HTMLドキュメントにメタデータを追加して、ウェブページのコンテンツを検索エンジンや他のサービスによってより良く解釈させる方法だよ。マイクロフォーマットは様々なエンティティやその関係をウェブページ上で説明するために使われていて、検索結果でのページの可視性を向上させたり、リッチスニペットみたいな追加機能を提供したりするんだ。
マイクロフォーマット はHTMLページのコードに追加される構造化データだよ。これにより、検索エンジンはページのコンテンツについての追加情報、例えばコンテンツの種類、著者、公開日、評価、その他のデータを取得できるんだ。
マイクロフォーマットは2つの部分からできてるよ: 語彙（どんな用語でエンティティを説明するか）と、構文（その用語を実際にHTMLへどう書くか）だね。これは別のレベルの話だから、混同しないようにしよう。
語彙にあたるのがSchema.org。タイプ（Article、Product、Event、Organizationなど）とそのプロパティの共通セットだよ。Schema.orgはGoogle、Microsoft、Yahoo、Yandexによって設立されて、オープンなコミュニティで開発されていて、主要な検索エンジンはどれも理解してくれるんだ。
構文は書き方のこと。同じSchema.orgの語彙を、3つの違うやり方で書けるんだ:
- JSON-LD: データは
<script type="application/ld+json">の中に独立したブロックとして置かれて、マークアップと混ざらないよ。W3C標準で、Googleが推奨してるのはこれ。 - Microdata:
itemscope、itemtype、itempropといった属性をHTML要素に直接書くやり方。HTML Living Standardで定義されてるよ。 - RDFa（RDFa Lite 1.1）:
vocab、typeof、property属性を、これもHTML要素に直接書くやり方。W3C勧告だよ。
Schema.org以外にも、用途ごとの語彙があるよ。たとえばOpen Graph（SNSでのリンクのプレビュー）やmicroformats2だね。この講義ではSchema.orgを使っていくよ。
9.2 Schema.org
Schema.org はウェブページ上のデータを構造化するために開発されたデータタイプとそのプロパティの辞書だよ。記事、イベント、組織、製品など、たくさんのデータタイプをサポートしているんだ。
Schema.orgの利用例
記事 (Article):
<article>
<h1>記事のタイトル</h1>
<p>著者: 著者名</p>
<p>公開日: 2024年1月1日</p>
<img src="https://example.com/image.jpg" alt="画像の例">
<p>記事のテキスト...</p>
</article>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "記事のタイトル",
"author": {
"@type": "Person",
"name": "著者名"
},
"datePublished": "2024-01-01",
"image": "https://example.com/image.jpg",
"publisher": {
"@type": "Organization",
"name": "出版社",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.png"
}
}
}
</script>
商品 (Product):
<body>
<h1>商品の名前</h1>
<img src="https://example.com/product.jpg" alt="商品の画像">
<p>商品の説明</p>
<p>価格: $29.99</p>
</body>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "商品の名前",
"image": "https://example.com/product.jpg",
"description": "商品の説明",
"sku": "0446310786",
"offers": {
"@type": "Offer",
"priceCurrency": "USD",
"price": "29.99",
"itemCondition": "https://schema.org/NewCondition",
"availability": "https://schema.org/InStock",
"url": "https://example.com/product"
}
}
</script>
Schema.orgの利用の利点:
- 可視性の向上: 検索エンジンは検索結果に追加データ(リッチスニペット)を表示できる。
- 解釈の向上: 検索エンジンはコンテンツをより理解し、ページランクを向上させる可能性がある。
- 標準のサポート: Schema.orgは主要な検索エンジンすべてでサポートされている。
9.3 JSON-LD
JSON-LD (JavaScript Object Notation for Linked Data) はJSON形式でマイクロフォーマットをエンコードする方法で、ページの<script>タグに組み込まれるんだ。GoogleはJSON-LDを構造化データのために推奨しているよ。
JSON-LDの利用例
組織 (Organization):
<body>
<h1>会社名</h1>
<p>会社の説明</p>
<div>連絡先</div>
</body>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "会社名",
"url": "https://example.com",
"logo": "https://example.com/logo.png",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+1-800-555-1212",
"contactType": "カスタマーサービス"
}
}
</script>
9.4 Microdata
Microdata はHTMLに直接埋め込むマイクロフォーマットの構文だよ。itemscope、itemtype、itemprop（それにitemidとitemref）という専用の属性を普通のHTML要素に付けて、Schema.orgの語彙のタイプやプロパティと結びつけるんだ。
Microdataの利用例
イベント (Event):
<body itemscope itemtype="https://schema.org/Event">
<h1 itemprop="name">イベント名</h1>
<time itemprop="startDate" datetime="2024-05-01T19:00">2024年5月1日, 19:00</time>
<div itemprop="location" itemscope itemtype="https://schema.org/Place">
<span itemprop="name">開催地</span>
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<span itemprop="streetAddress">通り, 番地</span>
<span itemprop="addressLocality">市町村</span>
<span itemprop="postalCode">郵便番号</span>
<span itemprop="addressCountry">国</span>
</div>
</div>
</body>
マイクロフォーマットの利点:
- リッチスニペット: 検索エンジンは検索結果で拡張スニペットを表示できるので、クリック率が上がるよ。
- コンテンツの理解向上: 検索エンジンはコンテンツをより理解し、ページランクを向上させる可能性がある。
- 音声検索のサポート: 構造化データは音声検索結果を改善できるよ。
- 他のサービスとの統合: マイクロフォーマットは、Google Knowledge Graphや他のサービスとコンテンツを統合するのに役立つよ。
GO TO FULL VERSION