Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

6979e2d5440dda83d31c68d80503b0f5?s=128

inosy22

July 31, 2019
Tweet

Transcript

  1. nuxt-mqのGooglebot検証 @inosy22 Roppongi.vue#2 2019/07/31

  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 ありがとうございました!