9.1 マイクロフォーマットとは？
マイクロフォーマット (structured data) は、HTMLドキュメントにメタデータを追加して、ウェブページのコンテンツを検索エンジンや他のサービスによってより良く解釈させる方法だよ。マイクロフォーマットは様々なエンティティやその関係をウェブページ上で説明するために使われていて、検索結果でのページの可視性を向上させたり、リッチスニペットみたいな追加機能を提供したりするんだ。
マイクロフォーマット はHTMLページのコードに追加される構造化データだよ。これにより、検索エンジンはページのコンテンツについての追加情報、例えばコンテンツの種類、著者、公開日、評価、その他のデータを取得できるんだ。
主要なマイクロフォーマットの種類:
- Schema.org: 主な検索エンジン(Google, Bing, Yahoo, Yandex)がサポートする最も広く使われているマイクロフォーマットの標準
- JSON-LD: JSON形式でマイクロフォーマットをエンコードする形式で、Googleが推奨してるよ
- Microdata: HTMLコードに直接組み込まれるマイクロフォーマットの形式
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に組み込まれたマイクロフォーマットの形式だよ。microdataの属性はHTML要素に直接追加されて、Schema.orgの辞書のタイプやプロパティと結びつけられるんだ。
Microdataの利用例
イベント (Event):
<body itemscope itemtype="https://schema.org/Event">
<h1 itemprop="name">イベント名</h1>
<p itemprop="startDate" content="2024-05-01T19:00">2024年5月1日, 19:00</p>
<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