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に与える影響

Recommended

Recommended

More Related Content

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

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

More from Takami Kazuya

More from Takami Kazuya (20)

Recently uploaded

Recently uploaded (12)

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