nuxt-mqのGooglebot検証 /verification googlebot using nuxt-mq

Roppongi.vue#2 LT発表資料
Nuxt.jsのライブラリである『nuxt-mq』を使った際、
クライアントレンダリングが2019年5月にアップデートされたGooglebotから正常に解釈されるかの検証の内容です。

Transcript

1. nuxt-mqのGooglebot検証 @inosy22 Roppongi.vue#2 ２０１９/０７/３１
2. 自己紹介 • 名前：猪野 凌也 @inosy22 • 所属：株式会社GameWith • 役割：サーバーサイドエンジニア • 勉強中： Vue(Nuxt)/Golang/C#(Unity) • 今まで： React/PHP/Java/C++
3. 本日の概要 • Nuxt.js用ライブラリのnuxt-mqを利用してみる • Googlebotの2019年5月のアップデート内容を確認する • SEO確認のため、nuxt-mqでのレンダリングがGooglebotから 解釈されるか確認する
4. やりたいこと Webページを閲覧するユーザーの画面サイズに応じて、 VueComponentの出し分け を行いたい！ （レスポンシブデザインをコンポーネント振り分けで実現）
5. どのようにやるか 「nuxt-mq」を利用する
6. nuxt-mqとは VueでResponsiveDesignに対応するライブラリの 「vue-mq」をNuxt.js向けにSSR対応したもの
7. Nuxt.jsで設定してみる nuxt.config.js の一部 → `defaultBreakPoint` が SSRの初期値 { *** modules: [ [ 'nuxt-mq', { // Default breakpoint for SSR defaultBreakpoint: 'lg', breakpoints: { sm: 550, // 画面サイズ小の最大width md: 1250, // 画面サイズ中の最大width lg: Infinity // 画面サイズ大の最大width } } ] ] *** }
8. VueComponentの出し分け記述 `<mq-layout>` タグで 定義したサイズの時に出す コンポーネントを定義する <div> <!-- 画面サイズ大の場合の表示 --> <mq-layout mq="lg"> <LargeComponent/> </mq-layout> <!-- 画面サイズ中の場合の表示 --> <mq-layout mq="md"> <MediumComponent/> </mq-layout> <!-- 画面サイズ小の場合の表示 --> <mq-layout mq="sm"> <SmallComponent/> </mq-layout> </div>
9. 出し分けできるか確認 ↓ デフォルトSSR時 (PC想定) ↓ ミディアムサイズ (小さいPCやタブレット想定) ← スモールサイズ (スマホ想定)
10. 特徴 • サーバーサイドではdefaultBreakpointに設定されているもの がレンダリングされる • 画面サイズに応じてクライアントサイドで再レンダリングされる
11. 特徴 • サーバーサイドではdefaultBreakpointに設定されているもの がレンダリングされる • 画面サイズに応じてクライアントサイドで再レンダリングされる
12. 特徴 • サーバーサイドではdefaultBreakpointに設定されているもの がレンダリングされる • 画面サイズに応じてクライアントサイドで再レンダリングされる → SEO は大丈夫...？
13. 2019年5月 　突然の吉報が！
14. GoogleBotがアップデート https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html
15. どうなったの？ • レンダリングエンジンが最新のChromiumに！ ◦ 今後も継続的にアップデート追従のサポート ◦ ES6が使える ◦ InterceptionObserverを使ったLazyLoad対応 ◦ Web Components V1 APIが使える ◦ などなど...
16. つまり Google公式より → 「ウェブブラウザでユーザーが表示するのと全く同様に」
17. 本当にnuxt-mqも大丈夫？
18. 検証してみよう！
19. 準備したもの • GoogleSearchConsole ◦ クロール確認用 • 独自ドメイン ◦ 外部公開用 • Webアプリケーション ◦ Nuxt.js + AWS系
20. Googlebotにクローリングしてもらう構成 Googlebot AWS Route53 AWS APIGateway AWS Lambda
21. GoogleSearchConsole • SEOのチェックができる • 検索パフォーマンスを確認できる • 自動クロール状況を見ることができる • 手動でのクロールとプレビュー確認ができる
22. GoogleSearchConsole: ドメインを選択
23. GoogleSearchConsole: ドメイン所有権の確認
24. GoogleSearchConsole: Route53への設定
25. 検証結果(PC版クローラー)
26. 検証結果(スマホ版クローラー)
27. まとめ • nuxt-mqでVueComponentの出し分けができた ◦ デフォルト値はSSR、サイズに応じてクライアントで再レンダリング • Googlebotは2019年5月にアップデートされた ◦ 「ウェブブラウザでユーザが表示するのと全く同様に」 • nuxt-mqのレンダリングはGooglebotでも有効 ◦ GoogleSearchConsoleで確認できた
28. EOP ありがとうございました！