googleのトレンドからわかる 今やるべきモバイルseo

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

ありがとうございました！！