SlideShare a Scribd company logo
1 of 30
株式会社アラタナ


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




                                          〒 880-0811
                                          宮崎県宮崎市錦町 1-10
                                          宮崎グリーンスフィア壱番館
                                          5階
©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=“content_entry”>              <article>




                      <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>
  <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
Microdata - Person




©aratana Inc.          17
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
リッチスニペットマークアップ確認


                  穂満一成



                       SERP




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




©aratana Inc.                      19
反映確認




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




©aratana Inc.                  20
もう少しがんばります。




        Google + と連携させてプロフィール写真も表示できる!




©aratana Inc.                            21
今更ですけど




                で?




©aratana Inc.        22
宮崎で赤いアツい会社、アラタナ!




            アラタナはネットショップの
           今と未来をアツくする会社です。




©aratana Inc.                23
そりゃそうだ




       星の数あるネットショップの中から
       いかにお客様のショップを優先的に
       クリックしてもらえるかを考えます




©aratana Inc.             24
そりゃそうだそりゃそうだ




                それは他より目立つこと!




©aratana Inc.                  25
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
SEO = SERP 上位表示 + CTR




      検索結果からいかに自分のサイトが
      クリックされるように工夫するか?




©aratana Inc.             28
セマンティック Web




                   XHTML -> HTML5

                コーディングはレイアウトする


                コーディングは意味をもたせる



©aratana Inc.                       29
ARATANA × Google




         ご清聴ありがとうございまし
               た。



©aratana Inc.            30

More Related Content

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

Html5でできること。そこからwebの未来を考える。
Html5でできること。そこからwebの未来を考える。Html5でできること。そこからwebの未来を考える。
Html5でできること。そこからwebの未来を考える。Masakazu Muraoka
 
20170111 超高速開発コミュニティ 新春LT
20170111 超高速開発コミュニティ 新春LT 20170111 超高速開発コミュニティ 新春LT
20170111 超高速開発コミュニティ 新春LT Keisuke Hikita
 
Javaアプリケーションの モダナイゼーションアプローチ
Javaアプリケーションの モダナイゼーションアプローチJavaアプリケーションの モダナイゼーションアプローチ
Javaアプリケーションの モダナイゼーションアプローチCData Software Japan
 
Excel × Google BigQuery CData Driver で BigQuery とのデータ連携を実現
Excel × Google BigQuery  CData Driver で BigQuery とのデータ連携を実現Excel × Google BigQuery  CData Driver で BigQuery とのデータ連携を実現
Excel × Google BigQuery CData Driver で BigQuery とのデータ連携を実現CData Software Japan
 
Java クライント実装におけるAPIスタイル頂上決戦! 野良REST vs GraphQL vs OData vs OpenAPI (Swagger)
Java クライント実装におけるAPIスタイル頂上決戦! 野良REST vs GraphQL vs OData vs OpenAPI (Swagger)Java クライント実装におけるAPIスタイル頂上決戦! 野良REST vs GraphQL vs OData vs OpenAPI (Swagger)
Java クライント実装におけるAPIスタイル頂上決戦! 野良REST vs GraphQL vs OData vs OpenAPI (Swagger)Kazuya Sugimoto
 
「私のkintone 連携には何が最適?」CData Software ソリューションを使うケースは?
「私のkintone 連携には何が最適?」CData Software ソリューションを使うケースは?「私のkintone 連携には何が最適?」CData Software ソリューションを使うケースは?
「私のkintone 連携には何が最適?」CData Software ソリューションを使うケースは?CData Software Japan
 
Automation with SoftLayer and Zabbix
Automation with SoftLayer and ZabbixAutomation with SoftLayer and Zabbix
Automation with SoftLayer and Zabbixsoftlayerjp
 
CData Sync × Google BigQuery 3ステップで各データソースとのデータ連携を実現
CData Sync × Google BigQuery  3ステップで各データソースとのデータ連携を実現CData Sync × Google BigQuery  3ステップで各データソースとのデータ連携を実現
CData Sync × Google BigQuery 3ステップで各データソースとのデータ連携を実現CData Software Japan
 
