
2025.02.06
ポンコツ期、孤独期、成果独り占め期を経て… サイボウズのプロマネが振り返る、マネージャーの成長の「4フェーズ」
nuxt-mqのGooglebot検証(全1記事)
リンクをコピー
記事をブックマーク
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-mqをどういうふうに使っていくのか。まずnuxt.config.jsに設定を書きます。モジュールの設定を書くだけです。
こんな感じで書いてあげて、defaultBreakPointというのは、デフォルトの表示です。ここでは、「lg」と定義しているので、largeのサイズをデフォルトにします。さらに、breakpointsと下に定義しているところは、小さい場合は550ピクセルまでをsmall(sm)と定義して、1,250ピクセルまでをmedium(md)、それ以外をlarge(lg)と定義する感じで、自分で設定を書きます。
設定を書いたらどういうふうにコンポーネント側で使っていくのかというと、
サンプルで作ってみたやつなんですけど、smallサイズであれば緑色、midiumサイズだったら黄緑色、largeサイズだったら黄色というように、背景色が出し分けられるようになっています。これはブラウザのウィンドウを動的に拡大・縮小しても自動で変化します。
特徴としては、サーバサイドではdefaultBreakpointというところに設定されているサイズがレンダリングされます。今回の場合は黄色のLargeサイズの見た目になります。そのあとに画面サイズに応じてクライアントサイドで再レンダリングされます。
「クライアントサイドで再レンダリングされる」、これがSEO的に大丈夫なのかが気になりました。よくSPAはSEO上はよくないとか、そういう話が昔あったと思うのですが、2019年5月に突然の吉報が来ました。
Googlebotが急にアップデートを発表しました。
どんな内容なのかを見てみると、レンダリングエンジンが最新のChromiumになったとのことでした。
ES6が使えるようになったとかいろいろサポートされたのですが、結局何が言いたいのかというと、「Webブラウザでユーザーが表示するのとまったく同様に」Googlebotがクローリングしてくれるようになった話が書いてありました。
ただ、どういうふうにレンダリング結果が見えているのかは僕にはわからなかったので、「本当にnuxt-mqでも、スマホの画面サイズに応じてクライアントサイドで再レンダリングされても大丈夫なのか?」とか「どういうふうに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などのクライアントサイドレンダリングを諦めるというようなことはなくなってくるんじゃないかなと思います。
以上になります。ありがとうございました。
(会場拍手)
2025.01.30
2月の立春までにやっておきたい手帳術 「スケジュール管理」を超えた、理想や夢を現実にする手帳の使い方
2025.01.29
社内会議は「パワポ」よりも「ドキュメントの黙読」が良い理由 Amazon元本社PMが5つのポイントで教える、資料の書き方
2025.01.28
適応障害→ニート→起業して1年で年収1,000万円を達成できたわけ “統計のお姉さん”サトマイ氏が語る、予想外の成功をつかめたポイント
2025.02.03
「昔は富豪的プログラミングなんてできなかった」 21歳で「2ちゃんねる」を生んだひろゆき氏が語る開発の裏側
2025.01.31
古い手帳から新しい手帳への繰り越し方 手帳を買い換えたら最初に書き込むポイント
2025.02.03
手帳に書くだけで心が整うメンタルケアのコツ イライラ、モヤモヤ、落ち込んだ時の手帳の使い方
2025.01.30
若手が「長く働きたい」と思える職場の3つの要素 データから見る、部下を伸ばす関わり方
2025.01.30
とりあえず60点の資料で議論、不要な文章は「容赦なく削る」 Amazon元本社PMが語る、ドキュメント作成の7ステップ
2025.01.29
何でもできるはNG? CTOが語るエンジニアの成長戦略とキャリア展望
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由