【サイト構築】検索エンジンに話しかける方法 : Microdata 【HTML5】

新たなwebスタンダードになりつつあるHTML5。
レガシーブラウザへの対応等も整ったことあり、企画の段階でも提案しやすくなったのではないでしょうか。

今回のテーマは”セマンティックHTML5″。
そのままズバリ”意味”を持ったマークアップについてです。

HTML5はセマンティックwebの進化形態

みなさんはセマンティックwebという言葉を知っていますか? 響きが難しそうですよね。
ですが概念はとっても簡単。 [quote style=”1″] インターネットをデータベースにしようぜ! [/quote]

まぁ解説しているときりがないので以下にリンクを貼ります。

セマンティックウェブにおける新しい潮流: コンサルタントのコラム | NECネクサソリューションズ
専門用語も多く読みにくいかもしれませんが、詳細なことまで書いてあります。
セマンティックWebによる情報統合 〜Web 2.0と情報活用を支えるメタデータ
シンクイットさんの記事です。概念部分は分かりやすいかと。

ほどほどにしておきます。

人間である私たちはwebサイトをクロールする際、「あ、ここがナビゲーションでこの人がこの文章を書いた人かなー」と感覚で理解しています。

しかし検索エンジンをはじめとする機械は、「え、全部divじゃんわかんね」とか「名前二つ並んでるし、、」というしか理解できないわけです。

もちろんGoogle大先生もおそらく血もにじむような努力をしてなんとか解析しようとしたでしょう。
まぁ、webサイトは世界中で5億8000万サイトあるそうなので、(出典:)現実的に考えて既存のやり方では無理なのでしょうね。

そこでHTML5ではよりセマンティクス(意味を持った)タグが導入されました。

また今まではブロック要素とインライン要素の二つのカテゴリしかありませんでしたが、HTML5ではコンテンツモデルとして各要素ごとに内包できるコンテンツを定義されたんです。
これにより検索エンジンもよりHTMLの構造を理解しやすくなり、より一層サイトの差別化ができるようになりました。
でも、実際にHTML5が直接SEOに関係は「現時点ではない」説が濃厚です。

