2017年を振り返る！2017年にあったSEOニュースをフロントエンジニア視点でまとめた、年表です。 2017年になり、SEOとJSの密接性は非常に高まりました。 SEOを実現する為に、フロントエンドで必要となる対応は非常に増えてきました。 2017年SEO情報をを振り返りながら、フロントエンドの関連性を体感しましょう。 まとめている内容としては、Web Rendering Service, Mobile First index、Progressive Web Apps、Accelerated Mobile Pages、構造化データーの2017年SEOニュース。 そして、2018年の予想です。

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

2. 姜勝陽
・JSER やってます
・趣味SEO。Analyticsを眺めること。
・ハングルが下手な韓国人ですｗ
Shoyo kyo
@shoyo_kyo

3. 今回の参考情報
株式会社Faber
Companyの鈴木謙一
さんが運営する
「海外SEO情報ブロ
グ」
https://www.suzukik
enichi.com/

4. 本日の内容
1. はじめに
２. 2017年のフロントエンドに関わる
SEOニュースを振り返る
３. 2018年の予想

5. はじめに
2017年のJSとSEO

6. 2014年
GoogleがJSをレンダリングしなかった頃
JS VS SEO

7. 2017年
SEOとJSの関係性がより密接になった
JS == SEO

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. 1. WRS
Web Rendering Service
JSレンダリング関連

10. 1. WRS
Date Article
2014年5月 「JavaScript実行後のHTMLのインデックスを行っている」と
Googleが発表
2014年5月 WebマスターツールにJavaScriptレンダリングテスト機能を
追加
2015年3月 SEO検証！ GoogleはAngularJSを正しくクロールするのか？
（2015年2月版）
はじめに
JSで描画したHTMLも検索対象として解析させる為の
取り組み。

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. 1. WRS
2017年のニュース
・Fetch as Googleを信頼しなさい！（4月〜）
・SSR推奨してる事件（6月）
・WRSはChrome41相当（8月）
・WRS 2018年までアップデート？（11月）

13. 2. MFI
Mobile First index

14. 2. MFI
Date Article
2016年10月 Googleがモバイル ファースト インデックスを導入予定、影
響は？対応は？
はじめに
PCページのコンテンツを優先してScoringをしていた
が、モバイルページ優先にする取り組み。

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. 2. MFI
Date Article
7月 新たなスピード診断ツール、Test my siteをGoogleが公開。遅さが原因の
想定ユーザー離脱率は何%？
MFIは準備ができたサイトから順次適用を開始か？
モバイル向けページの画像にはalt属性を必ず設定すること。MFIへの切
り替えで検索順位に悪影響が出る可能性あり
MFIで検索トラフィックを減らさないために最低限チェックすべき4つのポ
イント
MFI後はレスポンシブが唯一の選択肢か
MFIの導入時期はいまだ決定せず、段階的な導入を検討
9月 MFIはページ単位で切り替わる、オプトイン/アウトはサイト単位の申請
「MFIが来ても大丈夫」と安心するための4つのチェック項目
MFIは依然として開発途中、実検索でのテストは限定的

17. 2. MFI
Date Article
11月 MFI導入がグーグルの本番環境ですでに始まっているだと！？
MFI導入後のhreflang設定が変更に、これが最終確定になるのか？

18. 2. MFI
2017年のニュース
・表示速度をランキング要因にすると発表（3月）
・MFI実装は2018年（6月）
・リアルでABテスト始めてるよ（9月〜）
・レスポンシブ対応が推奨（6月）
・MFIはオプトイン、オプトアウト設定可能（9月）
※ 注意：alt、リダイレクト、hreflang、構造化データ

19. 3. PWA
Progressive Web Apps

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. 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. 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. 3. PWA
Date Article
9月 来日したGoogleゲイリーに何でも聞いてみた――プロジェクトOWL、検索
アナリティクス、PWA etc. #inhouseseo
シンプルだけどパワフル、PWAのホーム画面アイコン追加 #PWATokyo
PWAサイトで、404エラーを返すべきなのに200を返してしまう <= noindex
タグでソフト404扱いさせる

24. 3. PWA
2017年のニュース
・PWAMP発表（1月, 7月）
・Google I/0 で導入サービス発表 2件（５月）
・chrome developer tool 機能追加（7月）
・Windows Store 積極的（6月）
・IOSがPWAサポート表明（8月）
・Chromeも順次機能実装中

