SEO対策として重要な構造化マークアップ（リッチリザルト）を実装する方法と実例について。
##目次
- 構造化マークアップやリッチリザルトとは何か？
- 構造化マークアップの注意点
- 記述方法
- website（サイト内検索ボックスの表示）
- BreadcrumbList（パンくず）
- Article（記事）
- デバッグ（テストページリンク）
- schema.orgとは何か？
##構造化マークアップやリッチリザルトとは何か？ Googleでの検索結果をリッチ（強化）する機能。ページに適切なコードを追記することで対応できる。
▼こういうの
検索結果がリッチになるので、リッチリザルトと呼ばれる。
このリッチリザルトのためのマークアップを構造化マークアップと呼ぶ。
##構造化マークアップの注意点 記述にミスがあると、scriptタグ内の情報がムシされる。
ページの種類により実装できる構造化のタイプが変わってくる。
Googleにガイドラインがあり反することをするとペナルティがかけられるリスクがある。（SEO目的のキーワードの埋め込みとか）
ちゃんとガイドラインに沿って実装すれば問題ない。
Googleサーチコンソールで実装状況やエラー状況の確認ができる。
##記述方法
コードの記述方法はJSON-LDやRDFa, microdataなど複数存在する。
可読性やメンテ性を考慮するとJSON-LDがおすすめ。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "構造化の種類",
構造化の詳細
}
}
</script>
###構造化マークアップの例
##website（サイト内検索ボックスの表示）
検索結果に検索ボックスが出るかどうかはGoogle次第。
▼WEBサイトのみ
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Website",
"name": "サイトの名前",
"url": "サイトのURL",
"potentialAction": {
"@type": "SearchAction",
"target": "検索ページのURL?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
**▼androidアプリ** 以下を追記する。
,{
"@type": "SearchAction",
"target": "android-app://com.example/https/query.example.com/search/?q={search_term_string}",
"query-input": "required name=search_term_string"
}
検索ボックスの構造化マークアップをしない場合は不要。
"@type": "Website"でpotentialActionを記述しない場合は、googleは構造化マークアップとは見なさないため。
なお、この構造化を組んでいないページでも検索結果に検索ボックスが表示されることが多々ある。（企業トップページで多い）
##BreadcrumbList（パンくず） パンくずが以下の場合の例、
・パンくず１ > パンくず２ > パンくず3
<script type="application/ld+json">
{
"@type": "BreadcrumbList",
"@context": "https://schema.org",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "パンくず名１",
"item": "ページのURL"
},
{
"@type": "ListItem",
"position": 2,
"name": "パンくず名２",
"item": "ページのURL"
},
{
"@type": "ListItem",
"position": 3,
"name": "パンくず名３"
}
]
}
</script>
パンくずの数に合わせて増やしたり減らしたりする。最終ページはURLを付けない。
##Article（記事） 記事ページにつける。
<script type="application/ld+json">
{
"@type": "Article",
"@context": "http://schema.org",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "ページのURL"
},
"headline": "記事タイトル",
"image": "キービジュアル画像（配列にして複数記述してもいい）",
"datePublished": "投稿日 YYYY-MM-DD HH:MM:SS",
"dateModified": "更新日 YYYY-MM-DD HH:MM:SS",
"author": {
"@type": "Person",
"name": "執筆者名"
},
"publisher": {
"@type": "Organization",
"name": "組織名",
"logo": {
"@type": "ImageObject",
"url": "組織ロゴのURL"
}
}
}
</script>
##複数設置する例 **配列を用意しの中に、`,`で区切って記述**していく。
例えば、記事ページに以下の３つ（Website + BreadcrumbList + Article）のjson-ldを実装する場合。
<script type="application/ld+json">
[
{
"@context": "https://schema.org",
"@type": "Website",
"name": "サイトの名前",
"url": "サイトのURL",
"potentialAction": {
"@type": "SearchAction",
"target": "検索ページのURL?q={search_term_string}",
"query-input": "required name=search_term_string"
}
},
{
"@type": "BreadcrumbList",
"@context": "https://schema.org",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "パンくず名１",
"item": "ページのURL"
},
{
"@type": "ListItem",
"position": 2,
"name": "パンくず名２",
"item": "ページのURL"
},
{
"@type": "ListItem",
"position": 3,
"name": "パンくず名３",
}
]
},
{
"@type": "Article",
"@context": "http://schema.org",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "ページのURL"
},
"headline": "記事タイトル",
"image": "キービジュアル画像（配列にして複数記述してもいい）",
"datePublished": "投稿日 YYYY-MM-DD HH:MM:SS",
"dateModified": "更新日 YYYY-MM-DD HH:MM:SS",
"author": {
"@type": "Person",
"name": "執筆者名"
},
"publisher": {
"@type": "Organization",
"name": "組織名",
"logo": {
"@type": "ImageObject",
"url": "組織ロゴのURL"
}
}
}
]
</script>
##デバッグ（テストページリンク）
完成したら、テストページで正しく読み込めれるか確認。
サイトのURLがhttp(s)://になっていないので警告が出ている。
URLを正規のもの（または https://example.com ）などにすればエラーは消える。
##schema.orgとは何か？ 構造化マークアップの仕様は https://schema.org で定義されている。
用意されているプロパティはかなりたくさんあり、かつ、プロパティの中に入れ子でプロパティを記述できたりと結構複雑。。
また、Googleがどこまでサポートして読み込んでくれるのかが曖昧名ため、基本的にはGoogleのガイドラインに準拠していれば、schema.orgは参照しなくても問題ない。
▼Articleの例
省略