Wagby で100+ のクラウドデータに連携するアプリを開発(CData JDBC Drivers)
Wagby で100+ のクラウドデータに連携するアプリを開発(CData JDBC Drivers)Wagby で100+ のクラウドデータに連携するアプリを開発(CData JDBC Drivers)
Wagby で100+ のクラウドデータに連携するアプリを開発(CData JDBC Drivers)CData Software Japan
 
Sendai it commune 03 スポーツジムとダンベルと連携ソリューションとCData
Sendai it commune 03 スポーツジムとダンベルと連携ソリューションとCDataSendai it commune 03 スポーツジムとダンベルと連携ソリューションとCData
Sendai it commune 03 スポーツジムとダンベルと連携ソリューションとCDataCData Software Japan
 
ODBC/JDBC/ADOでつながる kintoneの世界
ODBC/JDBC/ADOでつながるkintoneの世界ODBC/JDBC/ADOでつながるkintoneの世界
ODBC/JDBC/ADOでつながる kintoneの世界CData Software Japan
 
kintoneのデータをSQLで操作!? ~Drivers/Gateway/Sync 徹底比較~
kintoneのデータをSQLで操作!? ~Drivers/Gateway/Sync 徹底比較~kintoneのデータをSQLで操作!? ~Drivers/Gateway/Sync 徹底比較~
kintoneのデータをSQLで操作!? ~Drivers/Gateway/Sync 徹底比較~CData Software Japan
 
API はメタデータを提供せよ LT#1 JJUG_CCC2018
API はメタデータを提供せよ LT#1 JJUG_CCC2018API はメタデータを提供せよ LT#1 JJUG_CCC2018
API はメタデータを提供せよ LT#1 JJUG_CCC2018CData Software Japan
 
db tech showcase2019 オープニングセッション @ 石川 雅也
db tech showcase2019 オープニングセッション @ 石川 雅也db tech showcase2019 オープニングセッション @ 石川 雅也
db tech showcase2019 オープニングセッション @ 石川 雅也Insight Technology, Inc.
 
ZOZO前澤社長お年玉リツイート企画のビッグデータに立ち向かう方法 -Twitterのビッグデータを分析するために、実際にやってみてわかった嵌りポイントと...
ZOZO前澤社長お年玉リツイート企画のビッグデータに立ち向かう方法 -Twitterのビッグデータを分析するために、実際にやってみてわかった嵌りポイントと...ZOZO前澤社長お年玉リツイート企画のビッグデータに立ち向かう方法 -Twitterのビッグデータを分析するために、実際にやってみてわかった嵌りポイントと...
ZOZO前澤社長お年玉リツイート企画のビッグデータに立ち向かう方法 -Twitterのビッグデータを分析するために、実際にやってみてわかった嵌りポイントと...Kazuya Sugimoto
 
FastViewによるwebの自動最適化とビジネスメリット
FastViewによるwebの自動最適化とビジネスメリットFastViewによるwebの自動最適化とビジネスメリット
FastViewによるwebの自動最適化とビジネスメリットNihonRadware
 

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

Html5でできること。そこからwebの未来を考える。
Html5でできること。そこからwebの未来を考える。Html5でできること。そこからwebの未来を考える。
Html5でできること。そこからwebの未来を考える。
 
CData Drivers for PCA 概要
CData Drivers for PCA 概要CData Drivers for PCA 概要
CData Drivers for PCA 概要
 
20170111 超高速開発コミュニティ 新春LT
20170111 超高速開発コミュニティ 新春LT 20170111 超高速開発コミュニティ 新春LT
20170111 超高速開発コミュニティ 新春LT
 
Javaアプリケーションの モダナイゼーションアプローチ
Javaアプリケーションの モダナイゼーションアプローチJavaアプリケーションの モダナイゼーションアプローチ
Javaアプリケーションの モダナイゼーションアプローチ
 
