構造化マークアップについて

はじめに

この記事はWebの基礎をおさらいカレンダー Advent Calendar 2022です。
このカレンダーでは、なんとなくわかった気になっている、Webの知識をおさらいするカレンダーです。
興味をもし持ってくださった方は、購読いただけると嬉しいです！

今回は構造化マークアップについて説明します！

構造化マークアップとは

Googleのクローラーにコンテンツ内容を適切に理解させるための記述方法のことです。

構造化マークアップを行うことで、下記利点が得られます。
通常のマークアップであれば下記のように表現しますが、
<p>会社名: hogehoge株式会社</p>

構造化マークアップでは下記のように表現したりします。

  <p itemscope itemtype="http://schema.org/Corporation">
    <span itemprop="name">株式会社hogehoge</span>
  </p>

このように構造化マークアップを行うことで得られる利点は下記です。

• 検索エンジンに認識されやすくなる。
  • コンテンツの意図や文脈を伝えることができるため。
• リッチリザルトの表示がされる場合がある。
  • 通常の検索に、加工された表示が行われる

どのようなリッチリザルトがあるかについてはGoogle検索セントラルを参照するのが良いです。

構造化データの記述方法

Googleでは下記2種類の方法をサポートしています。

• microdata: htmlの中で記述する
  • HTMLコードが複雑化し、メンテナンスコストが増えてしまう可能性が高い
• JSON-LD: scriptタグを用いて記述する
  • Googleはこちらを推奨している

先ほどの例で示したmicrodataでの記載をJSON-LDで記載すると下記のようになる。

<script type="application/ld+json">
{
    "@context" : "https://schema.org",
    "@type" : "Organization",
    "name" : "企業名",
}
</script>

構造化データを検証する際は、Googleが提供しているツールがあるので、ぜひ使いましょう。




まとめ

以上、構造化マークアップについての説明でした！

Webの基礎をおさらいカレンダー Advent Calendar 2022でした。
興味をもし持ってくださった方は、購読いただけると嬉しいです！