HTML5構造化によるセマンティックWebがSEOに与える影響

株式会社アラタナ

HTML5 構造化によるセマンティック Web が SEO に与える影響
品質管理チーム：高見

〒 880-0811
宮崎県宮崎市錦町 1-10
宮崎グリーンスフィア壱番館
５階
©aratana Inc. TEL:0985-23-3362( 代表 )
FAX:0985-22-8580

自己紹介

高見　和也（ Takami Kazuya ）
株式会社アラタナ
サービス開発部：品質管理チーム所属（フロントエンジニアです）
Twitter@miiitaka
Facebook@miiitaka

オフィシャルサイト構築 SEO コンサルティングパッケージソフトの品質管理
PHP / WordPress / JavaScript Web マーケティング
/ HTML5

2

セマンティック Web ？

セマンティック（ Semantic ）＝意味の
セマンティック Web とは？

　 Web ページおよびその中に記述された内容について、それが何を意
味するかを表す情報 ( メタデータ ) を一定の規則に従って付加する
ことで、コンピュータが効率よく情報を収集・解釈できるようにする
構想。インターネットを単なるデータの集合から知識のデータベースに
進化させようという試みがセマンティック Web である。

出展）IT用語辞典 e-Words

©aratana Inc. 3

宣言文で表示が変わる？

XHTML1.0 HTML5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <!DOCTYPE html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

どちらの宣言でも見た目は
同じように組めます。

©aratana Inc. 4

クローラーにやさしく

閲覧者がクロー
見やすいラー見や
すい

内容がよクロー
くわかるラー理解
構成できる

宣言文と構文意識
か意識しする
ない

©aratana Inc. 5

クローラーに理解しやすく

XHTML1.0 HTML5
ここが
<div id=“header”> <header> 見出し部
分

<div <div id=“content”> <nav> <section>
id=“navi”> ここに
<div id=“content_entry”> <article>
記事があ
る



<div id=“footer”> <footer>

ここが
フッター
ふむふむ

©aratana Inc. 6

クローラーが精度の高い情報を持って帰ってくれる。
検索精度
UP ！！
HTML5
<header>
SERP

<nav> <section>
<article>

<article>

検索情報 DB
<article>

<footer>

©aratana Inc. 7

お願い Google ！

そちらにわかりやすい情報を
提供しているのだから
他のサイトと差別化してほしい

©aratana Inc. 8

さすが Google ！

いいよ

©aratana Inc. 9

上から目線

じゃあもっと詳しい情報くれたら
差別化してあげてもいいよ。

©aratana Inc. 10

こんなふうに

＝レビュー＝音楽・ビデオ

＝人物
＝イベント

＝レシピ

＝商品
＝ソフトウェア

＝著作者リッチスニペッ
トにするね

©aratana Inc. 11

マークアップ形式

詳しい情報を提供するには？

microdata (Google 推奨 )
microformat
RDFa 2011-06-02
一本化できてる様子も
ないし、 Yahoo ！や
共同で開発・サポート
Bing の動きも遅いなぁすることを発表
。

©aratana Inc. 12

結局そうだよね。

アラタナサイトでは
microdata を採用することにしました
。

©aratana Inc. 13

マークアップ！

アラタナサイトでは
メンバーページを「人物」
全ページを「ぱんくず」で
マークアップすることにしました。

©aratana Inc. 14

Microdata - Breadcrumb

©aratana Inc. 15

Microdata - Breadcrumb

<nav>
<ul>
<li><a href="/">HOME</a></li>
<li><a href="/member/"> メンバー紹介 </a></li>
<li><a href="/member/detail.php?id=45"> 穂満一成 </a></li>
</ul>
</nav>

<nav><ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" >
<a itemprop="url" href="/"><span itemprop="title">HOME</span></a></li>
<a itemprop="url" href="/member/"><span itemprop="title"> メンバー紹介
</span></a></li>
<a itemprop="url" href="/member/detail.php?id=45"><strong itemprop="title"> 穂満
一成 </strong></a></li></ul></nav>

©aratana Inc. 16

Microdata - Person

©aratana Inc. 17

Microdata - Person

<section>
<p> 穂満一成 </p>
<p> 専務取締役（ CTO ） </p>
<p> プログラマー </p>
<p> 株式会社アラタナ   取締役 </p>
<p><img src=“photo.jpg" alt=" 穂満一成 " height="420" width="420" /></p>
</section>

<section itemscope itemtype="http://data-vocabulary.org/Person">
<p><span itemprop="name"> 穂満一成 </span></p>
<p><span itemprop="role"> 専務取締役（ CTO ） </span></p>
<p><span itemprop="title"> プログラマー </span></p>
<p><span itemprop="affiliation"> 株式会社アラタナ </span>  取締役 </p>
<p><img itemprop="photo" src="photo.jpg" alt=" 穂満一成 " height="420"
width="420" /></p>
</section>

©aratana Inc. 18

リッチスニペットマークアップ確認

穂満一成

SERP

❏ Web マスターツールで確認

©aratana Inc. 19

反映確認

マークアップして
から 1 ～ 2 週間で
反映されました。

©aratana Inc. 20

SEO 対策って何？

0% 1 0% 20% 30% 40% 50% 60%

1

2

3

4

ネットショップ 5

6

木製バット
7

8

9
SERP
10

Av e r a g e C TR

※CTR （ Click Through Rate ）…クリックされる確率のこ
と
※2012 年 7 月 SEOMoz 調べ

©aratana Inc. 26

ですよね

アイトラッキングによる検証では
リッチスニペットに視線が集まることが分かった！

ネットショップで、レビューのリッチスニペット
表示で
検索結果での CTR が 5% 上がった！
検索結果 2 位の状態で、 21.52% ⇒ 26.32%

出展）英国の SEO コンサルティング会社、 SEOgadgetの Richard Boxer （リチャード・ボクサー）氏による「レビューリッチスニペット」をテーマにした
プレゼンテーションより
©aratana Inc. 27

HTML5構造化によるセマンティックWebがSEOに与える影響

More Related Content

Similar to HTML5構造化によるセマンティックWebがSEOに与える影響

More from Takami Kazuya

HTML5構造化によるセマンティックWebがSEOに与える影響