Mobile SEO

2017/03/14

Asuka Ishikawa

目次• 本セミナーの目的• 背景• 課題– Googleの課題– Webサイト運営者の課題

• モバイル SEO対策

本セミナーの目的• ターゲット

– Webディレクター– Webマーケッター– Webエンジニア– Webデザイナー

• ゴールモバイルサイトの SEOについて必要な知識を理解し、対策を実行できる

背景情報検索におけるパラダイムシフト

情報を検索する端末が「 PC」から「モバイル端末」へ

シフトしている

デバイス別　ネット利用時間

Insights from KPCB US and global internet trends 2015http://www.kpcb.com/internet-trends

• 一日のネット利用時間は約 5.6時間（ 2015年）• 51％の時間をモバイルが占める• モバイルの利用率は７年で約 4.3倍に拡大

ネット利用におけるデバイス使用率

Comscore “Share of Demographic Audiences by Platform Usage”https://www.comscore.com/

• 複数種類のデバイスを利用する人が大多数（＞ 60%）を占める• モバイル端末だけ使用する人も増加傾向にある

情報検索件数２０１５年情報検索件数

モバイル端末　＞　 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/

Googleの課題モバイル端末からの検索に適したアルゴリズムをいかに検索エンジンに取り込むべきか？

これをしないと、モバイル端末からの情報検索に適した検索エンジンサービスを提供する競合他社に負けるGoogleの売上の 77%を検索連動型広告（ AdWords）が占めるため、大きな事業リスクとなる

The Business of Googlehttp://www.investopedia.com/articles/investing/020515/business-google.asp

Googleの現状「Mobile Friendly」Googleが導入したモバイルでの検索結果の「査定基準」

Googleの現状検索順位を決める上で、Mobile Friendlyのウェイトは、まだ高くない理由：ウエイトを高く設定して検索順位が急に大きく変わると混乱を生むから。ユーザーニーズを考慮すると、スマホ対応のサイトを上げるよりも、ユーザーのニーズにマッチする質の高いコンテンツを提供するサイトを上位に上げたほうが質の高い検索結果を提示できる。∴Googleの想い（推測）今は、猶予期間。早く質の良いサイトにモバイル対応して欲しい。Then、モバイル対応のアルゴリズムを取り入れ、　　　　モバイル時代に合った質の高い検索エンジンを提供できる。Then、ユーザーから選ばれ続けられる検索エンジンとなり。Then、AdWordsからの収益を確保し続けられる！

Web運営者の課題

今のうちにモバイル SEO対策をしないと、検索順位が下がりビジネス損失が発生するリスクがある！いかに早い段階で効果的にモバイル SEO対策をすべきか？

目次• 本セミナーの目的• 背景• 課題– Googleの課題– Webサイト運営者の課題

• モバイル SEO対策

モバイル SEO対策の全体像

①必要な情報を

②いかに分かりやすく

③速く提供できるか？

④　クローラーにいかに　　うまくアピールするか？

低通信速度、小画面の制約の中で以下を追求する

モバイル SEO対策の全体像①必要な情報を

②いかに分かりやすく

③速く提供できるか？

④　クローラーにいかにうまくアピールするか？

W3C　“ One Web”

情報

情報はどのようなデバイスで見ても、同じ内容が提示されるべき！情報格差があってはいけない！

Why?もしデバイスによって提示する情報が異なっていたら、、、

ECサイト 「 PCに詳しいお得情報書いてあったからめっちゃ得したわ！」「スマホで商品を買った後に、PCでサイト見たらよりお得なあるった。損したじゃん！」情報格差があるとトラブルになる「インターネット閲覧者は皆平等であるべき」

How?• Mobile Website実装方法　 シェアの

しやすさ更新の手間 サイズ

レスポンシブ ◯同じ URL◯更新が楽 ☓

CSSのサイズが大きくなる

UserAgentによる切り替え

◯同じ URL☓更新が手間異なるファイル

◯サイズの最小化が可能

モバイル／PCで URLを分ける

☓異なる URL☓更新が手間異なるファイル

◯サイズの最小化が可能

←これがオススメ！

「リンクをシェアしやすい」、「更新がしやすい」「同一の情報を多様なデバイスに提供可能」なレスポンシブデザインが推奨されている

レスポンシブデザイン

同じ情報を、 CSSで色々なデバイスに適したデザインに見せ方を変えることができる

情報 見せ方

W3C　“ One Web”

情報

新しいモバイルデバイスが出現しても。。。New　 Device?

レスポンシブデザイン

CSSに定義を追加すれば同一の情報を新しいデバイスに適したレイアウトで提示することが可能∴「 OneWeb」を実現しやすい

情報 見せ方

How?• Mobile Website実装方法　 シェアの

しやすさ更新の手間 サイズ

