Download to read offline
Uploaded bydigitalitalentity
Googleのトレンドからわかる 今やるべきモバイルSEO
「【MT東京-25】モバイルフレンドリー対策は大丈夫！？スマホファーストな時代におけるモバイルSEO戦略」（https://mt-tokyo.doorkeeper.jp/events/46514）に登壇させていただいた際のスライドです。 スマートフォンのユーザー数が爆発的に増加する中、今やるべきモバイル領域のSEOにはどんなものがあるのか、そして、なぜ今モバイルなのか、といった部分について、Googleのトレンドなどからご紹介しています。
![コンテンツ戦国時代をどう生き抜く？成果につながるコンテンツマーケティングの基本[SEO][オウンドメディア]](https://cdn.slidesharecdn.com/ss_thumbnails/20170914-170916114238-thumbnail.jpg?width=640&height=640&fit=bounds)
Googleのトレンドからわかる 今やるべきモバイルSEO
- 1.
- 2. 2 アジェンダ 1. なぜ、今「モバイルフレンドリー」なのか？ 近年のトレンドやGoogleが目指す検索エンジンの姿から紐解く 2. 現状、ウェブマスターができることとは？ モバイルフレンドリーにサイトにするための具体的なお話 3.さらにモバイルフレンドリーなサイトにするために 本気で取り組むときにチェックしたい項目をかけ足で
- 3. 3 自己紹介 . 金子 睦朗（ボブ） 株式会社デジタルアイデンティティ SEMDiv. SEOアナリスト https://fb.me/bob.bobbbbbb 1991.06.18 生まれ（木村さんと一緒です！！！！！！） 名前 . 2013年、デジタルアイデンティティのインターンとしてSEOコン テンツのディレクションや提案を行う。 2014年、デジタルアイデンティティ新卒第1期生として入社。現 在、SEOアナリストとしてさまざまな規模・業種のサイトを担当 している。 好きなHTMLはlink要素のrel="canonical"。 略歴
- 4. 4 弊社、デジタルアイデンティティについて 株式会社デジタルアイデンティティ 設立：2009年 ／ 従業員：88名 TOKYO OSAKA FUKUOKA 〒150-0022東京都渋谷区恵比寿南1-15-1 A-PLACE恵比寿南3F 03-5794-3741 〒530-0012 大阪府大阪市北区芝田1-1-4 阪急ターミナルビル16階 06-7222-3815 〒810-0001 福岡県福岡市中央区天神2-8-41 福岡朝日会館7F 092-737-3680 会社情報 デジタルマーケティング事業 インターネット広告代理店業 インターネットメディア事業 ウェブサイトの企画・設計・制作・構築 事業内容 new! 事業紹介 広告代理事業部 メディア事業部 2012～ スマホアプリ開発 メディアサイト運営
- 5. 5 アジェンダ 1. なぜ、今「モバイルフレンドリー」なのか？ 近年のトレンドやGoogleが目指す検索エンジンの姿から紐解く 2. 現状、ウェブマスターができることとは？ モバイルフレンドリーにサイトにするための具体的なお話 3.さらにモバイルフレンドリーなサイトにするために 本気で取り組むときにチェックしたい項目をかけ足で
- 6. 6 そもそも「モバイルフレンドリー」って何だ モバイルフレンドリー モバイル端末と 親和性の高いサイト モバイル端末で 閲覧しやすい 使いやすいアクセスしやすい モバイルフレンドリーか否かはランキングを決める要素の一つです。
- 7. 7 ウェブサイトはPCから見られている訳じゃない 0 20,000,000 40,000,000 家庭のPC スマートフォン 従来型携帯電話 タブレット 1.8倍！ ニールセンインターネット基礎調査 ※16歳以上の男女 http://www.nielsen.com/jp/ja/insights/newswire-j/press-release-chart/nielsen-news-release-20150729.html モバイルへの対応は「やらなきゃ」から 「やって当たり前」に （ガラケー）
- 8. 8 Googleが提唱する概念「マイクロモーメント」 したい 行きたい 知りたい買いたい と消費者が感じる瞬間 ＝マイクロモーメント
- 9.
- 10.
- 11. 11 マイクロモーメントの時、消費者は検索行動を起こす スマホユーザーの 91％ 82％ 66％ 情報が必要なときに スマホで検索 店内での購入検討に スマホを活用 テレビCMの情報を スマホで検索 Thinkwith Google - Micro-Moments: Your Guide to Winning the Shift to Mobile https://think.storage.googleapis.com/images/micromoments-guide-to-winning-shift-to-mobile-download.pdf
- 12.
- 13. 13 まとめ なぜ今モバイルフレンドリーなのか スマホユーザーが爆発的に増加したから それにともなって消費者の行動が大きく変わったから 何をすればいいのか モバイル端末での使い勝手を向上させる （狭義な意味でのモバイルフレンドリー） マイクロモーメントを意識したコンテンツ戦略 （広義な意味でのモバイルフレンドリー）
- 14. 14 アジェンダ 1. なぜ、今「モバイルフレンドリー」なのか？ 近年のトレンドやGoogleが目指す検索エンジンの姿から紐解く 2. 現状、ウェブマスターができることとは？ モバイルフレンドリーにサイトにするための具体的なお話 3.さらにモバイルフレンドリーなサイトにするために 本気で取り組むときにチェックしたい項目をかけ足で
- 15. 15 今、ウェブマスターができること 何をすればいいのか モバイル端末での使い勝手を向上させる （狭義な意味でのモバイルフレンドリー） マイクロモーメントを意識したコンテンツ戦略 （広義な意味でのモバイルフレンドリー） モバイルフレンドリーテストの実施 PCサイトとSPサイトの関係性をGoogleに伝えるための設定 コンテンツマーケティングにも関わる部分であるため今回は割愛 以前セミナーをやらせて頂きました！Slideshareをご参照ください。 http://www.slideshare.net/digitalitalentity/seo-google-63271112
- 16.
- 17. 17 モバイルフレンドリーテストで指摘される項目 Flashが使われていないかどうか viewportが設定されているかどうか・正しいかどうか タップ可能な要素どうしの距離が近すぎないかどうか テキストが小さすぎて読みにくくないかどうか インタースティシャルが使われていないかどうか PC版・SP版どうしの対応関係が正しいかどうか ページの表示速度が遅すぎないかどうか チェックしてくれる項目 チェックしてくれない項目 「モバイルフレンドリーです」と出ていればOKだが…
- 18.
- 19.
- 20.
- 21.
- 22.
- 23. 23 ケース【1】レスポンシブウェブデザイン 同じURL・同じHTML メリット 設定ミスによる検索エンジンからの認識エラーが起きにくい ユーザーがURLのシェアをしやすい デメリット 情報が多いサイトやシステムが複雑なサイトの場合、共通ファイル化しにくいため 導入が難しい HTML CSS PC用 SP用 http://www.example.com/ 端末毎にCSSの 読み込み場所を変える →メディアクエリ
- 24. 24 ケース【2】動的な配信 同じURL・異なるHTML メリット デメリット CSS HTML http://www.example.com/ デザインを別物にできるため、仕組みが複雑なサイトでも導入しやすい ユーザーがURLのシェアをしやすい 管理運営が複雑になる（1つの情報を修正するのに2つのファイルをいじるため） 設定上のエラーが起きやすい UA等による判定 CSS HTML ↑これを忘れがち… Vary HTTP ヘッダに「Vary: User-Agent」の記述追加
- 25. 25 ケース【3】別々のURL 異なるURL・異なるHTML http://www.example.com/ メリット デメリット デザインを別物にできるため、仕組みが複雑なサイトでも導入しやすい ユーザーがURLのシェアをしやすい 管理運営が複雑になる（1つの情報を修正するのに2つのファイルをいじるため） 設定上のエラーが起きやすい http://www.example.com/sp/ CSS HTML CSS HTML link rel="alternate" link rel="canonical" ↓設定ミスが多い…
- 26.
- 27. 27 まとめ 今ウェブマスターにできることは モバイル端末での使い勝手を向上させることと、 マイクロモーメントを意識したコンテンツ設計をすること 「モバイルフレンドリーテスト」を使って効率よく 自サイトの問題点を発見する サイトへの評価はPC版を軸に行われる。 PC版とSP版の対応関係をGoogleに伝えることが重要 技術的な要件を決めるときも、 ユーザーがどのような行動をするか考えて設計する
- 28. 28 アジェンダ 1. なぜ、今「モバイルフレンドリー」なのか？ 近年のトレンドやGoogleが目指す検索エンジンの姿から紐解く 2. 現状、ウェブマスターができることとは？ モバイルフレンドリーにサイトにするための具体的なお話 3.さらにモバイルフレンドリーなサイトにするために 本気で取り組むときにチェックしたい項目をかけ足で
- 29. 29 表示速度 表示速度の最適化は技術要件なども絡む複雑な問題 いろいろな人を巻き込んでじっくり取り組む ロードに時間がかかりすぎたときどうしますか？ 見るのをやめる 41％ ほかの端末で見る 37％ そのまま 22％ The state ofcontent: Rules of engagement 2016 http://www.adobe.com/content/dam/Adobe/en/news-room/pdfs/201512/state-of-content-report.pdf
- 30. 30 App Indexing アプリとウェブサイトで同様のコンテンツがある場合は 必須で対応したい項目 Introducing FirebaseApp Indexing https://youtu.be/C35OSHlTNwA
- 31.
- 32. 32 まとめ さらにモバイルフレンドリーなサイトにするために 表示速度：ランキング要因にもなっている重要項目 いろいろな人を巻き込んでやらなければいけない施策 AppIndexing：アプリ内の情報がウェブ検索にも表示 アプリエンジニアと連携して取り組む AMP：現状では大手ニュースサイトのみ恩恵あり 対応は自サイトのコンテンツ等によって要判断
- 33.
- 34. 34 お知らせ 個別SEOセミナーを毎週開催中！！ SEOをやってみたいけど どこから手を付けていいか分からない 自社サイトのスマホ対応が ちゃんとできてるか見てほしい こんな問題があって今困っている 個別にご相談可能です！ ぜひお声掛けください！！
- 35.
Editor's Notes
- #3 本日は、モバイルと
- #7 2014年12月ごろから、スマホ検索時に「スマホ対応」ラベルが表示されるようになってから、モバイル対応の重要性が叫ばれるようになってきました。 そして2015年のモバイルフレンドリーアルゴリズムの導入。アルゴリズムの導入自体のインパクトは非常に少なかったものの、モバイル対応がマストであるということが改めて認識されたタイミングかなと思っています。 そもそもモバイルフレンドリーとは、Googleが2014年ごろから言っている言葉で、 モバイル端末と親和性の高いサイトのこと。 Googleの定義では、スマートフォンのような画面が小さい端末でも、 読みやすくて、使いやすいページのことを「モバイルフレンドリーなページ」と言っています。 2015年の4月からは、モバイルフレンドリーか否かがランキング要素の一つのなっていて、 対応できていないとスマホでのランキングが下落する可能性があります。 ここまでGoogleがモバイルでのUXを意識している要因としては、2010年頃から始まったスマホのユーザー数の爆発的な増加があります。
- #8 現に、ニールセンが2015年6月に調査した結果によると、 毎日インターネットを使う人のうち、スマートフォンを使ってインターネットをする人が家庭用のPCを使ってインターネットをする人の1.8倍も多いそうです。 みなさんの中で、スマホじゃない方っていませんよね。 こんな状況で、モバイルだとみづらいサイトを運営していては、ユーザーも離れていってしまいますよね。 モバイル端末でも見やすいサイト作り、つまりモバイルフレンドリーなサイト作りは、「やらなきゃね」から「やって当たり前」になってきてるというわけです。
- #9 そんな状況の中、インターネットユーザーの行動も大きく変わってきています。 Googleが2015年に打ち出した「マイクロモーメント」という概念です。 マイクロモーメントとは、人々か「したい」「行きたい」「知りたい」「買いたい」と思って行動する瞬間のことを指すそうです。 この瞬間、人々は何をするかというと、「目の前の端末」を使って「検索をする」んだそうです。
- #10 たとえば、友達と「話題のハンバーガー屋さん、シェイクシャックに行きたいよね」と話していたとします。 まず「シェイクシャック」とは何か「知りたい」と思い検索します。今話題で、毎日長蛇の列ができていると知ると、「行きたい」と思い住所を検索するでしょう。
- #11 さらに、テレビを見ていて、そろそろバレンタインデーだと知ると、チョコレートを「手作りしたい」と思いレシピを検索するでしょう。すると、自分の家にはお砂糖をまぶすための粉ふるいが無い事を知ると、粉ふるいを「買いたい」と思って通販サイトで価格を調べるでしょう。
- #12 こうしたように、人々は何かしらの意図欲求を持ったときに必ず検索行動をします。 Googleの調査によると、 ・スマホユーザーの91％が、作業中に情報が必要となったらスマートフォンを使って検索をしている ・スマホユーザーの82％が、店内でどの商品を買うべきかの情報検索をおこなっている ・スマホユーザーの66％が、テレビCMで見た商品について、さらに情報を収集するためにスマホを使っている。 そうです。
- #13 つまり、ただ単にUI・UXがスマホに最適化されているだけではなく、ユーザーの消費行動に合わせて適切なコンテンツを用意してあげることも、広義な意味では「モバイルフレンドリーなサイト」であると言えるというわけです。 もちろん、こうした消費者のいろいろな行動に合わせてリーチを行うことは、様々な手段で行うことができます。 検索連動型広告をはじめとした広告施策もそうですし、プッシュ通知などを通じたアプリ上のマーケティングもそうだと思います。 しかし、業種にもよるが、一番重要で、かつラクで、お金もかからないのは自社のサイトで消費者のニーズを満たすこと。 なので、スマホが普及した今だからこそ、モバイルユーザーに特化したSEOを行うべきだと考えているわけです。
- #14 以上をまとめると、、、 スマホユーザーの爆発的な増加で、消費者の行動は大きく変わりました。 人々はいつどこで何をしていても検索行動を起こすようになりました。マイクロモーメントと呼びます。 それにともなって、私たちウェブマスターとしても、 ユーザーがどんな端末で見ている時でも、伝えたい情報をしっかり伝えるために、 モバイル端末での使い勝手を向上させたり、 ユーザーが欲しいと思うであろうコンテンツを先回りして用意してあげたり、 といった施策がこれまで以上に重要になってくる、ということです。 次のチャプターでは、現状私たちウェブマスターは何ができるのか、というところを具体的に説明していきます。
- #16 今回は時間もあまりないので、モバイル端末での使い勝手を向上させる、という狭義の意味でのモバイルフレンドリーを実現するための施策について説明します。 もう一つの広義な意味でのモバイルフレンドリーな施策は、以前コンテンツマーケティングの文脈からセミナーをさせてもらいましたので、スライドシェアをご覧頂ければと思います。
- #17 まず手っ取り早くできるのは、Googleが提供している「モバイルフレンドリーテスト」を自分のサイトで行ってみることです。 技術的な知識が無い場合でも、このテストにURLを投げれば、自分のサイトがモバイルフレンドリーか否かがすぐに解ります。
- #18 モバイルフレンドリーテストでは、Googleがモバイルフレンドリーアルゴリズムで重視している、小さいスマホ画面でも使いやすいサイトになっているかどうかをチェックしてくれます。 しかし、モバイルフレンドリーアルゴリズムに関わらなくとも、モバイルでの順位に影響の出る部分はたくさんあって、 この後お話するPC版・SP版同士の対応関係が正しいかどうかという部分であったり、ページの表示速度が遅くなっていないかどうかといった部分はこのツールではチェックすることができません。 ページの表示速度に関しては現状、SPサイトであっても、対応するPC版サイトの表示速度が評価されているのですが、 今後SPサイトはSPサイトの表示速度で評価されるようになることが予想されています。 なので、まずはモバイルフレンドリーテストで合格することを目標にサイト内部の改修を進め、 合格したら、PCとSPの対応関係を適切に示すことができているかどうか、ページの表示速度が遅くないかどうか、といったところを確認していきましょう。 対応関係についてはこの後すぐに、表示速度については次のチャプターで説明します。
- #19 対応関係について説明する前に、まず検索エンジンがスマホサイトをどのように評価しようとしているのか、ということについて説明したいと思います。 よく質問されるのが、モバイルフレンドリーアルゴリズムがあるということは、検索エンジンはPCサイトとSPサイトで別の評価付けをしているのでしょうか？というギモンです。 これは率直に言うとNOです。同じコンテンツに対して複数のバージョンが存在する場合、検索エンジンはそれら複数バージョンを一つの大きな固まりとして評価したいと考えているのです。 分かりにくいので図にしてきました。
- #20 例えば、PC版・SP版・ガラケー版の3つのバージョンがあるコンテンツがあるとします。 URLもそれぞれ別です。 同じコンテンツについて複数のバージョンが存在しているにもかかわらず、それぞれの対応関係が明示されていなければ、 検索エンジンはどのデバイスのユーザーにどのページを表示したらよいのかわからなくなってしまいます。 それに、どのコンテンツに評価を寄せればいいのかもわからず、評価がそれぞれのバージョン毎にバラバラについてしまって、 本来されるべき評価がされなくなってしまうのです。
- #21 こうした問題を防ぐために、1つのコンテンツについてそれぞれの対応関係をウェブマスター側で明確にしておけば、 検索エンジンは適するユーザーに適するバージョンのページを表示させることができます。 さらに、バージョン内での親子関係についても明確にしておけば、評価も分散せず、本来されるべき評価がされるようになります。
- #22 そもそも、Googleは「検索者が必要としている情報を、より素早く簡単に届けたい」と考えています。 なので、軸はあくまで「そこに何が書かれているか」なのです。 モバイルフレンドリーアルゴリズムはあくまで「できる限り簡単に」届けるために必要な要件を満たしているか否かを判断するためのアルゴリズムであり、情報それ自体を評価するためのアルゴリズムではないのです。 そのことを考えると、スマホ独自のアルゴリズムがあるという考えにはならないですし、 今説明した「複数バージョンを一つのカタマリとして評価したい」という枠組み自体も理解できるのかなと思います。
- #23 対応関係を伝える方法は全部で3つあり、サイトの運営方針によって方法が変わります。
- #24 ひとつ目のケースが、URLもHTMLも、スマホPCかかわらず全て同一だよ、というケース、つまりレスポンシブウェブデザインの場合です。 この場合は、特に何もしなくてもOKです。なぜならURLもHTMLも全て一つしかないので、対応関係を示す必要がないからです。 なので、エラーも発生しにくいですし、ユーザーにとっても混乱が起きにくい設定方法なので、Googleも推奨しています。
- #25 二つ目が、URLは同じだけど、ユーザーエージェントによってHTMLやCSSを出し分けているという方法。動的な配信と呼びます。 この場合は少し工夫が必要です。 UAによって出し分けを行うので、アクセスしてくる場合に不具合が起きてしまいます。 インターネットの世界には「キャッシュ」という概念がありますね。2回め以降のアクセス時により高速に表示できるように、サーバなりローカルなりにデータを保存しておくことです。 これが仇となって、Googlebotが自分のサイトにせっかくやってきてくれたのに、スマホ版の存在に気づかぬまま何処かへ言ってしまう、というようなことが起きてしまうのです。 それを防ぐために、HTTPヘッダーに「このコンテンツはユーザーエージェントによってファイル内容が異なる（変える=Vary）よ〜〜」ということを伝えなければいけないのです。
- #26 この場合は、ファイル自体にそれぞれの対応関係を示すタグを設置する必要があります。 まず、PC版のHTMLには、「このHTMLには別バージョン（alternate）がありますよ〜」といった形で、SP版のURLを記述します。 そして、SP版のHTMLには「このHTMLの本当のバージョンはこれですよ〜〜」といった形で、PC版のURLを記述します。 これで、双方の対応関係が明確になるので、検索エンジンからの評価も散らない、というわけです。
- #27 ここまで、PC版とSP版の対応関係を示す方法を3つご紹介しましたが、ここに関する間違いというのが非常に多いんですね。 それはなぜかというと、おそらく実装する側が、ユーザーが複数デバイスをまたいでサイトにアクセスするということを想定していないからだと思うんです。 例えば、会社のPCで見ていたページを出先でスマホを使って閲覧する、といった行動を想定していれば、一番上のようなPCでは正しく表示されるのにSPではエラーになって読めない、といったことは起き得ないと思いますし、PC版URLへのスマートフォンでのアクセスをすべてSP版トップページにリダイレクトさせる、といった挙動も思いつかないと思うんです。 なので、コンテンツはもちろんのこと、技術的な実装を考えるときにも、ユーザーが自分のサイトにどんなデバイスで、どこを経由してアクセスしてくるのか、といったところを考えて実装を行う必要があると考えています。
- #29 ここまでで、なぜ今モバイルフレンドリーが叫ばれているのか、そしてモバイルフレンドリーなサイトにするためにはどのようにしたらよいのか、という部分について、 技術的な部分と、Googleの検索への姿勢などもまじえてご説明をしてきました。 次からは、さらにモバイルフレンドリーなサイトにするために知っておきたい最新情報を、少し駆け足でご紹介します。
- #30 まずは表示速度です。 表示速度はモバイルにかぎらずPC版のページでも、既にランキングシグナルとしてアルゴリズムに組み込まれています。 現状ではモバイルサイトであってもPCの表示速度が評価として使われていますが、近いうちにモバイルサイトはモバイルサイトの表示速度が評価として使われるかもしれない、と言われています。 これは至極当たり前のことですよね。 それに、Adobeの調査で、読もうとしたページのロードが遅かった時どうしますかという質問に対して、41％の人が、その場で見るのをやめてしまうとのことでした。 これはSEO云々の話を抜きにしても、取り組むべき施策ですよね。 しかし、表示速度高速化については、キャッシュの問題だったり、サーバサイドの問題だったりと、いろいろな人を巻き込んでじっくり取り組む必要があるので、 ここは奥が深いと思います。
- #31 モバイルといえばアプリ でもアプリっていろいろめんどくさい。インストールしなきゃだったり、 そもそもインストールしようとしてるアプリに自分の欲しいコンテンツがあるかどうかも未知数だったり、、、、 なので、アプリの中のコンテンツをインデックスして、検索結果に出しちゃおうというのがApp Indexing。 アプリと、アプリに対応したウェブサイトがあれば実装可能。 もう少しでウェブサイトが無いアプリもインデックスするようになる。 しかもこれ！！！！！！モバイルフレンドリーのランキングアルゴリズムに組み込まれています！！！！！！！ アプリがある場合は必ず実装したいよね 具体的な方法は別途アプリエンジニアと相談。。
- #32 Accelerated Mobile Pagesの略。 4Gとか出てきてめっちゃよくなったけど、 世界を見渡すと、回線速度がイマイチな国が多い。（発展途上国とか） 日本でも3Gとかでインターネットしてるとめっちゃイライラする。 人々の検索体験を向上させるのがGoogleの使命なのに、それは由々しき事態。 なので、読み込む要素を極限まで少なくして、サーバサイドでかちゃかちゃやれば早くなるじゃん！ っていうのがAMP。 具体的には、通常ページに対応するAMPページを別途つくって、カノニカルする。 でも現状AMP対応しても検索結果画面自体で恩恵はあんまない（読売新聞みたいな超デカイニュースサイトくらい） でも最近はニュースアプリとかでAMP対応してるサイトがあればAMP版を表示するやつとかもあるので 興味があれば対応、、、って感じかもまだ、、、