More Related Content
Similar to HTML5構造化によるセマンティックWebがSEOに与える影響 (20)
More from Takami Kazuya (20)
HTML5構造化によるセマンティックWebがSEOに与える影響
- 1. 株式会社アラタナ
HTML5 構造化によるセマンティック Web が SEO に与える影響
品質管理チーム:高見
〒 880-0811
宮崎県宮崎市錦町 1-10
宮崎グリーンスフィア壱番館
5階
©aratana Inc. TEL:0985-23-3362( 代表 )
FAX:0985-22-8580
- 2. 自己紹介
高見 和也 ( Takami Kazuya )
株式会社アラタナ
サービス開発部:品質管理チーム所属(フロントエンジニアです)
Twitter@miiitaka
Facebook@miiitaka
オフィシャルサイト構築 SEO コンサルティング パッケージソフトの品質管理
PHP / WordPress / JavaScript Web マーケティング
/ HTML5
2
- 3. セマンティック Web ?
セマンティック( Semantic )=意味の
セマンティック Web とは?
Web ページおよびその中に記述された内容について、それが何を意
味するかを表す情報 ( メタデータ ) を一定の規則に従って付加する
ことで、コンピュータが効率よく情報を収集・解釈できるようにする
構想。インターネットを単なるデータの集合から知識のデータベースに
進化させようという試みがセマンティック Web である。
出展)IT用語辞典 e-Words
©aratana Inc. 3
- 4. 宣言文で表示が変わる?
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
- 5. クローラーにやさしく
閲覧者が クロー
見やすい ラー見や
すい
内容がよ クロー
くわかる ラー理解
構成 できる
宣言文と 構文意識
か意識し する
ない
©aratana Inc. 5
- 6. クローラーに理解しやすく
XHTML1.0 HTML5
ここが
<div id=“header”> <header> 見出し部
分
<div <div id=“content”> <nav> <section>
id=“navi”> ここに
<div id=“content_entry”> <article>
記事があ
る
<div id=“content_entry”> <article>
<div id=“content_entry”> <article>
<div id=“footer”> <footer>
ここが
フッター
ふむふむ
©aratana Inc. 6
- 7. クローラーが精度の高い情報を持って帰ってくれる。
検索精度
UP !!
HTML5
<header>
SERP
<nav> <section>
<article>
<article>
検索情報 DB
<article>
<footer>
©aratana Inc. 7
- 8. お願い Google !
そちらにわかりやすい情報を
提供しているのだから
他のサイトと差別化してほしい
©aratana Inc. 8
- 10. 上から目線
じゃあもっと詳しい情報くれたら
差別化してあげてもいいよ。
©aratana Inc. 10
- 11. こんなふうに
=レビュー =音楽・ビデオ
=人物
=イベント
=レシピ
=商品
=ソフトウェア
=著作者 リッチスニペッ
トにするね
©aratana Inc. 11
- 12. マークアップ形式
詳しい情報を提供するには?
microdata (Google 推奨 )
microformat
RDFa 2011-06-02
一本化できてる様子も
ないし、 Yahoo !や
共同で開発・サポート
Bing の動きも遅いなぁ することを発表
。
©aratana Inc. 12
- 13. 結局そうだよね。
アラタナサイトでは
microdata を採用することにしました
。
©aratana Inc. 13
- 14. マークアップ!
アラタナサイトでは
メンバーページを「人物」
全ページを「ぱんくず」で
マークアップすることにしました。
©aratana Inc. 14
- 16. 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>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" >
<a itemprop="url" href="/member/"><span itemprop="title"> メンバー紹介
</span></a></li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" >
<a itemprop="url" href="/member/detail.php?id=45"><strong itemprop="title"> 穂満
一成 </strong></a></li></ul></nav>
©aratana Inc. 16
- 18. 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
- 20. 反映確認
マークアップして
から 1 ~ 2 週間で
反映されました。
©aratana Inc. 20
- 21. もう少しがんばります。
Google + と連携させてプロフィール写真も表示できる!
©aratana Inc. 21
- 22. 今更ですけど
で?
©aratana Inc. 22
- 24. そりゃそうだ
星の数あるネットショップの中から
いかにお客様のショップを優先的に
クリックしてもらえるかを考えます
©aratana Inc. 24
- 26. 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
- 27. ですよね
アイトラッキングによる検証では
リッチスニペットに視線が集まることが分かった!
ネットショップで、レビューのリッチスニペット
表示で
検索結果での CTR が 5% 上がった!
検索結果 2 位の状態で、 21.52% ⇒ 26.32%
出展)英国の SEO コンサルティング会社、 SEOgadgetの Richard Boxer (リチャード・ボクサー)氏による「レビュー リッチスニペット」をテーマにした
プレゼンテーションより
©aratana Inc. 27
- 28. SEO = SERP 上位表示 + CTR
検索結果からいかに自分のサイトが
クリックされるように工夫するか?
©aratana Inc. 28
- 29. セマンティック Web
XHTML -> HTML5
コーディングはレイアウトする
コーディングは意味をもたせる
©aratana Inc. 29