Mobile SEO (Japanese Version)
•Download as PPTX, PDF•
1 like•452 views
以下の内容を含みます。 ・モバイルSEOを取り巻く背景、課題 ・モバイルSEOの具体的な対策方法
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Mobile SEO (Japanese Version)
Similar to Mobile SEO (Japanese Version) (20)
Recently uploaded
Recently uploaded (7)
Mobile SEO (Japanese Version)
- 2. 目次 • 本セミナーの目的 • 背景 • 課題 – Googleの課題 – Webサイト運営者の課題 • モバイルSEO対策
- 3. 本セミナーの目的 • ターゲット – Webディレクター – Webマーケッター – Webエンジニア – Webデザイナー • ゴール モバイルサイトのSEOについて 必要な知識を理解し、対策を実行できる
- 5. デバイス別 ネット利用時間 Insights from KPCB US and global internet trends 2015 http://www.kpcb.com/internet-trends • 一日のネット利用時間は約5.6時間（2015年） • 51％の時間をモバイルが占める • モバイルの利用率は７年で約4.3倍に拡大
- 6. ネット利用におけるデバイス使用率 Comscore “Share of Demographic Audiences by Platform Usage” https://www.comscore.com/ • 複数種類のデバイスを利用する人が大多数（＞60%）を占める • モバイル端末だけ使用する人も増加傾向にある
- 7. 情報検索件数 ２０１５年 情報検索件数 モバイル端末 ＞ PC Mobile Search Tops at Google (Wall Street Journal) http://blogs.wsj.com/digits/2015/10/08/google-says-mobile-searches-surpass-those-on-pcs/
- 8. Googleの課題 モバイル端末からの検索に適したアルゴリズムを いかに検索エンジンに取り込むべきか？ これをしないと、モバイル端末からの情報検索に適した 検索エンジンサービスを提供する競合他社に負ける Googleの売上の77%を 検索連動型広告（AdWords）が占めるため、 大きな事業リスクとなる The Business of Google http://www.investopedia.com/articles/investing/020515/business-google.asp
- 12. 目次 • 本セミナーの目的 • 背景 • 課題 – Googleの課題 – Webサイト運営者の課題 • モバイルSEO対策
- 17. How? • Mobile Website実装方法 シェアの しやすさ 更新の手間 サイズ レスポンシブ ◯ 同じURL ◯ 更新が楽 ☓ CSSのサイズ が大きくなる UserAgent による切り替 え ◯ 同じURL ☓ 更新が手間 異なるファイル ◯ サイズの最小 化が可能 モバイル／PC でURLを分ける ☓ 異なるURL ☓ 更新が手間 異なるファイル ◯ サイズの最小 化が可能 ← これがオススメ！ 「リンクをシェアしやすい」、「更新がしやすい」 「同一の情報を多様なデバイスに提供可能」 なレスポンシブデザインが推奨されている
- 19. W3C “One Web” 情報 新しいモバイルデバイスが出現しても。。。 New Device?
- 21. How? • Mobile Website実装方法 シェアの しやすさ 更新の手間 サイズ レスポンシブ ◯ 同じURL ◯ 更新が楽 ☓ CSSのサイズ が大きくなる UserAgent による切り替 え ◯ 同じURL ☓ 更新が手間 異なるファイル ◯ サイズの最小 化が可能 モバイル／PC でURLを分ける ☓ 異なるURL ☓ 更新が手間 異なるファイル ◯ サイズの最小 化が可能 ← これがオススメ！ 「リンクをシェアしやすい」、「更新がしやすい」 「同一の情報を多様なデバイスに提供可能」 なレスポンシブデザインが推奨されている
- 23. 分かりやすいサイト • 分かりやすい「サイト構造」 • 分かりやすい「ページ構造」 • 分かりやすい「ページデザイン」
- 24. 分かりやすいサイト • Destination First – 「最短で目的の情報を獲得できる仕組み」 • モバイルサイト設計２５の指針 「モバイルサイトの設計の指針」（Google） https://services.google.com/fh/files/blogs/principles-of-mobile-site-design-ja.pdf これらをヒントに分かりやすい 「サイト構造」、「ページ構造」、「ページデザイン」に する必要がある。
- 26. ツリー構造 • ３〜４階層までに留める ３〜４クリックで目的の情報に たどり着けるように設計する • クローラビリティの 向上にもなる Working with Site Maps https://docs.balsamiq.com/desktop/sitemaps/
- 27. サイトマップの作成 • 目的の情報を探しやすい • 付随した情報にも目が触れやすい • クローラビリティの向上にもなる サイトの全体像を把握できる Rakuten Global http://global.rakuten.com/corp/
- 29. 分かりやすい「ページ構造」 • CALL To Action • 短く簡潔なメニューを作成 • ホームへ簡単に戻れるようにする • 並べるより重ねる
- 30. CALL TO ACTION CVR導線は分かりやすく、 目立つように配置 Pizza Hut https://www.pizzahut.com/#/home
- 31. 短く簡潔なメニュー • シンプルな文言 SEOを意識しすぎな文言にしない。 例： 「SEOセミナービジネスを提供するサイト」 SEOセミナー → セミナー SEOセミナーお問い合わせ →お問い合わせ • 必要最小限の数にする あまりに多いとメニューが画面を覆い尽くすので ユーザビリティが悪くなるだけでなく、 Googlebotからも嫌われる。
- 32. ホームへ簡単に戻れるようにする • 左上のロゴクリックでホーム遷移 • 全ページにホームのリンクを掲載 • グローバルナビの設置 • パン屑の設置 • ページ内リンク Dominos Pizza https://www.dominos.com/ Amazon.com https://www.amazon.com
- 34. 並べるより重ねる • モバイル端末は画面が小さい • 情報を並べると沢山フリックを要する • 情報を重ねると目的の情報に辿り付きやすい →タブや開閉メニューの活用 →JSよりはCSSで実現したほうがよい 。 。 フリックが大変 タブメニュー 開閉メニュー 並べて表示 重ねて表示 小さな画面の中で効率的に情報を配置する 本の目次の様に LIG inc https://liginc.co.jp/designer/archives/7456
- 36. モバイルフレンドリーの条件 ①Flashなどのモバイルで一般的でないソフトを使わない ②ズームしなくても判読できるテキストを使用する ③コンテンツサイズが画面サイズと一致している – ビューポートを設定する – 固定幅のビューポートにしない – コンテンツのサイズをビューポートに対応する ④タップしやすいようにリンク間が十分に離れた状態に配置する “Helping users find mobile-friendly pages” （Google Webmaster Central Blog ） https://webmasters.googleblog.com/2014/11/helping-users-find-mobile-friendly-pages.html
- 37. ズームしなくても判読できる テキストを使用する 1. 16CSS pixelの基本フォントサイズを使用 2. 基本サイズに対する相対的なサイズを用い て、拡大縮小を定義 3. 行間のデフォルトは1.2emを推奨 4. 使用フォントの数と拡大縮小を制限する “Use Large Font Size”（Google Developers ） https://developers.google.com/speed/docs/insights/UseLegibleFontSizes?hl=en
- 38. 適切なViewport設定をする <meta name="viewport" content="width=devic e-width,initial- scale=1"> BOOTSTRAP’S RESPONSIVE LAYOUT(M5 Design Studio) http://m5designstudio.com/2013/orlando-web-design/bootstrap-responsive-layout/ ブラウザにモバイル端末向けのコンテンツを提示させるための設定をする 「Viewport設定」 ブラウザに描画エリアのサイズを 伝えるための設定
- 39. タップしやすいようにリンク間が十分 に離れた状態に配置する • タップ領域の最小の推奨サイズは 約７mm(48 css px) • リンク間に5mm(32px)以上のスペースを確保 • ズームする必要がないようにする Size Tap Targets Appropriately（Google Developers） https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately?hl=en
- 40. モバイルフレンドリーチェック Mobile-Friendly Test（Google Search Console） https://search.google.com/search-console/mobile-friendly?hl=en
- 41. Device View Chrome DevTools Overview https://developer.chrome.com/devtools 目視でも確認すべし！ 目的はGooglebotに 気に入られることではなく、 ユーザーに気に入られること
- 43. 速く提供する • トランザクションを減らす • コード量を減らす • 装飾に画像を使わない • 適切な画像フォーマットを使う • リソースを圧縮する • チェックツールを活用する
- 44. トランザクションを減らす • 画像をまとめてダウンロードする • キャッシュを使う • インラインCSSを使う
- 45. 画像をまとめてダウンロードする • CSS Sprites を使う – 一度に画像をダウロードして 画像を切り出して使う – トランザクションが減る CSS Sprites Generator http://csssprites.com/ Amazon Sprites http://g-ecx.images-amazon.com/images/G/01/common /sprites/sprite-site-wide-2._CB146303866_.png
- 46. キャッシュを使う • キャッシュの設定でトランザクションを減らす • 画像は２日、CSS/JS/htmlは３日キャッシュの の有効期限を設定する.htacess設定例 <Files ? “¥. (gif|jpe?g|png|ico)$”> Header set Cache-Control “max-age=17200, public” </Files> <Files ? “”¥. (css|js|html) $”> Header set Cache-Control “max-age=86400, public” </Files>
- 47. インラインCSSを使う • CSSをHTMLに埋め込み、 CSSファイルのトランザクションを減らす • ファーストビュー、LPなど 特に速い表示スピードが求められている所で活用する Critical Path CSS Generator https://jonassebastianohlsson.com/criticalpathcssgenerator/
- 48. コード量を減らす • モバイルベースの設計をする – PCベースで設計すると CSSで定義、定義のキャンセルが必要になる – モバイルベースで作成すると CSS定義を追加するだけで済む。 • Bodyでの装飾はしない • Styleを使わない – CSSの重複定義を引き起こしやすい #navigation {float: left;} … ... /*Smartphone*/ @media only screen and (max-wdth: 360px){ #navigation{float:none} } #navigation {….} … ... /*PC*/ @media only screen and (min-width: 961px){ #navigation{float:left} }
- 49. 装飾に画像を使わない CSS3 Patterns Gallery http://lea.verou.me/css3patterns/ <i class="fa fa-facebook-official" aria-hidden="true"></i> Font Awesome http://fontawesome.io/ 重たい画像を使わないことでサイトを軽量化する
- 50. 適切な画像フォーマットを使う “Image Optimization”(Google Developers ) https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image- optimization?hl=en アニメーション 必要？ 高解像 度必要？ ２５６色以上 必要？ JPEG PNG-8 PNG-24 GIF Yes No No No Yes Yes
- 51. リソースを圧縮する • 画像圧縮 – JPEGmini, tinypng etc • テキストリソース（HTML、CSS etc）の圧縮 – DigitalCoding.Com etc http://www.digitalcoding.com/
- 52. チェックツールを活用する • ダウンロードスピードチェック • ユーザビリティチェック • コードチェック 改善のヒントを得る
- 53. ダウンロードスピード チェック Page Speed Insights https://developers.google.com/speed/pagespeed/insights/?hl=en
- 54. ユーザービリティ チェック Google Search Console https://www.google.com/webmasters/tools/home?hl=ja
- 55. コード チェック W3C Markup Validation Service https://validator.w3.org/
- 59. HTML5のセマンティック要素の活用 • header → ヘッダー • section → 節（自己完結できないエリア） • article → 自己完結できるエリア • nav → ナビゲーション • footer → ページ下部 • aside → 補足情報 W3C Schools “HTML5 Semantic Elements” https://www.w3schools.com/html/html5_semantic_elements.asp Before: <div id=“header”></div> After: <header></header> example HTMLの要素の意味合いを、よりクローラーに伝えることができる
- 60. 適切なタイトルと デスクリプションの設定 • PCとモバイル端末で 検索結果タイトルとデスクリプションの 表示文字数が異なる • タイトルは７０文字程度、 デスクリプションは１００文字程度 最初の１００字で訴求力の高い文章を入れる New Title & Description Lengths for Google SEO in Search Results http://www.thesempost.com/new-title-description-lengths-for-google-seo/
- 62. 参考文献 • モバイルファーストSEO Web標準の変革に対応したサイト制作（著 瀧内 賢 ） • これからのSEO内部対策 本格講座 (著 瀧内 賢) • いちばんやさしいリスティング広告の教本 人気講師が教える利益を生むネット広告の作り方 （著 阿部 圭司, 岡田 吉弘, 寳 洋平 ） • 「Eコマース」の利用状況を発表」(ニールセン) http://www.nielsen.com/jp/ja/press-room/2015/nielsen-pressrelease-201508252.html • 2015年のスマートフォン広告市場規模は3,717億円、前年比123.6％ 2020年の市場規模は2015年の約2倍、7,527億円と 予測（CyberZ） https://cyber-z.co.jp/news/research/2016/0420_3573.html • Insights from KPCB US and global internet trends 2015 http://www.kpcb.com/internet-trends • Comscore “Share of Demographic Audiences by Platform Usage” https://www.comscore.com/ • Mobile Search Tops at Google (Wall Street Journal) http://blogs.wsj.com/digits/2015/10/08/google-says-mobile-searches-surpass-those-on-pcs/ • The Business of Google http://www.investopedia.com/articles/investing/020515/business-google.asp • 「モバイルサイトの設計の指針」（Google） https://services.google.com/fh/files/blogs/principles-of-mobile-site-design-ja.pdf • “Helping users find mobile-friendly pages” （Google Webmaster Central Blog ） https://webmasters.googleblog.com/2014/11/helping-users-find-mobile-friendly-pages.html
- 63. 参考文献 • Size Tap Targets Appropriately（Google Developers） https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately?hl=en • “Use Large Font Size”（Google Developers ） https://developers.google.com/speed/docs/insights/UseLegibleFontSizes?hl=en • Mobile-Friendly Test（Google Search Console） https://search.google.com/search-console/mobile-friendly?hl=en • Chrome DevTools Overview(Chrome Developer Tools) https://developer.chrome.com/devtools • “Image Optimization”(Google Developers ) https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization?hl=en • W3C Schools “HTML5 Semantic Elements” https://www.w3schools.com/html/html5_semantic_elements.asp • New Title & Description Lengths for Google SEO in Search Results http://www.thesempost.com/new-title-description-lengths-for-google-seo/