構造化マークアップとは?書き方まで丁寧に解説!のアイキャッチ画像

SEO

更新日: 2023/12/18

構造化マークアップとは?書き方まで丁寧に解説!

character_balloon

ブルーちゃんブルーちゃん!

どうしたのイエローちゃん?

character_balloon
character_balloon

検索エンジンでクリック率を上げるためには、構造化マークアップが大事らしいんだけど、それが何のことなのかよくわからなくて…

それじゃあ今日は構造化マークアップについて、SEOへの影響や実装方法を交えながら説明していくよ

character_balloon

構造化マークアップとは?

構造化マークアップとは?書き方まで丁寧に解説!の画像_2枚目
character_balloon

構造化マークアップとは、Googleにサイトの内容をわかりやすく伝える方法のことなんだ

character_balloon

例えば、イエローちゃんが更新したブログに、以下のようなテキストがあったとしてみよう

ブログの例

インフルエンサーマーケティングの基本を徹底解説!


by イエロー


2022.10.01

character_balloon

私たちがこれを読むと、「インフルエンサーマーケティングの基本を徹底解説!」というタイトルの、イエローっていう人が書いている、2022年10月1日に公開されたブログ記事なんだということがわかるよね

うん、「タイトル」や「著者」、「公開日時」とはっきり書かれていなくてもそう思うよね

character_balloon
character_balloon

だけど、Googleのロボットでは、人間と同じように前後の文脈などから内容を理解するのが難しいんだ

character_balloon

そのため、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

こうやって、サイト内の情報を構造化して伝えるのが構造化マークアップなんだ

構造化マークアップのメリットを解説!

character_balloon

構造化マークアップは、検索順位の向上に直接的な影響があるわけではないんだ

character_balloon

ただ、構造化マークアップを行うと、検索画面でリッチリザルトを表示させたり、ナレッジパネルやローカルパックにWebサイトの情報を掲載されやすくしたりする効果があるよ

character_balloon

これらの効果のおかげで、検索からサイトにアクセスするユーザーが増加することが期待できるから、間接的とはいえSEOに大きな影響があると考えられるんだ

character_balloon

それぞれの効果について、もう少し詳しく説明していくね

メリット1.リッチリザルトの表示

構造化マークアップとは?書き方まで丁寧に解説!の画像_6枚目
character_balloon

サイトのURL・タイトル・説明文の他に、追加情報が掲載されている検索結果のことをリッチリザルトというよ

character_balloon

商品の価格や口コミ評価、サムネイル画像、イベント日時やスケジュールなど、サイトの内容に合わせた様々な情報が表示されるんだ

character_balloon

構造化データとしてこれらの情報をGoogleに正しく伝えることで、リッチリザルトを表示させるよう促すことができるよ

character_balloon

リッチリザルトが表示されるとユーザーの目を引くし、情報がわかりやすく伝わるから、クリック率の向上が望めるよ

メリット2.ナレッジパネルやローカルパックへの情報掲載

構造化マークアップとは?書き方まで丁寧に解説!の画像_8枚目
character_balloon

Googleが蓄積しているデータベースから、ユーザーが知りたがっている店舗や企業の情報を検索結果にまとめて表示するボックスをナレッジパネルというよ

character_balloon

それと、特定の地域に関わる検索キーワードに対して、検索結果にマップと共に表示される店舗や企業のリストを、ローカルパックというよ

character_balloon

店舗や企業のWebサイトでの構造化マークアップは、ナレッジパネルに正しい情報を掲載したり、ローカルパックに店舗や企業を表示させたりするのに役立つよ

character_balloon

ナレッジパネルやローカルパックは検索画面の上部に表示されるから、ユーザーへの訴求力は抜群だよ

構造化マークアップはどうやって実装するの?

構造化マークアップとは?書き方まで丁寧に解説!の画像_10枚目
character_balloon

構造化マークアップには、主に2つの実装方法があるよ

character_balloon

一つ一つ解説していくね

構造化マークアップの実装方法1.HTML内に直接書き込む

character_balloon

まず1つ目は、サイトのHTMLに直接マークアップする方法だよ

character_balloon

HTMLにマークを行う際には、書き方の形式にいくつか種類があるんだけど、Googleは「JSON-LD」という形式を推奨しているんだ

リッチリザルトを表示できるようにするには、サポートされている 3 つの形式のいずれかを使用して、サイトのページをマークアップする必要があります。

* JSON-LD(推奨)

* microdata

* RDFa

引用元: 参照:構造化データに関する一般的なガイドライン
character_balloon

また、構造化データの値をどのように表すかという規格は、schema.orgのボキャブラリが主に用いられているよ

character_balloon

JSON-LDで構造化データを記述する際には、まず内容を下記のタグで囲むよ

JSON-LDの書き方: 初期状態

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


</script>

character_balloon

次に、schema.orgのボキャブラリーを使用するときは、先ほどのscriptタグの中に下記のように記載するよ

JSON-LDの書き方: 冒頭

{


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


}

character_balloon

そして、それ以降はサイトに関する情報を「“情報の種類(タイプ)“: “内容プロパティ)”」という形でカンマで区切りながら記載していくんだ

character_balloon

見出しを示す“headline”や公開日を示す”datePublished”など、様々な情報タイプがあって、Googleの検索ギャラリーから例を見ることができるから、実際に記述するときは参考にしながら進めてみよう

character_balloon

ここまでの流れを踏まえて書かれたのが、さっきもイエローちゃんに例で見せた、この構造化データなんだ

JSON-LDの書き方: 全体

<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

これで手動でのマークアップは完了だよ

構造化マークアップの実装方法2.構造化データ マークアップ支援ツールを使用する

character_balloon

技術的に手動でマークアップするのが難しい場合は、Googleが無料で提供している構造化データ マークアップ支援ツールを使うのもおすすめだよ

character_balloon

マークアップしたいサイト上のテキストを画面上で直接選択して、その内容に合ったタグを選択することで、データを構造化してくれるんだ

character_balloon

マークアップが完了したら、構造化データのコードを自動生成してくれるから、そのコードをサイトのHTML内にコピペすれば簡単に実装できるよ

character_balloon

構造化マークアップについて、重要なポイントをまとめたよ

まとめ

◆構造化マークアップとは、Googleにサイトの内容をわかりやすく伝える方法のこと


◆リッチリザルトの表示やナレッジパネル・ローカルパックへの掲載を通して、クリック率向上の効果が期待できる


◆HTML上に直接書き込むほか、Googleが提供しているツールを使って実装することができる

構造化マークアップのことがよくわかったよ!ありがとうブルーちゃん!

character_balloon
character_balloon

ブルー

SEO
マーケティングオートメーション(MA)
アフィリエイト
wordpress

SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。

最新の記事一覧