Excel × Google BigQuery CData Driver で BigQuery とのデータ連携を実現
Excel × Google BigQuery  CData Driver で BigQuery とのデータ連携を実現Excel × Google BigQuery  CData Driver で BigQuery とのデータ連携を実現
Excel × Google BigQuery CData Driver で BigQuery とのデータ連携を実現
 
Java クライント実装におけるAPIスタイル頂上決戦! 野良REST vs GraphQL vs OData vs OpenAPI (Swagger)
Java クライント実装におけるAPIスタイル頂上決戦! 野良REST vs GraphQL vs OData vs OpenAPI (Swagger)Java クライント実装におけるAPIスタイル頂上決戦! 野良REST vs GraphQL vs OData vs OpenAPI (Swagger)
Java クライント実装におけるAPIスタイル頂上決戦! 野良REST vs GraphQL vs OData vs OpenAPI (Swagger)
 
「私のkintone 連携には何が最適?」CData Software ソリューションを使うケースは?
「私のkintone 連携には何が最適?」CData Software ソリューションを使うケースは?「私のkintone 連携には何が最適?」CData Software ソリューションを使うケースは?
「私のkintone 連携には何が最適?」CData Software ソリューションを使うケースは?
 
Automation with SoftLayer and Zabbix
Automation with SoftLayer and ZabbixAutomation with SoftLayer and Zabbix
Automation with SoftLayer and Zabbix
 
20180319 ccon sync kintone
20180319 ccon sync kintone20180319 ccon sync kintone
20180319 ccon sync kintone
 
CData Sync × Google BigQuery 3ステップで各データソースとのデータ連携を実現
CData Sync × Google BigQuery  3ステップで各データソースとのデータ連携を実現CData Sync × Google BigQuery  3ステップで各データソースとのデータ連携を実現
CData Sync × Google BigQuery 3ステップで各データソースとのデータ連携を実現
 
Wagby で100+ のクラウドデータに連携するアプリを開発(CData JDBC Drivers)
Wagby で100+ のクラウドデータに連携するアプリを開発(CData JDBC Drivers)Wagby で100+ のクラウドデータに連携するアプリを開発(CData JDBC Drivers)
Wagby で100+ のクラウドデータに連携するアプリを開発(CData JDBC Drivers)
 
CData Drivers HandsOn 20180326
CData Drivers HandsOn 20180326CData Drivers HandsOn 20180326
CData Drivers HandsOn 20180326
 
Sendai it commune 03 スポーツジムとダンベルと連携ソリューションとCData
Sendai it commune 03 スポーツジムとダンベルと連携ソリューションとCDataSendai it commune 03 スポーツジムとダンベルと連携ソリューションとCData
Sendai it commune 03 スポーツジムとダンベルと連携ソリューションとCData
 
ODBC/JDBC/ADOでつながる kintoneの世界
ODBC/JDBC/ADOでつながるkintoneの世界ODBC/JDBC/ADOでつながるkintoneの世界
ODBC/JDBC/ADOでつながる kintoneの世界
 
kintoneのデータをSQLで操作!? ~Drivers/Gateway/Sync 徹底比較~
kintoneのデータをSQLで操作!? ~Drivers/Gateway/Sync 徹底比較~kintoneのデータをSQLで操作!? ~Drivers/Gateway/Sync 徹底比較~
kintoneのデータをSQLで操作!? ~Drivers/Gateway/Sync 徹底比較~
 
API はメタデータを提供せよ LT#1 JJUG_CCC2018
API はメタデータを提供せよ LT#1 JJUG_CCC2018API はメタデータを提供せよ LT#1 JJUG_CCC2018
API はメタデータを提供せよ LT#1 JJUG_CCC2018
 
db tech showcase2019 オープニングセッション @ 石川 雅也
db tech showcase2019 オープニングセッション @ 石川 雅也db tech showcase2019 オープニングセッション @ 石川 雅也
db tech showcase2019 オープニングセッション @ 石川 雅也
 
