![構造化マークアップとは?書き方まで丁寧に解説!のアイキャッチ画像](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/078feab771804e82b179d2a4c5e02ef7/Group%20439.png?w=1200&fm=webp)
SEO
更新日: 2023/12/18
構造化マークアップとは?書き方まで丁寧に解説!
![character_balloon](/media/character/yellow_normal_left.png)
ブルーちゃんブルーちゃん!
どうしたのイエローちゃん?
![character_balloon](/media/character/blue_normal_right.png)
![character_balloon](/media/character/yellow_normal_left.png)
検索エンジンでクリック率を上げるためには、構造化マークアップが大事らしいんだけど、それが何のことなのかよくわからなくて…
それじゃあ今日は構造化マークアップについて、SEOへの影響や実装方法を交えながら説明していくよ
![character_balloon](/media/character/blue_normal_right.png)
構造化マークアップとは?
![構造化マークアップとは?書き方まで丁寧に解説!の画像_2枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/8e54c5e221d44dcfbc8a11c9c72f74e7/01.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
構造化マークアップとは、Googleにサイトの内容をわかりやすく伝える方法のことなんだ
![character_balloon](/media/character/blue_normal_left.png)
例えば、イエローちゃんが更新したブログに、以下のようなテキストがあったとしてみよう
インフルエンサーマーケティングの基本を徹底解説!
by イエロー
2022.10.01
![character_balloon](/media/character/blue_normal_left.png)
私たちがこれを読むと、「インフルエンサーマーケティングの基本を徹底解説!」というタイトルの、イエローっていう人が書いている、2022年10月1日に公開されたブログ記事なんだということがわかるよね
うん、「タイトル」や「著者」、「公開日時」とはっきり書かれていなくてもそう思うよね
![character_balloon](/media/character/yellow_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
だけど、Googleのロボットでは、人間と同じように前後の文脈などから内容を理解するのが難しいんだ
![character_balloon](/media/character/blue_normal_left.png)
そのため、Googleにわかりやすくそれぞれの情報を伝えるために、HTML内で下記のような記述方法を使うことがあるよ
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "インフルエンサーマーケティングの基本を徹底解説!",
"datePublished": "2022-10-01T08:00:00+08:00",
"author": [{
"@type": "Person",
"name": "イエロー"
}]
}
</script>
![character_balloon](/media/character/blue_normal_left.png)
こうやって、サイト内の情報を構造化して伝えるのが構造化マークアップなんだ
構造化マークアップのメリットを解説!
![character_balloon](/media/character/blue_normal_left.png)
構造化マークアップは、検索順位の向上に直接的な影響があるわけではないんだ
![character_balloon](/media/character/blue_normal_left.png)
ただ、構造化マークアップを行うと、検索画面でリッチリザルトを表示させたり、ナレッジパネルやローカルパックにWebサイトの情報を掲載されやすくしたりする効果があるよ
![character_balloon](/media/character/blue_normal_left.png)
これらの効果のおかげで、検索からサイトにアクセスするユーザーが増加することが期待できるから、間接的とはいえSEOに大きな影響があると考えられるんだ
![character_balloon](/media/character/blue_normal_left.png)
それぞれの効果について、もう少し詳しく説明していくね
メリット1.リッチリザルトの表示
![構造化マークアップとは?書き方まで丁寧に解説!の画像_6枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/5762ba26a3a040cfb572988b658753f9/02.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
サイトのURL・タイトル・説明文の他に、追加情報が掲載されている検索結果のことをリッチリザルトというよ
![character_balloon](/media/character/blue_normal_left.png)
商品の価格や口コミ評価、サムネイル画像、イベント日時やスケジュールなど、サイトの内容に合わせた様々な情報が表示されるんだ
![character_balloon](/media/character/blue_normal_left.png)
構造化データとしてこれらの情報をGoogleに正しく伝えることで、リッチリザルトを表示させるよう促すことができるよ
![character_balloon](/media/character/blue_normal_left.png)
リッチリザルトが表示されるとユーザーの目を引くし、情報がわかりやすく伝わるから、クリック率の向上が望めるよ
メリット2.ナレッジパネルやローカルパックへの情報掲載
![構造化マークアップとは?書き方まで丁寧に解説!の画像_8枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/97292910ae17475cac913f7b86c6dfda/03.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
Googleが蓄積しているデータベースから、ユーザーが知りたがっている店舗や企業の情報を検索結果にまとめて表示するボックスをナレッジパネルというよ
![character_balloon](/media/character/blue_normal_left.png)
それと、特定の地域に関わる検索キーワードに対して、検索結果にマップと共に表示される店舗や企業のリストを、ローカルパックというよ
![character_balloon](/media/character/blue_normal_left.png)
店舗や企業のWebサイトでの構造化マークアップは、ナレッジパネルに正しい情報を掲載したり、ローカルパックに店舗や企業を表示させたりするのに役立つよ
![character_balloon](/media/character/blue_normal_left.png)
ナレッジパネルやローカルパックは検索画面の上部に表示されるから、ユーザーへの訴求力は抜群だよ
構造化マークアップはどうやって実装するの?
![構造化マークアップとは?書き方まで丁寧に解説!の画像_10枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/4d689eac68d74f87a36fe19b59c17e70/04.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
構造化マークアップには、主に2つの実装方法があるよ
![character_balloon](/media/character/blue_normal_left.png)
一つ一つ解説していくね
構造化マークアップの実装方法1.HTML内に直接書き込む
![character_balloon](/media/character/blue_normal_left.png)
まず1つ目は、サイトのHTMLに直接マークアップする方法だよ
![character_balloon](/media/character/blue_normal_left.png)
HTMLにマークを行う際には、書き方の形式にいくつか種類があるんだけど、Googleは「JSON-LD」という形式を推奨しているんだ
リッチリザルトを表示できるようにするには、サポートされている 3 つの形式のいずれかを使用して、サイトのページをマークアップする必要があります。
* JSON-LD(推奨)
* microdata
* RDFa
引用元: 参照:構造化データに関する一般的なガイドライン
![character_balloon](/media/character/blue_normal_left.png)
また、構造化データの値をどのように表すかという規格は、schema.orgのボキャブラリが主に用いられているよ
![character_balloon](/media/character/blue_normal_left.png)
JSON-LDで構造化データを記述する際には、まず内容を下記のタグで囲むよ
<script type="application/ld+json">
</script>
![character_balloon](/media/character/blue_normal_left.png)
次に、schema.orgのボキャブラリーを使用するときは、先ほどのscriptタグの中に下記のように記載するよ
{
"@context": "https://schema.org"
}
![character_balloon](/media/character/blue_normal_left.png)
そして、それ以降はサイトに関する情報を「“情報の種類(タイプ)“: “内容プロパティ)”」という形でカンマで区切りながら記載していくんだ
![character_balloon](/media/character/blue_normal_left.png)
見出しを示す“headline”や公開日を示す”datePublished”など、様々な情報タイプがあって、Googleの検索ギャラリーから例を見ることができるから、実際に記述するときは参考にしながら進めてみよう
![character_balloon](/media/character/blue_normal_left.png)
ここまでの流れを踏まえて書かれたのが、さっきもイエローちゃんに例で見せた、この構造化データなんだ
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "インフルエンサーマーケティングの基本を徹底解説!",
"datePublished": "2022-10-01T08:00:00+08:00",
"author": [{
"@type": "Person",
"name": "イエロー"
}]
}
</script>
![character_balloon](/media/character/blue_normal_left.png)
これで手動でのマークアップは完了だよ
構造化マークアップの実装方法2.構造化データ マークアップ支援ツールを使用する
![character_balloon](/media/character/blue_normal_left.png)
技術的に手動でマークアップするのが難しい場合は、Googleが無料で提供している構造化データ マークアップ支援ツールを使うのもおすすめだよ
![character_balloon](/media/character/blue_normal_left.png)
マークアップしたいサイト上のテキストを画面上で直接選択して、その内容に合ったタグを選択することで、データを構造化してくれるんだ
![character_balloon](/media/character/blue_normal_left.png)
マークアップが完了したら、構造化データのコードを自動生成してくれるから、そのコードをサイトのHTML内にコピペすれば簡単に実装できるよ
![character_balloon](/media/character/blue_normal_left.png)
構造化マークアップについて、重要なポイントをまとめたよ
まとめ
◆構造化マークアップとは、Googleにサイトの内容をわかりやすく伝える方法のこと
◆リッチリザルトの表示やナレッジパネル・ローカルパックへの掲載を通して、クリック率向上の効果が期待できる
◆HTML上に直接書き込むほか、Googleが提供しているツールを使って実装することができる
構造化マークアップのことがよくわかったよ!ありがとうブルーちゃん!
![character_balloon](/media/character/yellow_normal_right.png)
![character_balloon](/media/character/blue_writer.png)
ブルー
SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。