• Like
  • Save
HTML5構造化によるセマンティックWebがSEOに与える影響
Upcoming SlideShare
Loading in...5
×

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

  • 2,801 views
Uploaded on

2013年2月10日 HTML5カンファレンス宮崎での講演内容

2013年2月10日 HTML5カンファレンス宮崎での講演内容

More in: Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post
    Be the first to comment
No Downloads

Views

Total Views
2,801
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
0
Comments
0
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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> 株式会社アラタナ &nbsp; 取締役 </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>&nbsp; 取締役 </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