CData API Server ハンズオン
CData API Server ハンズオンCData API Server ハンズオン
CData API Server ハンズオン
 
ZOZO前澤社長お年玉リツイート企画のビッグデータに立ち向かう方法 -Twitterのビッグデータを分析するために、実際にやってみてわかった嵌りポイントと...
ZOZO前澤社長お年玉リツイート企画のビッグデータに立ち向かう方法 -Twitterのビッグデータを分析するために、実際にやってみてわかった嵌りポイントと...ZOZO前澤社長お年玉リツイート企画のビッグデータに立ち向かう方法 -Twitterのビッグデータを分析するために、実際にやってみてわかった嵌りポイントと...
ZOZO前澤社長お年玉リツイート企画のビッグデータに立ち向かう方法 -Twitterのビッグデータを分析するために、実際にやってみてわかった嵌りポイントと...
 
FastViewによるwebの自動最適化とビジネスメリット
FastViewによるwebの自動最適化とビジネスメリットFastViewによるwebの自動最適化とビジネスメリット
FastViewによるwebの自動最適化とビジネスメリット
 

More from Takami Kazuya

HTML栄枯盛衰は世の習い
HTML栄枯盛衰は世の習いHTML栄枯盛衰は世の習い
HTML栄枯盛衰は世の習いTakami Kazuya
 
Google Apps Script 入門
Google Apps Script 入門Google Apps Script 入門
Google Apps Script 入門Takami Kazuya
 
GoogleAppsScript入門
GoogleAppsScript入門GoogleAppsScript入門
GoogleAppsScript入門Takami Kazuya
 
Googleデータポータルで見える化に挑戦vol.2
Googleデータポータルで見える化に挑戦vol.2Googleデータポータルで見える化に挑戦vol.2
Googleデータポータルで見える化に挑戦vol.2Takami Kazuya
 
WordPressで考えるこれからのコンテンツ制作
WordPressで考えるこれからのコンテンツ制作WordPressで考えるこれからのコンテンツ制作
WordPressで考えるこれからのコンテンツ制作Takami Kazuya
 
WordPressをこれから始める人のためのテーマ講座
WordPressをこれから始める人のためのテーマ講座WordPressをこれから始める人のためのテーマ講座
WordPressをこれから始める人のためのテーマ講座Takami Kazuya
 
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016Takami Kazuya
 
WordPress + JSON-LDで構造化するこれからのマークアップ
WordPress + JSON-LDで構造化するこれからのマークアップWordPress + JSON-LDで構造化するこれからのマークアップ
WordPress + JSON-LDで構造化するこれからのマークアップTakami Kazuya
 
jQuery3.0-beta1-point
jQuery3.0-beta1-pointjQuery3.0-beta1-point
jQuery3.0-beta1-pointTakami Kazuya
 
プラグイン公開までの道のり
プラグイン公開までの道のりプラグイン公開までの道のり
プラグイン公開までの道のりTakami Kazuya
 
WordPress widget api
WordPress widget apiWordPress widget api
WordPress widget apiTakami Kazuya
 
React Facebook JavaScript Library
React Facebook JavaScript LibraryReact Facebook JavaScript Library
React Facebook JavaScript LibraryTakami Kazuya
 
Wordpress カスタム投稿
Wordpress カスタム投稿Wordpress カスタム投稿
Wordpress カスタム投稿Takami Kazuya
 
WordPressプラグインの作り方
WordPressプラグインの作り方WordPressプラグインの作り方
WordPressプラグインの作り方Takami Kazuya
 
【WordBench宮崎】第3回・4回アンケート報告
【WordBench宮崎】第3回・4回アンケート報告【WordBench宮崎】第3回・4回アンケート報告
【WordBench宮崎】第3回・4回アンケート報告Takami Kazuya
 
WordPressプラグイン考察
WordPressプラグイン考察WordPressプラグイン考察
WordPressプラグイン考察Takami Kazuya
 
