Googleの構造化データでSEO対策! マークアップの種類と導入方法を解説|Labo|株式会社トライム

Keyword

Contact

についての不明点や案件のご相談などございましたらお気軽にお問い合わせください。

Share

X Facebook pocket LINE はてなブックマーク

Googleの構造化データでSEO対策! マークアップの種類と導入方法を解説

2024.02.19

Google検索をした時、下記の画像のように記事とは別にページコンテンツが表示されている状態を見たことがある方も多いのではないでしょうか。

リンクを押さなくても、検索結果画面から内容を見ることができるので、ついページに飛んで読みたくなってしまいますよね。

これを可能にするのが「構造化データ」と呼ばれる仕組みです。今回の記事では構造化データとは何か、またサイトへの導入方法について解説します。

構造化データとは?

構造化データとは、Webページの内容をGoogle Chromeなどの検索エンジンが読み込める形式で表現するためのマークアップ言語の一種です。構造化データを用いることで「リッチリザルト(リッチスニペット)」と呼ばれる特定の情報(例:製品の価格、レビューの評価、出版物の著者など)を検索結果に直接表示することができます。ユーザーは検索結果から直接必要な情報を得ることができ、また詳細を知るためにリンクをクリックしてページにアクセスするというユーザーの行動が期待できます。

例としてGoogle検索ではさまざまなリッチリザルトをサポートしています(公式ドキュメントはこちら)。

  • プロフィール
  • 組織
  • 商品
  • 店舗
  • イベント
  • Q&A
  • 求人情報
  • レシピ
  • レビュー etc…

構造化データの導入方法について

構造化データをサイトに導入する方法について、2パターンの方法が考えられます。

ノーコードでの導入

HTMLが分からない非エンジニアの方にはGoogleの提供している下記のツールがおすすめです。専門知識をお持ちでないマーケターなどの方はこちらの方法を活用するのが良いでしょう。

ただし、これらの方法は専門知識を要求しない反面、「内容がツールに制限される」「ツールを使うことで手動作業よりも手間がかかる」といった側面もあります。自身のサイトに合わせて最適な構造化データを組み込むには、コーディングによる導入が欠かせません。

コーディングでの導入

構造化データをHTMLに記述する際には、そのフォーマットを決める必要があります。代表例は下記の3つです。補足ですが、これらのフォーマットのことを「シンタックス」と呼びます。

  • JSON-LD
  • RDFa
  • Microdata

HTMLでコーディングすることで、動的ページや多言語サイトといった特有の要件に合わせて構造化データを細かく設定することができます。ECサイトをはじめ大規模なWebサイトでは、コーディングによる構造化データの導入が効果的です。

今回はJSON-LDを使った記述方法を解説します。

JSON-LDによる構造化データの表記例

JSON-LDとはGoogleが推奨している記述フォーマットです。スクリプトタグを使用し、HTML内の1箇所にまとめて構造化データを記述することができます。実際の記載例とともに組み込み方をまとめていきます。

リッチリザルト例

例えば「組織」の構造化データとして、以下のような会社情報のマークアップを想定します。


Webサイトを起点に、「デザイン」と「デジタル」で、地方の未来をおもしろくする。
https://try-m.co.jp/

〒107-0062
東京都港区南青山2-2-15 ウィン青山942
電話番号:03-6403-3259
営業時間:月~金10:00~19:00


スクリプト

これをJSON-LDでは以下のように記述することができます。

<script type="application/ld+json">
{
"@context" : "https://schema.org",
"@type" : "Organization",
"name" : "株式会社トライム",
"description" : "Webサイトを起点に、「デザイン」と「デジタル」で、地方の未来をおもしろくする。",
"url" : "https://try-m.co.jp/",
"image": "https://try-m.co.jp/wp-content/themes/trym/images/common/header/logo.svg",
"telephone" : "+81-03-6403-3259",
"address" : {
    "@type" : "PostalAddress",
    "postalCode" : "107-0062",
    "adressRegion" : "東京都",
    "adressLocality" : "港区",
    "streetAdress" :"南青山2-2-15 ウィン青山942",
	"addressCountry":  {
		"@type":"Country",
		"name":"JP"
	}
},
"openinghours" : "Mo, Tu, We, Th, Fr 10:00-19:00"
}
</script>

対応表

各項目の詳細は以下の通りです。

@contextどのボキャブラリーを使用するか(例:schema.org、data-vocabulary.org)
@type何について記述するか(例:レシピ → Recipe、店舗情報 → Store)
name名称
description説明文
urlリンクURL
imageサムネイル画像
telephone電話番号
address住所
openinghours営業時間

この他にもJSON-LDでは様々な情報について記述することができます。さらに詳しい内容や項目について知りたい場合は公式ドキュメントを参照しましょう。

ボキャブラリーについて

JSON-LDを構築する上で欠かせないものが、「ボキャブラリー」と呼ばれるデータに意味付けを行う規格です(Googleではschema.orgを推奨)。JSON-LDはあくまで構造化データのフォーマットに過ぎず、どのような項目で何を記述するかは、定義したボキャブラリーに沿って記述する必要があります。つまり今回の例では、

「”@context” : “https://schema.org”, “@type” : “Organization”, “name” : “株式会社トライム”」

と記述することにより、「schema.orgという規格に従って組織名は株式会社トライムであることを説明している」と言えます。

確認ツール

自身で作成した構造化データや、インターネット上に公開されているサイトの構造化データは、下記のツールを利用することで確認することができます。エラー検証や他サイトの調査を行う場合に活用してみてください。

リッチリザルト テスト

構造化データをテストするための Google の公式ツールです。Webページまたはコードに対して、構造化データの構造解析やエラー検出が可能です。Google検索でリッチリザルトがどのように表示されるかをプレビューすることもできます。

https://search.google.com/test/rich-results?hl=ja

スキーマ マークアップ検証ツール

ウェブページに埋め込まれている Schema.org ベースの構造化データをすべて検証することができます。Google の機能固有の警告は表示されません。

https://validator.schema.org/

まとめ

今回の記事では構造化データとは何か、またサイトへの構造化データの導入方法について解説しました。

構造化データを活用したユーザーへの情報発信は、強力なSEO対策に繋がります。トライムではECサイトをはじめ様々なWebサイトの制作を手掛けています。
ノーコードでの実装も可能ですが、ECサイトや大規模サイト等への導入にはHTMLでの実装が不可欠です。サイトへの構造化データの導入をご検討の方は、ぜひお気軽にお問い合わせください。

Share

X Facebook pocket LINE はてなブックマーク
Webサイト制作についてお悩みでしたら私たちにご相談ください。

私たちはECサイトなどのBtoCのサイトの制作に特化したWeb制作会社です。マーケティング視点をもったクリエイティブにより、運用まで見据えた効果の高いWebサイトを構築いたします。Webサイトについてお悩みのWeb担当者の方は、トライムまでお気軽にご相談ください。

Keyword

Contact

についての不明点や案件のご相談などございましたらお気軽にお問い合わせください。

Contact

お問い合わせ

トライムは常にお客様へ寄りっ沿った提案をさせていただきます。
自社のEC売上の拡大や人材不足などのお客様のデジタル上の課題を、
様々なアプローチにより解決するお手伝いをいたします!
お気軽にお問い合わせください。

TEL

03-6403-3259

受付:10:00 - 19:00