構造化マークアップとは?
構造化マークアップとは、テキスト情報をマークアップしてクローラーが理解できるようにタグ付けしたものを指します。
構造化マークアップをきちんと実装すると、副次的効果として検索結果の表示が変化することがあります。
商品のレビューやパンくずリストを検索結果に表示することができ、ページの内容が検索ユーザーに伝わりやすくなるため、クリック率が上がります。
こういった、検索結果で表示される情報(スニペット)の情報を豊か(リッチ)にすることをリッチスニペットといいます。
今回はJSON-LDでschema.orgの構造化データをしてみます。
HTMLで構造化サンプルはこちら
WebSite
TOPページに書きます。
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "ウェブサイトURL",
"name": "ウェブサイト名",
"publisher": {
"@type": "Organization",
"name": "組織の名前",
"url": "組織のURL",
"logo": {
"@type": "ImageObject",
"url": "組織のロゴURL",
"width": 横幅,
"height": 縦
},
"address": {
"@type": "PostalAddress",
"postalCode": "組織の郵便番号",
"addressRegion": "組織の都道府県",
"addressLocality": "組織の市町村",
"streetAddress": "組織の住所その他"
}
},
"image": {
"@type": "ImageObject",
"url": "ウェブサイトのイメージ画像",
"width": 横幅,
"height": 縦
}
}
</script>
パンくず
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "親ページのURL",
"name": "親ページの名前"
}
}, {
"@type": "ListItem",
"position": 2,
"item": {
"@id": "2階層目のURL",
"name": "2階層目の名前"
}
}, {
"@type": "ListItem",
"position": 3,
"item": {
"@id": "3階層目のURL",
"name": "3階層目の名前"
}
}
]
}
</script>
Article、NewsArticle、BlogPosting
“@type”:”Article”の中身を適当に変更してください。
基本的にはニュースサイトはArticleもしくは、NewsArticleになります。ブログの場合はBlogPostingを使用します。
<script type="application/ld+json">
{
"@context":"http://schema.org",
"@type":"Article",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "記事のURL"
},
"headline":"記事タイトル",
"image":"記事のイメージ画像URL",
"datePublished":"記事公開日",
"dateModified":"記事更新日",
"author":{
"@type":"Person",
"name":"作者の名前"
},
"publisher":{
"@type":"Organization",
"name": "ウェブサイト名",
"url": "ウェブサイトURL",
"logo": {
"@type": "ImageObject",
"url": "ウェブサイトのイメージ画像URL",
"width": 横幅,
"height": 縦
}
},
"description":"記事の説明分"
}
</script>