WordPressテーマ作成
WordPressテーマ作成WordPressテーマ作成
WordPressテーマ作成Takami Kazuya
 

More from Takami Kazuya (20)

HTML栄枯盛衰は世の習い
HTML栄枯盛衰は世の習いHTML栄枯盛衰は世の習い
HTML栄枯盛衰は世の習い
 
Google Apps Script 入門
Google Apps Script 入門Google Apps Script 入門
Google Apps Script 入門
 
GoogleAppsScript入門
GoogleAppsScript入門GoogleAppsScript入門
GoogleAppsScript入門
 
Googleデータポータルで見える化に挑戦vol.2
Googleデータポータルで見える化に挑戦vol.2Googleデータポータルで見える化に挑戦vol.2
Googleデータポータルで見える化に挑戦vol.2
 
WordPressで考えるこれからのコンテンツ制作
WordPressで考えるこれからのコンテンツ制作WordPressで考えるこれからのコンテンツ制作
WordPressで考えるこれからのコンテンツ制作
 
WordPressをこれから始める人のためのテーマ講座
WordPressをこれから始める人のためのテーマ講座WordPressをこれから始める人のためのテーマ講座
WordPressをこれから始める人のためのテーマ講座
 
WordPress+AMP
WordPress+AMPWordPress+AMP
WordPress+AMP
 
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
 
WordPress + JSON-LDで構造化するこれからのマークアップ
WordPress + JSON-LDで構造化するこれからのマークアップWordPress + JSON-LDで構造化するこれからのマークアップ
WordPress + JSON-LDで構造化するこれからのマークアップ
 
jQuery3.0-beta1-point
jQuery3.0-beta1-pointjQuery3.0-beta1-point
jQuery3.0-beta1-point
 
プラグイン公開までの道のり
プラグイン公開までの道のりプラグイン公開までの道のり
プラグイン公開までの道のり
 
History api
History apiHistory api
History api
 
WordPress widget api
WordPress widget apiWordPress widget api
WordPress widget api
 
Miyazaki.js vol.2
Miyazaki.js vol.2Miyazaki.js vol.2
Miyazaki.js vol.2
 
React Facebook JavaScript Library
React Facebook JavaScript LibraryReact Facebook JavaScript Library
React Facebook JavaScript Library
 
Wordpress カスタム投稿
Wordpress カスタム投稿Wordpress カスタム投稿
Wordpress カスタム投稿
 
WordPressプラグインの作り方
WordPressプラグインの作り方WordPressプラグインの作り方
WordPressプラグインの作り方
 
【WordBench宮崎】第3回・4回アンケート報告
【WordBench宮崎】第3回・4回アンケート報告【WordBench宮崎】第3回・4回アンケート報告
【WordBench宮崎】第3回・4回アンケート報告
 
WordPressプラグイン考察
WordPressプラグイン考察WordPressプラグイン考察
WordPressプラグイン考察
 
WordPressテーマ作成
WordPressテーマ作成WordPressテーマ作成
WordPressテーマ作成
 

Recently uploaded

株式会社ベクトル総研会社概要 Vector Research Institute (VRI) Corporate Profile
株式会社ベクトル総研会社概要 Vector Research Institute (VRI) Corporate Profile株式会社ベクトル総研会社概要 Vector Research Institute (VRI) Corporate Profile
株式会社ベクトル総研会社概要 Vector Research Institute (VRI) Corporate Profilevrihomepage
 
株式会社AllAdsと申します。サービス紹介資料で御座いますので、是非ご覧くださいませ。
株式会社AllAdsと申します。サービス紹介資料で御座いますので、是非ご覧くださいませ。株式会社AllAdsと申します。サービス紹介資料で御座いますので、是非ご覧くださいませ。
株式会社AllAdsと申します。サービス紹介資料で御座いますので、是非ご覧くださいませ。takuyamatsumoto29
 
