フロントエンドエンジニアが振り返る2017年のSEO

フロントエンドエンジニアが振り返る2017年のSEO

1. 1. フロントエンドエンジニアが振り返る 2017年のSEO
2. 2. 姜勝陽 ・JSER やってます ・趣味SEO。Analyticsを眺めること。 ・ハングルが下手な韓国人ですｗ Shoyo kyo @shoyo_kyo
3. 3. 今回の参考情報 株式会社Faber Companyの鈴木謙一 さんが運営する 「海外SEO情報ブロ グ」 https://www.suzukik enichi.com/
4. 4. 本日の内容 1. はじめに ２. 2017年のフロントエンドに関わる SEOニュースを振り返る ３. 2018年の予想
5. 5. はじめに 2017年のJSとSEO
6. 6. 2014年 GoogleがJSをレンダリングしなかった頃 JS VS SEO
7. 7. 2017年 SEOとJSの関係性がより密接になった JS == SEO
8. 8. フロントエンドに関連するSEO情報 1. WRS (JSレンダリング) 2. MFI (Mobile First Index) 3. PWA (Progressive Web Apps) 4. AMP (Accelerated Mobile Pages) 5. 構造化マークアップ (Schema.org , json-ld)
9. 9. 1. WRS Web Rendering Service JSレンダリング関連
10. 10. 1. WRS Date Article 2014年5月 「JavaScript実行後のHTMLのインデックスを行っている」と Googleが発表 2014年5月 WebマスターツールにJavaScriptレンダリングテスト機能を 追加 2015年3月 SEO検証！ GoogleはAngularJSを正しくクロールするのか？ （2015年2月版） はじめに JSで描画したHTMLも検索対象として解析させる為の 取り組み。
11. 11. 1. WRS Date Article 4月 Fetch as Googleは、実物のGooglebotと同じレンダリングでページを表示 する 5月 JavaScriptサイトにnoscriptタグは役に立たない、必要であればプリレン ダリングしたコンテンツを配信 6月 モバイルフレンドリー テストはGooglebotのレンダリング検証にも使える JSフレームワークを使ったサイトではプリレンダリングを推奨 8月 Googlebotはレンダリング機能としてChrome41相当の性能を持つ Googlebotは現状ではHTTP/2をサポートしない。メリットがないことが理 由？ 10月 Googlebotのレンダリングサービスが年内にアップデートか？ DOM検証 ツールも開発中 11月 JavaScriptで生成されたコンテンツもリンクも静的なものと同等にGoogle は評価する。ただし時間がかかることも
12. 12. 1. WRS 2017年のニュース ・Fetch as Googleを信頼しなさい！（4月〜） ・SSR推奨してる事件（6月） ・WRSはChrome41相当（8月） ・WRS 2018年までアップデート？（11月）
13. 13. 2. MFI Mobile First index
14. 14. 2. MFI Date Article 2016年10月 Googleがモバイル ファースト インデックスを導入予定、影 響は？対応は？ はじめに PCページのコンテンツを優先してScoringをしていた が、モバイルページ優先にする取り組み。
15. 15. 2. MFI Date Article 2月 MFIにおいてGoogleが重視する2つの要素 MFIについてGoogleに何でも聞いてみた MFIの実施時期は依然として未定、ただし100%確実に導入する 3月 「もっと見る」のMFI対応はページネーションがベスト 別URLのモバイル構成ではMFI後のhreflang設定に変更あり、モバイル ページからPCページに単方向で MFI導入はまだ数か月先、”クオリティ ニュートラル”を目指すため 「MFIでは表示速度をランキング要因にしない」をGoogleが撤回、速い ページを評価する MFI導入は2017年ではなく2018年にずれ込む可能性も 6月 MFIの年内導入は困難、早くても2018年にずれ込むことが確実 別々のURLからレスポンシブに変更するならGoogleのMFI導入前に
16. 16. 2. MFI Date Article 7月 新たなスピード診断ツール、Test my siteをGoogleが公開。遅さが原因の 想定ユーザー離脱率は何%？ MFIは準備ができたサイトから順次適用を開始か？ モバイル向けページの画像にはalt属性を必ず設定すること。MFIへの切 り替えで検索順位に悪影響が出る可能性あり MFIで検索トラフィックを減らさないために最低限チェックすべき4つのポ イント MFI後はレスポンシブが唯一の選択肢か MFIの導入時期はいまだ決定せず、段階的な導入を検討 9月 MFIはページ単位で切り替わる、オプトイン/アウトはサイト単位の申請 「MFIが来ても大丈夫」と安心するための4つのチェック項目 MFIは依然として開発途中、実検索でのテストは限定的
17. 17. 2. MFI Date Article 11月 MFI導入がグーグルの本番環境ですでに始まっているだと！？ MFI導入後のhreflang設定が変更に、これが最終確定になるのか？
18. 18. 2. MFI 2017年のニュース ・表示速度をランキング要因にすると発表（3月） ・MFI実装は2018年（6月） ・リアルでABテスト始めてるよ（9月〜） ・レスポンシブ対応が推奨（6月） ・MFIはオプトイン、オプトアウト設定可能（9月） ※ 注意：alt、リダイレクト、hreflang、構造化データ
19. 19. 3. PWA Progressive Web Apps
20. 20. 3. PWA Date Article 2015年8月 Progressive Web Apps: Escaping Tabs Without Losing Our Soul 2016年5月 Google I/O 2016で発表多数 2016年12月 インデックス可能なプログレッシブ ウェブアプリの構築方法 はじまりは？ Manifest.jsonによって、今後アプリストアに表示でき る可能性が高いので注目。ASO
21. 21. 3. PWA Date Article 1月 AMPよりもPWAに注目!? プログレッシブウェブアプリでウェブサイトのア プリ化が可能に PWAとAMPのイイとこ取りを実現するPWAMPとは？さらに優れたモバイ ルUXを提供可能に 2月 GoogleはPWAに本気？ Android版Chrome Betaもウェブアプリのインス トールをサポート開始 3月 PWAの実装状況をレポートするGoogle製Chrome拡張、「Lighthouse」 2人のGoogle社員が何でも答えてくれた――フレッドアップデート、PWA、 重複コンテンツペナルティ、機械学習などなど 4月 AMPとPWAのコンボで表示速度とコンバージョンを劇的に改善したフライ ト検索サイトのWego PWAサイトはインデックスされない？⇒PWAではなくサイト構造の問題 PWAに対応したTwitter Liteをツイッターが公開
22. 22. 3. PWA Date Article 5月 Google I/O 2017でPWAの実装例発表 PWA対応したTwitterは毎日100万のユーザーがホーム画面アイコン経 由 #IO17JP 6月 PWAがアプリストアからインストールできるようになる!? Windows Storeで は実現、Google Playはどうか？ Service WorkerをサポートしないiOSでもPWAで成果をあげた世界最大の ビューティサイト 7月 Google、LighthouseをChromeに統合。デベロッパーツールでPWAを検証 可能に AMPとPWAを組み合わせたもう1つの構成、「Shadow Reader」とは？ 8月 iOS がプログレッシブ ウェブ アプリをサポートする可能性が浮上
23. 23. 3. PWA Date Article 9月 来日したGoogleゲイリーに何でも聞いてみた――プロジェクトOWL、検索 アナリティクス、PWA etc. #inhouseseo シンプルだけどパワフル、PWAのホーム画面アイコン追加 #PWATokyo PWAサイトで、404エラーを返すべきなのに200を返してしまう <= noindex タグでソフト404扱いさせる
24. 24. 3. PWA 2017年のニュース ・PWAMP発表（1月, 7月） ・Google I/0 で導入サービス発表 2件（５月） ・chrome developer tool 機能追加（7月） ・Windows Store 積極的（6月） ・IOSがPWAサポート表明（8月） ・Chromeも順次機能実装中
25. 25. 4. AMP Accelerated Mobile Pages
26. 26. 4. AMP Date Article 2016年1月 Accelerated Mobile Pages プロジェクトについて -- 導入ガイ ド日本語版を本日公開しました 2017年5月 Google AMP No Standalone対応前に知っておくべきポイン ト（2017年5月版） はじめに 検索結果に表示される面が追加されるオマケがあるの で、SEO効果があると話題に。
27. 27. 4. AMP Date Article 1月 Google、サイト専用のニュースAMPカルーセルをモバイル検索で提供開 始。パブリッシャーには露出アップのチャンスになるか GoogleのInboxアプリがAMPをサポート、アプリの中で直接AMPページを 高速表示 2月 AMPページを正規URLでコピー、シェアできるアンカーボタンをGoogle検 索で利用可能に AMPが画像機能を改良、カルーセルでのサムネイル表示とフォームで の画像選択が可能に AMPページで評価を投稿することはできるか？⇒ amp-iframeを使えそう だが良い方法なし 3月 AMPページの直帰率の高さやユニークユーザー数は全部ウソ!? AMPア クセス解析には潜在的な問題あり 米Googleのモバイル検索結果はAMPカルーセルだらけ、関連記事にも AMPカルーセルを導入
28. 28. 4. AMP Date Article 3月 Go日本のYahoo!検索がAMPサポートを表明、日々5,800万のYahoo!検 索ユーザーがAMPページにアクセスすることに ECサイト初のAMP成功事例？ AMP対応したインドのショッピングサイト は1日の注文が52%増加、一覧ページのトラフィックが59%増加 Google、将来的な可能性は排除しないが現状ではAMPをランキング要 因にする必要なし モバイルECに強い味方が登場、AMPでの決済を可能にするpayment Request API 4月 AMP Start、レスポンシブウェブデザインのAMPサイトを簡単に構築でき るテンプレートを公開 ダイナミックな機能をAMPで提供できるamp-bind、Googleがorigin trial参 加サイトを募集中 AMPマーク表示を検索結果から取り除くことをGoogleは考えていない
29. 29. 4. AMP Date Article 5月 AMPはニュースサイトだけじゃない、ECサイトでもAMP対応可能 #IO17JP AMPの不正確なアクセス解析をGoogleアナリティクスが解消 6月 【AMP成功事例】AMP対応でコンバージョンを15%アップさせたブラジル のECサイト 「AMPページに埋め込みの動画がありません」のエラー警告がSearch Consoleに届く 7月 amp-bindが一般公開、ECサイトでのAMP対応がいよいよ現実的に AMPの最近の小さな改良3つ（テスト含む） AMP対応をやめたとき、Google検索にAMPページを表示させないように する3つの方法（ただし使いたいのは1つだけ） Google、デベロッパー向けサイトのAMPドキュメントを更新。内容を拡充、 整理整頓
30. 30. 4. AMP Date Article 8月 Snapchatストーリーによく似た画像投稿サービスをGoogleが間もなく公 開。AMPベースで名称は“Stamp” Google、モバイル検索の強調スニペットにAMPリンクを掲載 9月 Google アナリティクス、AMPキャッシュ計測の問題を解決。AMP Client ID APIのオプトインで正確なアクセス解析が可能に 10月 “AMP”の代わりに“Instant”のラベルを表示するモバイル検索をGoogle がテスト中 AMPページと対応するPCページのコンテンツは1対1で対等にする。さも ないとコンテンツの不一致としてみなされる可能性も ECサイト向けAMP対応テンプレートがAMP Startでダウンロード可能に
31. 31. 4. AMP Date Article 11月 AMPキャッシュのアクセス解析が日本のGoogle検索でも可能に ――AMP Client ID APIがgoogle.co.jpでサポートされる Google、さらなる高速化を目指してSSRのAMPを開発中 AMPページとオリジナルページの主要コンテンツは一致させる。著しい 差はポリシー違反 日本のYahooがついにAMPを正式サポートか？
32. 32. 4. AMP 2017年のニュース ・AMPのGA計測問題 発覚（3月） ・AMPのGA計測問題 解決（9月） ・ECサイト向け仕様強化（3月〜） ・AMPドキュメント更新（7月） ・Yahoo Japan AMP対応（11月）
33. 33. 5.構造化マークアップ
34. 34. 5.構造化マークアップ Date Article 2011年8月 schema.org のご紹介: より便利なインターネットのための 検索エンジンの取り組み 2012年2月 初心者向けschema.org講座 « NAVER Engineers' Blog 2015年3月 Web Components と JSON-LD でウェブサイト開発がより簡 単に はじまりは？ HTMLにmeta情報を追記する事で、 検索結果に追加UIを表示できる取り組み
35. 35. 5.構造化マークアップ Date Article 1月 Google検索結果のスニペットに表示される日付けはアルゴリズムによっ て完全に自動化、構造化データをマークアップしても指定できない 2月 「転職・求人」向けの構造化データをGoogleが準備中か？ 3月 サイトリンク検索ボックスは構造化データをマークアップしても表示でき ない。すでに表示できているサイトにのみ有効 これは目立つ! グーグルの検索結果で料理レシピの“リッチカード”が登 場【海外＆国内SEO情報ウォッチ】 Google、リッチスニペットよりもビジュアルなリッチカードをグローバル展 開。レシピ、レストラン、映画が対象 4月 Google、モバイル画像検索に「似ている商品」機能を導入。ECサイトは 売上げアップのチャンス Googleが画像検索に「スタイルのアイディア」を導入、アパレル系サイト の画像検索SEOに役立つか
36. 36. 5.構造化マークアップ Date Article 4月 Googleマイビジネスで飲食店のメニューを登録可能に 5月 Google、検索結果に求人情報を掲載した“ジョブ ボックス”をテスト中 地球マークが付いたパンくずリストを上に表示するモバイル検索結果を 米Googleがテスト中 構造化データはランキングに影響しないが検索結果での見え方を変え る。Google未サポートの構造化データは検索には役立たない 求人サイトのチャンス？ピンチ？、Google検索で仕事を探せる Google for Jobs が米国で間もなく公開 #IO17JP 7月 検索履歴や検索場所、デバイスの種類によってリッチスニペットが表示 されないことがある!? Google、レシピと動画のモバイル画像検索にリッチ結果を導入 JobPostingの構造化データのマークアップによくある質問 転職サイトで求人一覧ページにJobPosting構造化データをマークアップ できるのか？
37. 37. 5.構造化マークアップ Date Article 8月 Google、モバイルの画像検索に“バッジ”を表示。レシピと商品、動画、 GIFには特別なラベルを付与 9月 構造化データを設定する際に従うべきガイドラインをGoogleが公開 11月 求人検索のGoogle for Jobsが給与情報と勤務地情報を提供するように Google、ニュース発行者のナレッジパネルに信頼性を示すタブを追加。 フェイクニュース対策にもなりうる
38. 38. 5.構造化マークアップ 2017年のニュース ・UIの名称がリッチカードに変更（3月） ・求人サイト向けの構造化データ 米（5月） ・品質周りのガイドライン更新（9月） ※レストランのリッチカードが日本で流行った
39. 39. 2018年どうなる？
40. 40. 2018年どうなる？ WRS Update => SPAがよりIndexされやすく。 Mobile First index => Mobileサイトの見直し発生 SSR AMP  より早くなる  作業が発生するか？不明  新たな構築手法になるか？ 構造化マークアップ  種類は増えていく予定  求人サービスはチェック PWA 各Store掲載  仕事増える可能性大。  PWAMPも流行るか？  No Standalone AMPは来 そう（PWA次第
41. 41. END