Nuxt.jsのライブラリをGooglebotで検証してみる

nuxt-mqのGooglebot検証

inosy22氏：よろしくお願いします。私からは、Googlebotからのnuxt-mqというライブラリの見え方の検証という話をさせていただきたいと思います。

まず最初に自己紹介なんですけど、猪野と申します。「inosy22」というアカウントでいつも活動してます。

GameWithでサーバサイドエンジニアとして働かせていただいています。サーバサイドエンジニアなんですけど、VueやReactのようなフロントや、インフラ構築などもやっています。

本日の概要について、Nuxt.jsのライブラリである「nuxt-mq」を使ってみます。「nuxt-mq」については後ほど説明します。そのあとに、Googlebotが最近アップデートされたので、その内容を確認して、nuxt-mqでのレンダリングがGoogleobotから正常に解釈されるのかを検証してみた話をしていきたいと思います。

まず私がやりたかったことは、Webページを閲覧するユーザーの画面サイズに応じて、VueComponentの出し分けでした。レスポンシブデザインとかいわれると思うんですけど、コンポーネントを振り分けて、レスポンシブデザインを実現していきたかった。

これをどのようにやるのかというと、nuxt-mqというライブラリがあったので、そちらを使っていきます。

nuxt-mqは何なのかというと、Vueでレスポンシブデザインに対応するライブラリの「vue-mq」を、Nuxt.js向けにサーバサイドレンダリングに対応したものになります。CSSとか詳しい方はメディアクエリとかの挙動を思い出してもらえれば近しいのかなと思います。

Nuxt.jsで設定してみる

Nuxt.jsでnuxt-mqをどういうふうに使っていくのか。まずnuxt.config.jsに設定を書きます。モジュールの設定を書くだけです。

こんな感じで書いてあげて、defaultBreakPointというのは、デフォルトの表示です。ここでは、「lg」と定義しているので、largeのサイズをデフォルトにします。さらに、breakpointsと下に定義しているところは、小さい場合は550ピクセルまでをsmall（sm）と定義して、1,250ピクセルまでをmedium（md）、それ以外をlarge（lg）と定義する感じで、自分で設定を書きます。

設定を書いたらどういうふうにコンポーネント側で使っていくのかというと、タグを利用して「largeの場合はこの中のコンポーネントを出してください」「mediumの場合はこの中のコンポーネントを出してください」「smallの場合はこの中のコンポーネントを出してください」というif文的なものが書けます。

サンプルで作ってみたやつなんですけど、smallサイズであれば緑色、midiumサイズだったら黄緑色、largeサイズだったら黄色というように、背景色が出し分けられるようになっています。これはブラウザのウィンドウを動的に拡大・縮小しても自動で変化します。

特徴としては、サーバサイドではdefaultBreakpointというところに設定されているサイズがレンダリングされます。今回の場合は黄色のLargeサイズの見た目になります。そのあとに画面サイズに応じてクライアントサイドで再レンダリングされます。

「クライアントサイドで再レンダリングされる」、これがSEO的に大丈夫なのかが気になりました。よくSPAはSEO上はよくないとか、そういう話が昔あったと思うのですが、2019年5月に突然の吉報が来ました。

Googlebotが急にアップデートを発表しました。

どんな内容なのかを見てみると、レンダリングエンジンが最新のChromiumになったとのことでした。

ES6が使えるようになったとかいろいろサポートされたのですが、結局何が言いたいのかというと、「Webブラウザでユーザーが表示するのとまったく同様に」Googlebotがクローリングしてくれるようになった話が書いてありました。

ただ、どういうふうにレンダリング結果が見えているのかは僕にはわからなかったので、「本当にnuxt-mqでも、スマホの画面サイズに応じてクライアントサイドで再レンダリングされても大丈夫なのか？」とか「どういうふうにGooglebotは見えているんだっけ？」というところをちょっと見てみたいと思い、検証してみようと思いました。

Googlebot検証で必要なもの

検証の準備に必要だったものが、GoogleSearchConsoleというサービスと、独自ドメイン（外部公開用）、Webアプリケーション。今回はNuxt.jsとAWSを使って構築したものを使ってみました。

Googlebotにクローリングしてもらう構成については、簡易的に作りたかったので、GooglebotからAWSのRoute 53でパブリックのDNSで名前解決してもらって、API Gatewayを挟んでLambda上のNuxt.jsのアプリケーションへアクセスするような構成にしました。Nuxt.jsのアプリケーションは先ほどサンプルで見せたnuxt-mqでレンダリングするアプリケーションです。

GoogleSearchConsoleを、もしかしたら知らない方がいるかもしれないのでお話しておくと、SEO関連のチェックができるものです。検索パフォーマンスや自動クロールの状況を見ることができます。その中でも手動でクロールしてプレビュー確認ができる機能があるので、そちらを使ってみました。

GoogleSearchConsoleとググったら出てくると思うんですけど、ドメインを入れると、そのドメインのクロール状況とかSEO系の情報が確認できます。

ただ、もちろん誰が見ても見れるみたいな感じではないので、発行されたverificationコードをこちらで設定しなくてはならないです。

このTXTレコードをDNSの設定に入れてくださいと書いてあるので、どうやったらいいんだろうという話なんですけど、今回はRoute 53をDNSとして使っているので、そこに先ほどのverificationコードをそのままTXTレコードとしてコピーして設定してあげると、GoogleSearchConsoleに入ることができます。

GoogleSearchConsoleで実際にAWS上のNuxtアプリケーションを見てみると、スライド右側、黄緑色に見えているものがGooglebotのプレビューのスクリーンショットになります。

僕の設定では、デフォルトlargeなのでサーバサイドで黄色い帯がレンダリングされるようにしているんですけど、そのあとに表示サイズmediumの黄緑色の帯がクライアントサイドで再レンダリングされたものが、きちんとPCのクローラーで見られております。

スマホ版クローラーはどうなっているのかというと、スマホ版クローラーもきちんとクライアントサイドで再レンダリングされたものがGooglebotのプレビューでスクショとして出てきています。

ここからわかることとして、今までSPAとかのクライアントレンダリングがSEO的に問題があるんじゃないかという話がありましたが、そこが解決してきている状況です。

まとめとしては、nuxt-mqでVueComponentの出し分けができますよという話です。それから、Googlebotは2019年5月にアップデートされました。これによって、Webブラウザでユーザーが表示するのとまったく同様にGooglebotが解釈できるようになりました。それからnuxt-mqのレンダリングはGooglebotでも有効でした、というお話です。

細かい話はSEOの専門家じゃないのでわからないのですが、今後はSEOのためにSPAなどのクライアントサイドレンダリングを諦めるというようなことはなくなってくるんじゃないかなと思います。

以上になります。ありがとうございました。

（会場拍手）