第15回販促コンペ 審査員個人賞(林 知幸 氏) アルカナ? アディダスジャパン
第15回販促コンペ 審査員個人賞(林 知幸 氏) アルカナ? アディダスジャパン第15回販促コンペ 審査員個人賞(林 知幸 氏) アルカナ? アディダスジャパン
第15回販促コンペ 審査員個人賞(林 知幸 氏) アルカナ? アディダスジャパンYusuke Katsuma
 
hakuten_company profile for saleshub_202404
hakuten_company profile for saleshub_202404hakuten_company profile for saleshub_202404
hakuten_company profile for saleshub_202404keiibayashi
 
HCCソフト株式会社 2025年新卒採用向け 会社紹介・採用情報資料------
HCCソフト株式会社 2025年新卒採用向け 会社紹介・採用情報資料------HCCソフト株式会社 2025年新卒採用向け 会社紹介・採用情報資料------
HCCソフト株式会社 2025年新卒採用向け 会社紹介・採用情報資料------ssusercbaf23
 
株式会社フィジオ会社説明資料|採用の際の福利厚生やカルチャーなどを紹介しています
株式会社フィジオ会社説明資料|採用の際の福利厚生やカルチャーなどを紹介しています株式会社フィジオ会社説明資料|採用の際の福利厚生やカルチャーなどを紹介しています
株式会社フィジオ会社説明資料|採用の際の福利厚生やカルチャーなどを紹介していますchizurumurakami
 
chouhou_obuse_reiwa6nenn_4_2404slide.pdf
chouhou_obuse_reiwa6nenn_4_2404slide.pdfchouhou_obuse_reiwa6nenn_4_2404slide.pdf
chouhou_obuse_reiwa6nenn_4_2404slide.pdfssuser31dbd1
 
JAPAN WEB3.0 AWARD 2023 ブロックチェーン(NFT)技術を活用したアイディア 優秀賞作品 遺3.0相続
JAPAN WEB3.0 AWARD 2023 ブロックチェーン(NFT)技術を活用したアイディア 優秀賞作品 遺3.0相続JAPAN WEB3.0 AWARD 2023 ブロックチェーン(NFT)技術を活用したアイディア 優秀賞作品 遺3.0相続
JAPAN WEB3.0 AWARD 2023 ブロックチェーン(NFT)技術を活用したアイディア 優秀賞作品 遺3.0相続Yusuke Katsuma
 
HRMOS(ハーモス)タレントマネジメント_ご紹介資料_Saleshub掲載用
HRMOS(ハーモス)タレントマネジメント_ご紹介資料_Saleshub掲載用HRMOS(ハーモス)タレントマネジメント_ご紹介資料_Saleshub掲載用
HRMOS(ハーモス)タレントマネジメント_ご紹介資料_Saleshub掲載用wataruhonda3
 
ROMS_recruting_deck_for_website_20240322.pdf
ROMS_recruting_deck_for_website_20240322.pdfROMS_recruting_deck_for_website_20240322.pdf
ROMS_recruting_deck_for_website_20240322.pdfhirokisawa3
 
エンジニア採用のミスマッチを防ぐコーディング試験サービス『HireRoo(ハイヤールー)』
エンジニア採用のミスマッチを防ぐコーディング試験サービス『HireRoo(ハイヤールー)』エンジニア採用のミスマッチを防ぐコーディング試験サービス『HireRoo(ハイヤールー)』
エンジニア採用のミスマッチを防ぐコーディング試験サービス『HireRoo(ハイヤールー)』Kousuke Kuzuoka
 

Recently uploaded (12)

株式会社ベクトル総研会社概要 Vector Research Institute (VRI) Corporate Profile
株式会社ベクトル総研会社概要 Vector Research Institute (VRI) Corporate Profile株式会社ベクトル総研会社概要 Vector Research Institute (VRI) Corporate Profile
株式会社ベクトル総研会社概要 Vector Research Institute (VRI) Corporate Profile
 
