静岡・浜松のWebマーケティング|株式会社シーエムエー

お問い合わせ

CMA BLOG

株式会社シーエムエー ホーム > CMA BLOG > ホームページ制作 > 構造化マークアップはSEO対策に効果があるのかやってみた

ホームページ制作 SEO対策 構造化マークアップはSEO対策に効果があるのかやってみた

  • このエントリーをはてなブックマークに追加

こんにちは。クリエイティブプランナーの深谷です。
第1回は、デザイナーの山本と一緒に「自社サイト」で実装した、「構造化マークアップ」についてご紹介したいと思います。

http://www.akindo2000.net/

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

構造化マークアップとは、Googleのクローラーにテキスト情報やコンテンツ内容を適切に理解してもらう記述方法のことです。

通常マークアップの例

<div>株式会社シーエムエー</div>

※クローラーは単なるテキストとして認識

構造化マークアップの例

<div itemscope itemtype="http://schema.org/Corporation">
<span itemprop="name">株式会社シーエムエー</span>
</div>

※会社名は「株式会社シーエムエー」として認識

このように構造化マークアップすることにより、単語やテキストに意味を持たせることができ、検索結果の精度が飛躍的に向上します。

構造化データの種類

構造化データのフォーマットは、大きく分けて2つに分類されます。

・Microdata(マイクロデータ):HTMLにメタデータを直接記述する方式
・JSON-LD(ジェイソン・エルディ):JavaScriptを使ってページ内に挿入する方式

どちらの記述もクローラーに認識してもらえるのですが、Googleが近年JSON-LDを推奨してるので、今回はJSON-LDを採用したいと思います。

構造化データの記述方法ですが、Schema.orgにある「ボキャブラリ」と呼ばれる構造化データ用のタグを利用します。

http://schema.org/

schema.orgとは、Google、Yahoo、Microsoftの3社で策定を進めていた構造化マークアップ(形式言語)規格です。schema.orgの仕様通りにHTMLにマークアップすることで、通常のHTMLマークアップでは伝えきれない、より詳しい正確な情報を検索エンジンのクローラーが認識できるようになることでトラフィック獲得に有利に働きます。

構造化マークアップの実装

scriptタグのtype属性に”application/ld+json”を指定します。

今回は検索結果にパンくずリストを表示するための実装方法をご紹介します。
基本的な設定項目は下記で構成されます。

@context 使用規格:http://schema.orgなど
@type 構造化データのタイプ:websiteやBreadcrumbList
itemListElement ページに関する情報を記述:ページタイトルや階層の位置

以下のソースは弊社のページ(第二階層)を構造化マークアップしたものです。

<script type="application/ld+json">{
{
	"@context": "http://schema.org",
	"@type": "BreadcrumbList",
	"itemListElement": [ {
		"@type": "ListItem",
		"position": 1,
		"item": {
			"@id": "www.akindo2000.net/",
			"name": "静岡・浜松のホームページ制作・インターネット広告代理店|株式会社シーエムエー"
		}
	}
		,{
		"@type": "ListItem",
		"position": 2,
		"item": {
			"@id": "www.akindo2000.net/website/",
			"name": "ホームページ制作・Web制作"
		}
	}


 ]
}</script>

構造化マークアップの検証

構造化マークアップをしたら記述が正しいかどうか、以下のテストツールで検証します。
記述に誤りがある場合はエラーを返してくれたり、どのような構造としてクローラーに認識されているのかを確認することができます。

https://search.google.com/structured-data/testing-tool/u/0/?hl=ja#

また、リリース後はサーチコンソールでも構造化データの状態を確かめることができます。

まとめ

最後に実際にGoogleの検索結果画面でどのように表示されるかを見てみます。

この様に検索結果のページタイトルにパンくずリストが付いて表示されました。

構造化マークアップではパンくずのほかにもや商品レビューや、イベントの情報の表示等さまざまな形式のリッチスニペットが用意されてますので、カスタム次第でSEO対策やクリック率向上に大きく貢献できると思います。

HowToハウツーリッチリザルト構造化マークアップ第2弾!Googleの検索結果画面をカスタムできる「HowTo (ハウツー) 」のご紹介はこちら

  • このエントリーをはてなブックマークに追加

人気の記事ランキング

  • posted on 2023/02/082023年度版 Google PageSpeed Insights(ページスピードインサイト)を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた

  • posted on 2023/12/07迫る、浜松市の行政区再編(中央区、浜名区)。住所変更だけじゃない。Webサイトで必要な対応とは?

  • posted on 2022/10/21DockerでPHP環境を簡単に構築してみよう

  • posted on 2020/06/10ノンデザイナーのためのデザイン基本ルール ~文字編 文字詰め~

  • posted on 2021/02/10インスタグラムが突然表示されなくなった!最新のInstagram Graph API(v9.0)を使って再表示する方法とは

おすすめタグ

ECサイト 動画 HTML レクリエーション 創業記念日 ASP SSL PageSpeed Insights スピードアップデート 動画広告 ECcube wordpress 構造化マークアップ カスタマイズ Transport Layer Security 保護されていない通信 HowTo Chrome TLS クリック率 ハウツー ノンデザイナー リッチリザルト Instagram広告 文字 デザイン フォント Core Web Vitals 自作PC 初心者 構造化データ Facebook広告 リモート iPhone CSS 動画制作 AMP 広告 HTML5広告 Google Chrome videoタグ GoogleMapsPlatform Zapier Facebook Audience Network Google my map ワイヤーフレーム Google for jobs Googleしごと検索 撮影 iPad 一眼レフカメラ 写真 自作パソコン ウェブサイト翻訳 Adobe XD PC組み立て XMLサイトマップ PHP タスクランナー gulp.js node.js WebP画像 楽天GOLD スマートフォン用新店舗トップページ Threads(スレッズ) Instagram Adobe Firefly 画像生成AI アセット生成 生成塗りつぶし Adobe MAX Japan 2023 UI UX Adobe Stock アンチックフォント Adobe Express Webマーケティング デジタルマーケティング 文字コード 符号化文字集合 生成拡張 Google Search Console レクタングルバナー 画質パラメーター shopify ショッピングサイト ショッピファイ Shopify使い方 WebP リモートワーク remotework プラグイン IE コーディング サイズパラメーター モダンブラウザ gridレイアウト object-fit aspect-ratio any-hover docker Photoshop クラウドドキュメント ディスプレイ広告 スマートオブジェクト gap Unicode(ユニコード)

Top