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

浜松本社ディレクター深谷
2018.04.11

こんにちは。クリエイティブプランナーの深谷です。
第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>