株式会社AllAdsと申します。サービス紹介資料で御座いますので、是非ご覧くださいませ。
株式会社AllAdsと申します。サービス紹介資料で御座いますので、是非ご覧くださいませ。株式会社AllAdsと申します。サービス紹介資料で御座いますので、是非ご覧くださいませ。
株式会社AllAdsと申します。サービス紹介資料で御座いますので、是非ご覧くださいませ。
 
第15回販促コンペ 審査員個人賞(林 知幸 氏) アルカナ? アディダスジャパン
第15回販促コンペ 審査員個人賞(林 知幸 氏) アルカナ? アディダスジャパン第15回販促コンペ 審査員個人賞(林 知幸 氏) アルカナ? アディダスジャパン
第15回販促コンペ 審査員個人賞(林 知幸 氏) アルカナ? アディダスジャパン
 
hakuten_company profile for saleshub_202404
hakuten_company profile for saleshub_202404hakuten_company profile for saleshub_202404
hakuten_company profile for saleshub_202404
 
HCCソフト株式会社 2025年新卒採用向け 会社紹介・採用情報資料------
HCCソフト株式会社 2025年新卒採用向け 会社紹介・採用情報資料------HCCソフト株式会社 2025年新卒採用向け 会社紹介・採用情報資料------
HCCソフト株式会社 2025年新卒採用向け 会社紹介・採用情報資料------
 
株式会社フィジオ会社説明資料|採用の際の福利厚生やカルチャーなどを紹介しています
株式会社フィジオ会社説明資料|採用の際の福利厚生やカルチャーなどを紹介しています株式会社フィジオ会社説明資料|採用の際の福利厚生やカルチャーなどを紹介しています
株式会社フィジオ会社説明資料|採用の際の福利厚生やカルチャーなどを紹介しています
 
Japan IT Week 2024 Brochure by 47Billion
Japan IT Week 2024 Brochure by 47BillionJapan IT Week 2024 Brochure by 47Billion
Japan IT Week 2024 Brochure by 47Billion
 
chouhou_obuse_reiwa6nenn_4_2404slide.pdf
chouhou_obuse_reiwa6nenn_4_2404slide.pdfchouhou_obuse_reiwa6nenn_4_2404slide.pdf
chouhou_obuse_reiwa6nenn_4_2404slide.pdf
 
JAPAN WEB3.0 AWARD 2023 ブロックチェーン(NFT)技術を活用したアイディア 優秀賞作品 遺3.0相続
JAPAN WEB3.0 AWARD 2023 ブロックチェーン(NFT)技術を活用したアイディア 優秀賞作品 遺3.0相続JAPAN WEB3.0 AWARD 2023 ブロックチェーン(NFT)技術を活用したアイディア 優秀賞作品 遺3.0相続
JAPAN WEB3.0 AWARD 2023 ブロックチェーン(NFT)技術を活用したアイディア 優秀賞作品 遺3.0相続
 
HRMOS(ハーモス)タレントマネジメント_ご紹介資料_Saleshub掲載用
HRMOS(ハーモス)タレントマネジメント_ご紹介資料_Saleshub掲載用HRMOS(ハーモス)タレントマネジメント_ご紹介資料_Saleshub掲載用
HRMOS(ハーモス)タレントマネジメント_ご紹介資料_Saleshub掲載用
 
ROMS_recruting_deck_for_website_20240322.pdf
ROMS_recruting_deck_for_website_20240322.pdfROMS_recruting_deck_for_website_20240322.pdf
ROMS_recruting_deck_for_website_20240322.pdf
 
エンジニア採用のミスマッチを防ぐコーディング試験サービス『HireRoo(ハイヤールー)』
エンジニア採用のミスマッチを防ぐコーディング試験サービス『HireRoo(ハイヤールー)』エンジニア採用のミスマッチを防ぐコーディング試験サービス『HireRoo(ハイヤールー)』
エンジニア採用のミスマッチを防ぐコーディング試験サービス『HireRoo(ハイヤールー)』
 

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
  • 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
  • 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> 株式会社アラタナ &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