構造化データとは?正しくマークアップして流入アップを狙おう!のアイキャッチ画像

SEO

更新日: 2024/11/22

構造化データとは?正しくマークアップして流入アップを狙おう!

character_balloon

ブルーちゃん教えてー

イエローちゃん今日は何が知りたいの?

character_balloon
character_balloon

構造化データがよくわからないんだ

あー構造化データの話だね

character_balloon

じゃあ今日は構造化データについて説明するねぇ

character_balloon

構造化データとは?

構造化データとは?正しくマークアップして流入アップを狙おう!の画像_2枚目
character_balloon

構造化データとは、WebサイトのHTMLに専用のコードをマークアップしてWebページの内容を検索エンジンに伝える手法だよ

character_balloon

あらかじめプロパティのキーやバリューが決まっていて、用途に合わせながらマークアップしていくんだよ

character_balloon

構造化データの形式には3種類あるけど、Googleは中でも「JSON-LD」を推奨しているんだ

character_balloon

構造化データはガイドラインに準拠することが非常に重要なんだよ

構造化データの2つの方法をご紹介!

character_balloon

HTMLを構造化データとしてマークアップするには2つ方法があるよ

character_balloon

それぞれ紹介していくね

マークアップの方法1.Microdata

character_balloon

1つ目に紹介する構造化データをマークアップする方法は、Microdataだよ

character_balloon

Microdataは、HTMLに直接、構造化データをマークアップする手法なんだよね

character_balloon

実際の書き方を、このサイトを事例にして紹介すると、

構造化データとは?正しくマークアップして流入アップを狙おう!の画像_7枚目
character_balloon

上記のようなパンくずリストがあるとするでしょ?

character_balloon

これをHTMLで書くと、

パンくずリストのHTML

<ol>

<li><a href="https://msta.co.jp/">ホーム</a></li>

<li><a href="https://msta.co.jp/media/">記事一覧</a></li>

<li><a href="https://msta.co.jp/media/e-a-t/">E-A-Tとは?4つの改善方法もご紹介!</a></li>

</oi>

character_balloon

こんな感じになっているんだけど、

character_balloon

Microdata方式で、直接このコードに構造化データを盛り込むと、

パンくずリストのHTML: microdataでマークアップした場合

<ol itemscope itemtype="http://schema.org/BreadcrumbList">

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">

<a href="https://msta.co.jp/" itemprop="item">

<span itemprop="name">ホーム</span>

</a>

<meta itemprop="position" content="1" />

</li>

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">

<a href="https://msta.co.jp/media/" itemprop="item">

<span itemprop="name">記事一覧</span>

</a>

<meta itemprop="position" content="2" />

</li>

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">

<a href="https://msta.co.jp/media/e-a-t/" itemprop="item">

<span itemprop="name">E-A-Tとは?4つの改善方法もご紹介!</span>

</a>

<meta itemprop="position" content="3" />

</li>

</ol>

character_balloon

こんな感じになるんだよ

character_balloon

itempropの中にitemListElementがあって、itemtypeの中にURLが入ってることで、構造化データとしてGoogleが認識してくれるようになるんだよ!

マークアップの方法2.JSON-LD方式

character_balloon

2つ目の構造化データのマークアップ方法は、JSON-LD方式だね

character_balloon

JSON-LD方式は、HTMLのhead内に構造化データをマークアップする方法だよ

character_balloon

例えば、このサイトで言うと、

構造化データとは?正しくマークアップして流入アップを狙おう!の画像_10枚目
character_balloon

上画像のようなパンくずリストがあるとして、

character_balloon

これをJSON-LD方式で構造化データをマークアップしてあげると、、、

パンくずリストのHTML: JSON-LDでマークアップした場合

<script type="application/ld+json">