25. 4. AMP
Accelerated Mobile Pages

26. 4. AMP
Date Article
2016年1月 Accelerated Mobile Pages プロジェクトについて -- 導入ガイ
ド日本語版を本日公開しました
2017年5月 Google AMP No Standalone対応前に知っておくべきポイン
ト（2017年5月版）
はじめに
検索結果に表示される面が追加されるオマケがあるの
で、SEO効果があると話題に。

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. 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. 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. 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. 4. AMP
Date Article
11月 AMPキャッシュのアクセス解析が日本のGoogle検索でも可能に
――AMP Client ID APIがgoogle.co.jpでサポートされる
Google、さらなる高速化を目指してSSRのAMPを開発中
AMPページとオリジナルページの主要コンテンツは一致させる。著しい
差はポリシー違反
日本のYahooがついにAMPを正式サポートか？

32. 4. AMP
2017年のニュース
・AMPのGA計測問題 発覚（3月）
・AMPのGA計測問題 解決（9月）
・ECサイト向け仕様強化（3月〜）
・AMPドキュメント更新（7月）
・Yahoo Japan AMP対応（11月）

33. 5.構造化マークアップ

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. 5.構造化マークアップ
Date Article
1月 Google検索結果のスニペットに表示される日付けはアルゴリズムによっ
て完全に自動化、構造化データをマークアップしても指定できない
2月 「転職・求人」向けの構造化データをGoogleが準備中か？
3月 サイトリンク検索ボックスは構造化データをマークアップしても表示でき
ない。すでに表示できているサイトにのみ有効
これは目立つ! グーグルの検索結果で料理レシピの“リッチカード”が登
場【海外＆国内SEO情報ウォッチ】
Google、リッチスニペットよりもビジュアルなリッチカードをグローバル展
開。レシピ、レストラン、映画が対象
4月 Google、モバイル画像検索に「似ている商品」機能を導入。ECサイトは
売上げアップのチャンス
Googleが画像検索に「スタイルのアイディア」を導入、アパレル系サイト
の画像検索SEOに役立つか

36. 5.構造化マークアップ
Date Article
4月 Googleマイビジネスで飲食店のメニューを登録可能に
5月 Google、検索結果に求人情報を掲載した“ジョブ ボックス”をテスト中
地球マークが付いたパンくずリストを上に表示するモバイル検索結果を
米Googleがテスト中
構造化データはランキングに影響しないが検索結果での見え方を変え
る。Google未サポートの構造化データは検索には役立たない
求人サイトのチャンス？ピンチ？、Google検索で仕事を探せる Google
for Jobs が米国で間もなく公開 #IO17JP
7月 検索履歴や検索場所、デバイスの種類によってリッチスニペットが表示
されないことがある!?
Google、レシピと動画のモバイル画像検索にリッチ結果を導入
JobPostingの構造化データのマークアップによくある質問
転職サイトで求人一覧ページにJobPosting構造化データをマークアップ
できるのか？

37. 5.構造化マークアップ
Date Article
8月 Google、モバイルの画像検索に“バッジ”を表示。レシピと商品、動画、
GIFには特別なラベルを付与
9月 構造化データを設定する際に従うべきガイドラインをGoogleが公開
11月 求人検索のGoogle for Jobsが給与情報と勤務地情報を提供するように
Google、ニュース発行者のナレッジパネルに信頼性を示すタブを追加。
フェイクニュース対策にもなりうる

38. 5.構造化マークアップ
2017年のニュース
・UIの名称がリッチカードに変更（3月）
・求人サイト向けの構造化データ 米（5月）
・品質周りのガイドライン更新（9月）
※レストランのリッチカードが日本で流行った

39. 2018年どうなる？

40. 2018年どうなる？
WRS Update
=> SPAがよりIndexされやすく。
Mobile First index
=> Mobileサイトの見直し発生
SSR AMP
 より早くなる
 作業が発生するか？不明
 新たな構築手法になるか？
構造化マークアップ
 種類は増えていく予定
 求人サービスはチェック
PWA 各Store掲載
 仕事増える可能性大。
 PWAMPも流行るか？
 No Standalone AMPは来
そう（PWA次第

41. END