HTML5でサイトを作るとSEOに有利になるのか? | お気軽無料ホームページ作成ガイド[browser-shot url=”http://hp-guide.com/attract/seo-column/advantageous-html5-seo/” width=”600″]
HTML5はSEOに有利?不利?

HTML5でマークアップすると検索順位があがりまくった!!!、、、なんてことになったら僕らは今頃大忙しのはず。
既存のサイトのほとんどがまだxhtml,html4.01の現状ですとそのようなことはありえないようです。

ですが、構造を意識してマークアップするということに関しては以前からSEO上とても重要だとうたわれています。
HTML5のルールにのっとってマークアップすることは自然と構造を意識したマークアップになる。これがメリットです。

じゃあ、HTML5ってSEOに関係ないの?

長くなりましたが本題に入りさせていただきます。

今までの流れだと「HTML5ってあんまりSEOと関係ないじゃん、、、」ってなっちゃいますが、あります。

HTML5の新たな機能として追加された「microdata」。
正直ほかのAPIやcanvasとかいった華やかな新機能に目を奪われがちですが、microdataもものすごく大切です。

下の画像を見てください。

microdata01

普段Googleで検索している際、よく見かけますよね。検索結果にパンくずが表示されていたり、著者の画像・名前が表示されてたり。
今まで気にしなかったんですが、SEO的にメリットは大きいですよね。
SERP(Search Engine Result Page:検索結果ページのことです。かっこつけました。)の狭い領域に少しですが情報を追加できる!
小さいことですが、大きなアドバンテージとなりそうです。
microdataでググるとすでに参考になりそうな記事がありました。

HTML5 の microdata について調べた « blog.udzura.jp
microdata について – ウェブマスター ツール ヘルプ

ふむふむ。。。

結構複雑そうorz。

ちょっとまとめてみました。

まずはmicrodataの書き方

次のコードをにmicrodataで意味を付加していきます。
あ、Googleさんの参考コードをもじったものですがすみません。

[html]

石原コーポレーション 住所: 愛知県名古屋市中川区 電話番号: 052-1234-XXXX http://example.com

[/html]

microdataの要素は5つあります。

それでは、実際にmicrodataを付け足していきます。

itemscope

この要素はmicrodataで情報を付加する際、必ず必要な要素です。
このitemscopeを付加することで検索エンジンさんに「ここにmicrodata埋め込みましたよー見てくださいねー」と知らせることができます。

[html]

石原コーポレーション 住所: 愛知県名古屋市中川区 電話番号: 052-1234-XXXX http://example.com

[/html]
まずはこうですね。

itemtype

itemtypeは示すmicrodataの種別を示すために付与します。属性値はgoogleさんたちが決めたurlを入れなければなりません。
たとえば、人物に関するmicrodataを埋め込むつもりなら

itemtype=”http://data-vocabulary.org/Person

とすることで
検索エンジンは「あ、このタグの中に人物に関するマイクロデータ埋め込んでんのね」ってこちらの意思をくみ取ってくれます。
また、必ずitemscopeと同じタグ内に埋め込まないといけないそうです。
こちらが種類別の指定url一覧です。

itemtype 属性(マイクロデータのタイプを表す URL)

[html]

石原コーポレーション 住所: 愛知県名古屋市中川区 電話番号: 052-1234-XXXX http://example.com

[/html]

itemprop

itemprop属性はmicrodataのプロパティ名です。
会社の例ですと、

name : 会社名
url : 会社のホームページへのリンク
address : 会社の住所
tel : 会社の電話番号
geo : 会社の地理座標

この5つのプロパティを設定できます。
では、itemprop属性をspanタグなどに付加して情報を囲みます。

[html]

石原コーポレーション 住所: 愛知県 名古屋市 中川区 太平通り 電話番号:052-1234-XXXX

[/html]

ここにきて書き込む量が増えましたね。

それぞれ最低限の情報のみitempropで囲みました。しかし、3行目のspanにはaddressプロパティの他にitemscopeとitemtypeも付加されています。
Googleさんの解説を見てみると、

[quote style=”1″]プロパティは別のアイテムで構成されることもあります(つまり、アイテムに他のアイテムを含めることができます)。たとえば上記の組織の情報には、住所(itemtype=”http://www.data-vocabulary.org/Address“)とそのプロパティ(street-address、locality、region)が含まれています。[/quote]
プロパティには別のitemtypeが指定されていることもあるようです。
覚えるには時間がかかるので一回一回確認した方がよさそうだなー。

itemref

結構便利な属性っぽいです。
itemscopeと同じ場所に指定itemref=”ID名”とするだけでその指定したID要素内でもいきなりitempropとか使えるみたいです。

[html]

石原コーポレーション 住所: 愛知県 名古屋市 中川区 太平通り

電話番号:052-1234-XXXX

[/html]

のようなことができるんですね。
また、itemtypeと同様に必ずitemscopeと併記しなければいけません。

itemid

itemidは実際に使用したことがないのでリンクを上げさせてもらいます。

ISBNなどの本を定義するurlを指定する際に役立つらしいです。

確かにitemmtypeでは大まかなカテゴリーわけしかできないので、itemidでその”本”を識別できるurlを別に指定してあげれば、検索エンジンにも確実に情報が伝わるでしょう。

ということで完成形は

[html]

石原コーポレーション 住所: 愛知県 名古屋市 中川区 太平通り 電話番号:052-1234-XXXX

[/html]

となります。

 

microdataを使用してGoogleさんの検索結果に表示されるもの

今回はGoogleさんへのmicrodataの伝え方について書きました。
Google検索結果で変化があるのは以下の点です。

でもやっぱりめんどくさい。。。

まぁでもやっぱりめんどくさいですよねー。
そこで少しでも楽にマークアップできないかなと探していたところ、wordpress限定ですがプラグインがありました!

Microdata for WordPress: An SEO Plug-in to Help You Take Advantage of Schema.org

このプラグインを使えば…….

51360a4a2f7cc6529e000016

項目に応じてHTMLを吐き出してくれます。

ぜひ使ってみてください。
人間、堕落って怖いですね。では以上1shiharaでした。

1shiharaT
1shiharaT
本名 : 石原隆志

2013年からWeb業界に身を置き、GrowGroup株式会社でWordPressやEC-CUBEなどのCMSを中心にWeb制作をやってます。
本名 : 石原隆志 2013年からWeb業界に身を置き、GrowGroup株式会社でWordPressやEC-CUBEなどのCMSを中心にWeb制作をやってます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です