SEOには欠かせないと言っても過言ではない構造化データについて、サンプルコード付で解説していきたいと思います。
昨今、CMSで作られているWEBサイトにはデフォルトで生成されていると言っても過言ではありませんね。
ただ、フルスクラッチで構築されるWEBサイトの場合、仕様書に書き入れておく必要があります。
また、HTMLやCSSをテキストエディタで書き起こすケースでも、仕様を理解して記述するなりコピペする必要がありますね。
そのための参考データとしてご覧いただければと思います。
また、ブログ記事を書く時など、敢えて構造化を意識して記事を構築することも必要かもしれません。
兎角、それらを意識した構造化データをご確認いただき、適宜、調整していくことが重要です。
目次
構造化データが何の役に立つ？
そもそも、構造化データが何の役に立つのか？という疑問がありそうですね。
構造化データがあることで、検索結果で以下のような表示をすることが可能になります。
下記の画像の赤枠部分をご覧ください。
これは、同一サイト内（ドメイン・ページも同一）のコンテンツのデータです。
これにより、クリック率が大きく変わります。
Googleでは、検索順位が1位以外のサイトでも、このようなアップデートを重ね、ユーザーにとって最適な答えを返そうと動いています。
このようなデータを見ると、やはりSEOに構造化データは欠かせないものと考えられますね。
画像で見る構造化データ
さて、本題です。
今回は、Googleが提供してくれている「構造化データ マークアップ支援ツール」を利用して、構造化データのコードを見ていきましょう。
以下の「構造化データ マークアップ支援ツール」のリンクをクリックしていただき、以下データをご覧ください。
予め
構造化データには種類があり、種類ごとに記述が変わります。
それぞれ、適切な種類を選びマークアップするようにしてください。
- Q&Aページ
- イベント
- ソフトウェアアプリケーション
- テレビ番組のエピソード
- データセット
- レストラン
- 商品
- 地域のお店やサービス
- 映画
- 書評
- 求人情報
- 記事
必要なページのURLと種類を選びましょう
以下画像の赤枠の中に、必要なURLと種類を選んで入力と選択をしましょう。
今回は当サイトの記事のURLを入力いたしました。
ハイライトしていきましょう
以下の画像のようにテキストや画像を自らが選んでハイライトしていく作業をすることになります。
今回は「名前」と「著者名」をハイライトしてみます。
ハイライトの仕方
ハイライトはクリックするだけでできますので難しいことではありません。
ハイライトした箇所の種類を選んでいくことになります。
ハイライトしたらコードを生成
重要な部分をハイライトしたらコードを生成します。
ここでは「JSON-LD」か「microdata」を選択できますので、サイトの形態にあわせてコードを選択してください。
一般的には、「JSON-LD」の方が簡単で多く用いられているかなと思います。
コードをコピペ
出力されたコードをコピペしてください。
赤枠にある「記事」の部分はリンクになっていて、この場合ですと、「記事」のマークアップの解説リンクになっています。
コピペしたサンプルコード
ということで、以下にコピペしたサンプルコードを記載いたします。
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Article",
"name": "SEO対策をする上で最も気をつけるべきポイント",
"author": {
"@type": "Person",
"name": "清水 隼斗"
}
}
</script>
一度、たくさんのデータを入力した後、微調整をするくらいでもいいのかもしれません。
中身を理解せずにコピペした時ほど怖いことはありません。
コピペで実装出来るとはいえ、必ず中身は理解しておくようにしましょう。
完了後はお好きにどうぞ
完了後は、モーダルウィンドウで出ている通りでして、ダウンロードすればコードをダウンロードするような流れになっています。
続行をして訂正していくこともできますので、後はご自身のお好きなように進めていただく流れになります。
「構造化データ マークアップ支援ツール」を使った操作は以上です。
コードを実装して、ブラウザ上で異常がないかを確認していただき、その後、欲を言えば検索結果上に反映されると嬉しいですね。
ひとまずは必要なページに実装できるように作業を進めてみてください。
AIでも教えてくれました
Gemini Advancedに聞いても教えてくれました。
今回は「記事」ページでリクエストをしてみたんですが、各々の都合にあわせて聞いてみてくださいね。
今回のお願いの内容は以下の通りです。
構造化データを構築するサンプルコードを生成してほしい。
ページの種類は記事です。
・記事名
・著者
・画像
・特徴
これらが分かるようにマークアップしてほしい。
後は、リンク先のドキュメントをご覧いただければと思います。
Gemini Advancedはとても親切で、記事ページに必要な要素を書き出して教えてくれています。
私からリクエストした以上の答えを教えてくれていますね。
マークアップされたデータをそのまま教えてくれていますので、コピペしてご確認くださいね。
というか、Gemini Advancedが返してくれているデータが最も分かりやすいかもしれないくらい丁寧に教えてくれています。
締め
いかがでしょうか。
学習データが豊富にあるので、各々のケースに応じて最適なコードを生成することが出来ますね。
前述でも記載しておりますが、これらのコードの中身を理解せずにコピペで作業が終わることが一番良くないことかもしれません。
意図しない検索結果に表示されることにもなりかねません。
話が飛ぶかもしれないんですが、これまでノーコードでサイト構築に関わられた方にとっては、絶好の学習のタイミングにもなるかもしれません。
SEOというのはノーコードでも実践出来るかもしれませんが、それではとても浅い施策になりかねません。
WEBサイトやWEBページへの技術的な理解なくして行うSEOはほんとに何が起きるか分かりません。
ですので、このようなデータに触れる機会がある時にはぜひ学習していただきたく思う次第です。
今後、構造化データの仕様に変更が出た際には随時内容を更新してまいります。
コメント