googleのトレンドからわかる 今やるべきモバイルseo
TRANSCRIPT
Google のトレンドからわかる
今やるべきモバイル SEO
株式会社デジタルアイデンティティSEO Div. シニアアナリスト
金子 睦朗
2
アジェンダ
1. なぜ、今「モバイルフレンドリー」なのか?近年のトレンドや Google が目指す検索エンジンの姿から紐解く
2. 現状、ウェブマスターができることとは?モバイルフレンドリーにサイトにするための具体的なお話
3. さらにモバイルフレンドリーなサイトにするために本気で取り組むときにチェックしたい項目をかけ足で
3
自己紹介
.
金子 睦朗(ボブ)株式会社デジタルアイデンティティ SEM Div. SEO アナリスト
https://fb.me/bob.bobbbbbb1991.06.18 生まれ(木村さんと一緒です!!!!!!)
名前
.2013 年、デジタルアイデンティティのインターンとして SEOコンテンツのディレクションや提案を行う。
2014 年、デジタルアイデンティティ新卒第 1 期生として入社。現在、 SEO アナリストとしてさまざまな規模・業種のサイトを担当している。
好きな HTML は link 要素の rel="canonical" 。
略歴
4
弊社、デジタルアイデンティティについて
株式会社デジタルアイデンティティ
設立: 2009 年 / 従業員: 88 名
TOKYO
OSAKA
FUKUOKA
〒 150-0022 東京都渋谷区恵比寿南 1-15-1A-PLACE 恵比寿南 3F03-5794-3741
〒 530-0012 大阪府大阪市北区芝田 1-1-4阪急ターミナルビル 16 階
06-7222-3815
〒 810-0001 福岡県福岡市中央区天神 2-8-41福岡朝日会館 7F092-737-3680
会社情報
デジタルマーケティング事業
インターネット広告代理店業
インターネットメディア事業
ウェブサイトの企画・設計・制作・構築
事業内容
new!
事業紹介
広告代理事業部
メディア事業部 2012 ~
スマホアプリ開発 メディアサイト運営
5
アジェンダ
1. なぜ、今「モバイルフレンドリー」なのか?近年のトレンドや Google が目指す検索エンジンの姿から紐解く
2. 現状、ウェブマスターができることとは?モバイルフレンドリーにサイトにするための具体的なお話
3. さらにモバイルフレンドリーなサイトにするために本気で取り組むときにチェックしたい項目をかけ足で
6
そもそも「モバイルフレンドリー」って何だ
モバイルフレンドリーモバイル端末と 親和性の高いサイト
モバイル端末で
閲覧しやすい 使いやすい アクセスしやすい
モバイルフレンドリーか否かはランキングを決める要素の一つです。
7
ウェブサイトは PC から見られている訳じゃない
家庭の PC
スマートフォン
従来型携帯電話
タブレット
0 10,000,000 20,000,000 30,000,000 40,000,000 50,000,000
1.8 倍!
ニールセン インターネット基礎調査 ※ 16 歳以上の男女http://www.nielsen.com/jp/ja/insights/newswire-j/press-release-chart/nielsen-news-release-20150729.html
モバイルへの対応は「やらなきゃ」から「やって当たり前」に
(ガラケー)
8
Google が提唱する概念「マイクロモーメント」
したい 行きたい 知りたい 買いたい
と消費者が感じる瞬間
=マイクロモーメント
9
マイクロモーメントはこんなところに
ねぇ、シェイクシャックに行きたくない?
いいね、行きたいな。
むむ、シェイクシャックってなんだ…??新しいシェイク屋か…?
知りたい シェイクシャックとは
ふむ…ニューヨーク生まれのハンバーガー屋さんか…
とりあえずどこにあるか調べておかないとな。
行きたい シェイクシャック 店舗
10
マイクロモーメントはこんなところに
そろそろバレンタインデーの季節か~。
今年は何を作ろうかな。去年は生チョコだったしな~…
したい バレンタインデー レシピ
あ、ガトーショコラいいじゃん!なんか女子って感じ…。
レシピも簡単そうだし…あ!!家に粉ふるいなんか無いよ~。
通販で買ったらいくら位かな。
買いたい 粉ふるい 通販
11
マイクロモーメントの時、消費者は検索行動を起こす
スマホユーザーの
91 % 82 % 66 %情報が必要なときに
スマホで検索店内での購入検討に
スマホを活用テレビ CM の情報を
スマホで検索
Think with Google - Micro-Moments: Your Guide to Winning the Shift to Mobilehttps://think.storage.googleapis.com/images/micromoments-guide-to-winning-shift-to-mobile-download.pdf
12
モバイルフレンドリーは UI ・ UX の問題だけじゃない
使い勝手がモバイルフレンドリー
コンテンツがモバイルフレンドリー
効率的なモバイル戦略
13
まとめ
なぜ今モバイルフレンドリーなのか
スマホユーザーが爆発的に増加したから それにともなって消費者の行動が大きく変わったから
何をすればいいのか
モバイル端末での使い勝手を向上させる(狭義な意味でのモバイルフレンドリー)
マイクロモーメントを意識したコンテンツ戦略(広義な意味でのモバイルフレンドリー)
14
アジェンダ
1. なぜ、今「モバイルフレンドリー」なのか?近年のトレンドや Google が目指す検索エンジンの姿から紐解く
2. 現状、ウェブマスターができることとは?モバイルフレンドリーにサイトにするための具体的なお話
3. さらにモバイルフレンドリーなサイトにするために本気で取り組むときにチェックしたい項目をかけ足で
15
今、ウェブマスターができること
何をすればいいのか
モバイル端末での使い勝手を向上させる(狭義な意味でのモバイルフレンドリー)
マイクロモーメントを意識したコンテンツ戦略(広義な意味でのモバイルフレンドリー)
モバイルフレンドリーテストの実施 PC サイトと SP サイトの関係性を Google に伝えるための設定
コンテンツマーケティングにも関わる部分であるため今回は割愛以前セミナーをやらせて頂きました! Slideshare をご参照ください。http://www.slideshare.net/digitalitalentity/seo-google-63271112
16
まずは「モバイルフレンドリーテスト」に合格しよう
https://search.google.com/search-console/mobile-friendly
モバイルフレンドリーか否かを簡単に確認できるツール
17
モバイルフレンドリーテストで指摘される項目
Flash が使われていないかどうか
viewport が設定されているかどうか・正しいかどうか
タップ可能な要素どうしの距離が近すぎないかどうか
テキストが小さすぎて読みにくくないかどうか
インタースティシャルが使われていないかどうか
PC版・ SP版どうしの対応関係が正しいかどうか
ページの表示速度が遅すぎないかどうか
チェックしてくれる項目
チェックしてくれない項目
「モバイルフレンドリーです」と出ていれば OK だが…
18
検索エンジンのスマホサイトの評価基準
NO です。検索エンジンはどんなページでも等しく評価します。
複数のバージョンがある場合は一つの大きなカタマリとして評価したいと考えています。
PC版・ SP版 両ページの対応関係をGoogle に適切に伝える必要があります。
Q モバイルフレンドリーアルゴリズムがあるということは、スマホサイトはモバイル専用のアルゴリズムで評価されている?
A
したがって
19
紐付けができていないと…
HTML
http://www.example.com/
HTML
http://www.example.com/sp/
HTML
http://www.example.com/amp/
同じことが書いてあるページが複数存在している。
・これは同じコンテンツのバージョン 違いなのか?
・バージョン違いであれば、どのページ が誰のために存在してるんだ?
?
20
紐付けができていれば!
HTML
http://www.example.com/
親
HTML
http://www.example.com/sp/
HTML
http://www.example.com/mb/
子 子
♥
親子関係が明確だ!
・基本的には親のコンテンツを評価する ようにしよう
・デバイス毎に最適化されたページは それぞれのユーザ向けに表示しよう
21
検索エンジンが評価したいのは「情報それ自体」
Google の会社情報「 Google がしていること」よりhttps://www.google.co.jp/intl/ja/about/company/products/
Google のすべてのテクノロジーに共通する目標は、ユーザーができる限り簡単に、求めている情報を見つけられ、すべき作業を完了できるようにすることです。
22
サイト別・対応関係を伝える方法
あなたのサイトの URL は…
PC ・ SP で同一の URL PC ・ SP で別の URL
PC で開いてウィンドウサイズをスマホサイズに変更するとスマホ版に
なる ならない
レスポンシブウェブデザイン 動的な配信 別々の URL
23
ケース【 1】レスポンシブウェブデザイン
同じ URL ・同じ HTML
メリット 設定ミスによる検索エンジンからの認識エラーが起きにくい ユーザーが URL のシェアをしやすい
デメリット 情報が多いサイトやシステムが複雑なサイトの場合、共通ファイル化しにくいため導入が難しい
HTML CSSPC用
SP用
http://www.example.com/
端末毎に CSS の読み込み場所を変える→メディアクエリ
24
ケース【 2】動的な配信
同じ URL ・異なる HTML
メリット
デメリット
CSSHTML
http://www.example.com/
デザインを別物にできるため、仕組みが複雑なサイトでも導入しやすい ユーザーが URL のシェアをしやすい
管理運営が複雑になる( 1 つの情報を修正するのに 2 つのファイルをいじるため) 設定上のエラーが起きやすい
UA等による判定CSS
HTML
↑これを忘れがち…
Vary HTTP ヘッダに「 Vary: User-Agent 」の記述追加
25
ケース【 3】別々の URL
異なる URL ・異なる HTML
http://www.example.com/
メリット
デメリット
デザインを別物にできるため、仕組みが複雑なサイトでも導入しやすい ユーザーが URL のシェアをしやすい
管理運営が複雑になる( 1 つの情報を修正するのに 2 つのファイルをいじるため) 設定上のエラーが起きやすい
http://www.example.com/sp/
CSSHTML
CSSHTML
link rel="alternate"
link rel="canonical"
↓設定ミスが多い…
26
この設定はミスが非常に多い…
実装する側が
複数デバイスをまたいで・さまざまな経路で自分のサイトにアクセスするユーザーの存在を想定していないから?
会社の PC で見てたページを出先でも見るしかもブックマークしてないからいちいち検索する
みたいな…
27
まとめ
今ウェブマスターにできることは
モバイル端末での使い勝手を向上させることと、マイクロモーメントを意識したコンテンツ設計をすること
「モバイルフレンドリーテスト」を使って効率よく自サイトの問題点を発見する
サイトへの評価は PC版を軸に行われる。PC版と SP版の対応関係を Google に伝えることが重要
技術的な要件を決めるときも、ユーザーがどのような行動をするか考えて設計する
28
アジェンダ
1. なぜ、今「モバイルフレンドリー」なのか?近年のトレンドや Google が目指す検索エンジンの姿から紐解く
2. 現状、ウェブマスターができることとは?モバイルフレンドリーにサイトにするための具体的なお話
3. さらにモバイルフレンドリーなサイトにするために本気で取り組むときにチェックしたい項目をかけ足で
29
表示速度
表示速度の最適化は技術要件なども絡む複雑な問題いろいろな人を巻き込んでじっくり取り組む
ロードに時間がかかりすぎたときどうしますか?
見るのをやめる
41%ほかの端末で見る
37%
そのまま
22%
The state of content: Rules of engagement 2016http://www.adobe.com/content/dam/Adobe/en/news-room/pdfs/201512/state-of-content-report.pdf
30
App Indexing
アプリとウェブサイトで同様のコンテンツがある場合は必須で対応したい項目
Introducing Firebase App Indexinghttps://youtu.be/C35OSHlTNwA
31
AMP
自サイトの特性やコンテンツ内容を見直して本当に AMP 対応すべきか検討する
話題のキーワードで検索
カルーセル表示
ページが爆速で表示される
32
まとめ
さらにモバイルフレンドリーなサイトにするために
表示速度:ランキング要因にもなっている重要項目いろいろな人を巻き込んでやらなければいけない施策
App Indexing :アプリ内の情報がウェブ検索にも表示アプリエンジニアと連携して取り組む
AMP :現状では大手ニュースサイトのみ恩恵あり対応は自サイトのコンテンツ等によって要判断
33
総まとめ
スマホ等の台頭でユーザーの検索行動は大きく変化
ユーザーを第一に考えたモバイル設計をする必要がある
モバイル SEO は全てケースバイケース。自サイトの特性に合わせてきめ細やかに取り組む
34
お知らせ
個別 SEO セミナーを毎週開催中!!
SEO をやってみたいけどどこから手を付けていいか分からない
自社サイトのスマホ対応がちゃんとできてるか見てほしい
こんな問題があって今困っている
個別にご相談可能です!
ぜひお声掛けください!!
35
ありがとうございました!!