{

"@context": "https://schema.org",

"@type": "BreadcrumbList",

"itemListElement": [

{

"@type": "ListItem",

"position": 1,

"item": {

"@id": "https://msta.co.jp/",

"name": "ホーム"

}

},

{

"@type": "ListItem",

"position": 2,

"item": {

"@id": "https://msta.co.jp/media/",

"name": "記事一覧"

}

},

{

"@type": "ListItem",

"position": 3,

"item": {

"@id": "https://msta.co.jp/media/e-a-t/",

"name": "E-A-Tとは?4つの改善方法もご紹介!"

}

}

]

}

character_balloon

っていうコードを、HTMLに入れればマークアップ完了だよ

character_balloon

itemListElementの中に、パンくずリストの数だけListItemを入れるんだよねー

character_balloon

JSON-LD方式の方が、Microdataよりも見やすいから、一般的になってるね!

構造化データのメリットは?

character_balloon

なんのためにわざわざHTMLをマークアップして構造化データにするんだと思う?

character_balloon

HTMLを構造化データにするメリットを解説するね

メリット1.検索エンジンにWebサイトの内容を理解してもらいやすくなる

構造化データとは?正しくマークアップして流入アップを狙おう!の画像_14枚目
character_balloon

Webサイトが正しくマークアップされて構造化データになっていると、検索エンジンにどんなWebサイトか理解してもらいやすくなるんだ

character_balloon

WebサイトにはブログやLPやECサイトなど用途や目的に合わせていろいろな種類があるよね

character_balloon

そのWebサイトがどんな種類のサイトなのか検索エンジンに理解されることは、ターゲットユーザーの検索流入を増やすためにもとても重要なんだよ

メリット2.検索結果にリッチリザルトが表示される

構造化データとは?正しくマークアップして流入アップを狙おう!の画像_16枚目
character_balloon

決められた属性でマークアップしておくと、検索結果にリッチリザルトが表示される確率が高くなるよ

character_balloon

パンくずとか価格とかレビューとか、Webサイトにはさまざまな要素があるよね

character_balloon

この部分にはこんな内容が書いてありますよーと検索エンジンに伝えることで、検索結果に採用されやすくなるんだ

character_balloon

結果的にユーザーにとってもわかりやすくて、より魅力的なWebサイトにはなっていくんだよ!

構造化データのマークアップにデメリットはあるの?

character_balloon

構造化データにはデメリットもあるんだよね

character_balloon

どんなデメリットか説明するね

デメリット1.専門知識がないと難しい

構造化データとは?正しくマークアップして流入アップを狙おう!の画像_20枚目
character_balloon

HTMLを正しくマークアップして構造化データにするには専門知識が必要だよ

character_balloon

多くは「JSON-LD」という形式で記述するけど、「microdata」「RDFa」っていう種類もあってそれぞれ記述方法が微妙に違うんだ

character_balloon

マークアップしていくキーとバリューもどんどん増えていくから、常に最新情報をチェックしておかないといけないんだよね

デメリット2.実現にコストがかかる

構造化データとは?正しくマークアップして流入アップを狙おう!の画像_22枚目
character_balloon

構造化データに対応するには、工数と時間がかかるんだよね

character_balloon

さっきも挙げたけど実装自体が特殊で難しいから調べる必要があるし、HTMLが正しくマークアップできているか確認したりだとか、時間がかかっちゃうんだ

character_balloon

しかも、エラーがあると構造化データとして意味をなさないだけじゃなく、スパムと認識されることもあるんだよね...

character_balloon

エラーを解消して正しい状態に持っていくのは大変な作業なんだけど、慣れてくればスピードもあがって効率よくマークアップできるようになるよ!

まとめ

character_balloon

最後に構造化データについてまとめておくね

まとめ

◆構造化データとはHTMLをマークアップして検索エンジンにどんなWebサイトか伝える手法


◆「JSON-LD」という記述形式が主に採用される


◆構造化データとして正しくマークアップできていると検索流入アップが見込める


◆専門知識が必要でコストがかかる

なるほどー構造化データについてよくわかったよ

character_balloon

ありがとうブルーちゃん!

character_balloon
character_balloon

わかってもらえてよかったよー

最新の記事一覧
最新の記事一覧