レスポンシブ ◯同じ URL◯更新が楽 ☓

CSSのサイズが大きくなる

UserAgentによる切り替え

◯同じ URL☓更新が手間異なるファイル

◯サイズの最小化が可能

モバイル／PCで URLを分ける

☓異なる URL☓更新が手間異なるファイル

◯サイズの最小化が可能

←これがオススメ！

「リンクをシェアしやすい」、「更新がしやすい」「同一の情報を多様なデバイスに提供可能」なレスポンシブデザインが推奨されている

モバイル SEO対策の全体像

①必要な情報を

②いかに分かりやすく

③速く提供できるか？

④　クローラーにいかにうまくアピールするか？

分かりやすいサイト• 分かりやすい「サイト構造」• 分かりやすい「ページ構造」• 分かりやすい「ページデザイン」

分かりやすいサイト• Destination First–「最短で目的の情報を獲得できる仕組み」

• モバイルサイト設計２５の指針「モバイルサイトの設計の指針」（ Google）https://services.google.com/fh/files/blogs/principles-of-mobile-site-design-ja.pdf

これらをヒントに分かりやすい「サイト構造」、「ページ構造」、「ページデザイン」にする必要がある。

分かりやすい「サイト構造」• ツリー構造• サイトマップの作成

ツリー構造• ３〜４階層までに留める３〜４クリックで目的の情報にたどり着けるように設計する• クローラビリティの　向上にもなる

Working with Site Mapshttps://docs.balsamiq.com/desktop/sitemaps/

サイトマップの作成• 目的の情報を探しやすい• 付随した情報にも目が触れやすい• クローラビリティの向上にもなる

サイトの全体像を把握できるRakuten Globalhttp://global.rakuten.com/corp/

サイトマップ生成ツールXMLと HTMLフォーマットでサイトマップの雛形を生成可能

分かりやすい「ページ構造」• CALL　 To　 Action

• 短く簡潔なメニューを作成• ホームへ簡単に戻れるようにする• 並べるより重ねる

CALL TO ACTION

CVR導線は分かりやすく、目立つように配置

Pizza Huthttps://www.pizzahut.com/#/home

短く簡潔なメニュー• シンプルな文言　 SEOを意識しすぎな文言にしない。例：　「 SEOセミナービジネスを提供するサイト」SEOセミナー　→　セミナーSEOセミナーお問い合わせ　→お問い合わせ• 必要最小限の数にする　あまりに多いとメニューが画面を覆い尽くすので　ユーザビリティが悪くなるだけでなく、　 Googlebotからも嫌われる。

ホームへ簡単に戻れるようにする• 左上のロゴクリックでホーム遷移• 全ページにホームのリンクを掲載• グローバルナビの設置• パン屑の設置• ページ内リンク

Dominos Pizzahttps://www.dominos.com/Amazon.comhttps://www.amazon.com

サイト内検索

Google「カスタム検索」https://cse.google.com/cse/?hl=en

どこからでも目的の情報にキーワードでジャンプできるようにする

Starbuckshttps://www.starbucks.com/

並べるより重ねる• モバイル端末は画面が小さい• 情報を並べると沢山フリックを要する• 情報を重ねると目的の情報に辿り付きやすい→タブや開閉メニューの活用

→JSよりは CSSで実現したほうがよい

。。 フリックが大変

タブメニュー

開閉メニュー並べて表示 重ねて表示

小さな画面の中で効率的に情報を配置する

本の目次の様に LIG inchttps://liginc.co.jp/designer/archives/7456

分かりやすい「ページデザイン」低通信速度、小さい画面のモバイルデバイスでは、きれいな画像を提示するより、欲しい情報に速くだどりつけるようになることが大事使い勝手　＞　デザイン

モバイルフレンドリーの条件①Flashなどのモバイルで一般的でないソフトを使わない②ズームしなくても判読できるテキストを使用する③コンテンツサイズが画面サイズと一致している– ビューポートを設定する– 固定幅のビューポートにしない– コンテンツのサイズをビューポートに対応する

④タップしやすいようにリンク間が十分に離れた状態に配置する“Helping users find mobile-friendly pages”　（ Google Webmaster Central Blog ）https://webmasters.googleblog.com/2014/11/helping-users-find-mobile-friendly-pages.html

ズームしなくても判読できるテキストを使用する1. 16CSS pixelの基本フォントサイズを使用2. 基本サイズに対する相対的なサイズを用いて、拡大縮小を定義3. 行間のデフォルトは 1.2emを推奨4. 使用フォントの数と拡大縮小を制限する

“Use Large Font Size”（ Google Developers ）https://developers.google.com/speed/docs/insights/UseLegibleFontSizes?hl=en

適切な Viewport設定をする<meta name="viewport" content="width=device-width,initial-scale=1">

