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