More Related Content
Similar to HTML5構造化によるセマンティックWebがSEOに与える影響 (20)
More from Takami Kazuya (20)
Recently uploaded (9)
HTML5構造化によるセマンティックWebがSEOに与える影響
- 1. 株式会社アラタナ HTML5 構造化によるセマンティック Web が SEO に与える影響 品質管理チーム：高見 〒 880-0811 宮崎県宮崎市錦町 1-10 宮崎グリーンスフィア壱番館 ５階 ©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
- 9. さすが Google ！ いいよ ©aratana Inc. 9
- 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
- 15. Microdata - Breadcrumb ©aratana Inc. 15
- 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
- 17. Microdata - Person ©aratana Inc. 17
- 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
- 19. リッチスニペットマークアップ確認 穂満一成 SERP ❏ Web マスターツールで確認 ©aratana Inc. 19
- 20. 反映確認 マークアップして から 1 ～ 2 週間で 反映されました。 ©aratana Inc. 20
- 21. もう少しがんばります。 Google + と連携させてプロフィール写真も表示できる！ ©aratana Inc. 21
- 22. 今更ですけど で？ ©aratana Inc. 22
- 23. 宮崎で赤いアツい会社、アラタナ！ アラタナはネットショップの 今と未来をアツくする会社です。 ©aratana Inc. 23
- 24. そりゃそうだ 星の数あるネットショップの中から いかにお客様のショップを優先的に クリックしてもらえるかを考えます ©aratana Inc. 24
- 25. そりゃそうだそりゃそうだ それは他より目立つこと！ ©aratana Inc. 25
- 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
- 30. ARATANA × Google ご清聴ありがとうございまし た。 ©aratana Inc. 30