BOOTSTRAP’S RESPONSIVE LAYOUT(M5 Design Studio)http://m5designstudio.com/2013/orlando-web-design/bootstrap-responsive-layout/

ブラウザにモバイル端末向けのコンテンツを提示させるための設定をする

「 Viewport設定」ブラウザに描画エリアのサイズを伝えるための設定

タップしやすいようにリンク間が十分に離れた状態に配置する• タップ領域の最小の推奨サイズは 約７ mm(48 css px)

• リンク間に 5mm(32px)以上のスペースを確保• ズームする必要がないようにするSize Tap Targets Appropriately（ Google Developers）https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately?hl=en

モバイルフレンドリーチェック

Mobile-Friendly Test（ Google Search Console）https://search.google.com/search-console/mobile-friendly?hl=en

Device View

Chrome DevTools Overviewhttps://developer.chrome.com/devtools

目視でも確認すべし！目的は Googlebotに気に入られることではなく、ユーザーに気に入られること

モバイル SEO対策の全体像

①必要な情報を

③速く提供できるか？

②いかに分かりやすく ④　クローラーにいかにうまくアピールするか？

速く提供する• トランザクションを減らす• コード量を減らす• 装飾に画像を使わない• 適切な画像フォーマットを使う• リソースを圧縮する• チェックツールを活用する

トランザクションを減らす• 画像をまとめてダウンロードする• キャッシュを使う• インライン CSSを使う

画像をまとめてダウンロードする• CSS　 Sprites を使う–一度に画像をダウロードして　画像を切り出して使う–トランザクションが減る

CSS Sprites Generatorhttp://csssprites.com/

Amazon Spriteshttp://g-ecx.images-amazon.com/images/G/01/common/sprites/sprite-site-wide-2._CB146303866_.png

キャッシュを使う• キャッシュの設定でトランザクションを減らす• 画像は２日、 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>

インライン CSSを使う• CSSを HTMLに埋め込み、　　 CSSファイルのトランザクションを減らす• ファーストビュー、 LPなど 特に速い表示スピードが求められている所で活用する

Critical Path CSS Generatorhttps://jonassebastianohlsson.com/criticalpathcssgenerator/

コード量を減らす• モバイルベースの設計をする

– 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}

}

装飾に画像を使わないCSS3 Patterns Galleryhttp://lea.verou.me/css3patterns/

<i class="fa fa-facebook-official" aria-hidden="true"></i>

Font Awesomehttp://fontawesome.io/

重たい画像を使わないことでサイトを軽量化する

適切な画像フォーマットを使う

“Image Optimization”(Google Developers )https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization?hl=en

アニメーション必要？

高解像度必要？

２５６色以上必要？ JPEG

PNG-8 PNG-24

GIF

YesNo

No

NoYes

Yes

リソースを圧縮する• 画像圧縮– JPEGmini, tinypng etc

• テキストリソース（ HTML、 CSS etc）の圧縮– DigitalCoding.Com etc

http://www.digitalcoding.com/

チェックツールを活用する• ダウンロードスピードチェック• ユーザビリティチェック• コードチェック

改善のヒントを得る

ダウンロードスピード　チェックPage Speed Insightshttps://developers.google.com/speed/pagespeed/insights/?hl=en

ユーザービリティ　チェックGoogle Search Console https://www.google.com/webmasters/tools/home?hl=ja

コード　チェックW3C Markup Validation Servicehttps://validator.w3.org/

まとめてチェック

Think with Googlehttps://testmysite.thinkwithgoogle.com/

モバイルフレンドリー、スピードをまとめてチェック

モバイル SEO対策の全体像

①必要な情報を

②いかに分かりやすく

③速く提供できるか？

④　クローラーにいかにうまくアピールするか？

低通信速度、小画面の制約の中で以下を追求する

クローラーにいかにうまくアピールするか？

• HTML5のセマンティック要素の活用• 適切なタイトルとデスクリプションの設定

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の要素の意味合いを、よりクローラーに伝えることができる

適切なタイトルとデスクリプションの設定• PCとモバイル端末で　検索結果タイトルとデスクリプションの　表示文字数が異なる• タイトルは７０文字程度、　デスクリプションは１００文字程度　最初の１００字で訴求力の高い文章を入れる

New Title & Description Lengths for Google SEO in Search Resultshttp://www.thesempost.com/new-title-description-lengths-for-google-seo/

モバイル SEOまとめ

①必要な情報を

②いかに分かりやすく

③速く提供できるか？

④　クローラーにいかにうまくアピールするか？

低通信速度、小画面の制約の中で以下を追求する

参考文献• モバイルファースト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 2015http://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 Googlehttp://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

参考文献• 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 Resultshttp://www.thesempost.com/new-title-description-lengths-for-google-seo/