JS memo

お洒落にJavaScript。

2019年5月23日0:24

GooglebotがパワーアップしてSEOとJavaScriptの関係はどうなる?

メインビジュアル

GooglebotがパワーアップしてSEOとJavaScriptの関係はどうなる?

今や使いやすいまたはお洒落なWebサイトを作成するのにJavaScriptはとても重要な存在になりました。
同時にSEO対策もWebデザインと同じくらい避けては通れない道となりました。が、
SEOの評価者であるGoogle botさんはまだ十分にJavascriptを読んでくれないので、JavaScriptを実装する際はユーザーとGoogle botさんの両方を考慮しなければいけませんでした。


しかし!そんな苦労をしている中!ついに!「Google botがパワーアップし、今まで非対応だったJavaScriptの仕様のうち、な、なんと1000個以上をサポートするよ!」といったSo Excitingなお知らせが、2019年5月7日にgoogle webmastersのブログとyoutubeにアップされました!


そこで今回はアップされたYoutubeを元に何がパワーアップするのかを簡単にまとめてみました。

目次
  1. Googlebotのパワーアップに関するYoutube
  2. そもそもGooglebotとは
  3. そもそもSEOとは
  4. 新たにサポートするJavaScript
  5. まとめ

Googlebotのパワーアップに関するYoutube

約40分と少々長めですが、Googlebotのパワーアップの概要は始めの約15分くらいにまとめられています。
日本語訳がないですが、スライドに話してる内容やコードが簡潔に書かれているので英語が苦手でもだいたいの内容は把握できると思います。

そもそもGooglebotとは

Google botとは世界各国に存在するWebページを定期的に訪れて、ページの内容を蓄積していくロボットです。
そしてGoogleで検索された時にこの蓄積されたページの中からGooglebotが気に入ったページを検索結果に表示します。
つまりGooglebotに好かれると、Google検索で自分のサイトが多く表示され、流入数が劇的に増加します。

余談ですが、以前までGooglebotのWebページの巡回環境はChrome 41でしたが、最新のバージョンChrome 74にアップデートされました。

そもそもSEOとは

SEOとは何か

SEO対策とはGooglebotに好かれる努力をすることです。
つまり、Google botに高評価をもらい、Google検索結果に多く表示していただくために、サイトのデザインやコードを最適化することです。

SEO対策にはコンテンツ内容、metaタグなどの対策からWeb速度の改善まで幅広苦あり、JavaScriptの最適化も対策の一部です。

ここでJavaScriptをSEOも考慮して実装する場合に問題となってくるのが、Google botはJavaScriptを完全には読めない!ということでした。

新たにサポートされるJavaScript

では実際長年SEOとJavaScriptの狭間で苦しんできたフロントエンジニアを助けるために、パワーアップ前と比べてどの機能に対応できるようになるのか簡潔にまとめます。

ES6

動画では、「モダンなjavascriptをサポートします!」と何回か行っていましたが、ES6の機能に対応します。

ES6とは2015年にリリースされたletやconst、arrow関数などのJavaScriptの新機能のことで、よりJSを効率よく書けるようになりました。
個人的にES6にGoogle botが対応してくれるのは一番嬉しいですね!

IntersectionObserver

IntersectionObserverとは任意の要素がスクリーン上に現れたかどうかを教えてくれるJavaScriptのAPIです。
使用例としてはページに訪れたユーザーの使用データを節約するため、スクリーン上に表示されていない画像を遅延読み込みする時に使用されます。
従来のスクロールイベントの実装は、スクロールする度に画面の位置情報を同期的に取得しなければならないので、サイトが固まったり不具合を起こしやすいという問題点があります。
その反面、IntersectionObserverは位置情報をブラウザで管理してくれるため、サイトに負荷をかけずにスクロールイベントを実装できます。

しかし、googlebotはIntersectionObserverに非対応だったので、「IntersectionObserverでLazyLoadの実装する時はpolyfillを読み込んで私にも分かるように対応してくれ!」とお願いしている状況でした。

今回googlebotがパワーアップしてIntersectionObserverに対応できるようなので、非対応のブラウザの対応のみ考慮するだけでよくなります。

IntersectionOvserverについての記事はコチラ

Web Components v1 APIs

Web ComponentsとはざっくりいうとHTMLで新たに要素を付け加えたり同じHTMLを使い回したい時に、共存するHTMLやCSSと当たらないよう、カプセル化された独自の要素を作成できちゃうAPIのことです。

例えば共通ヘッダーを作成する際は、ヘッダーを読み込むページのcssやJavaScriptと競合しないように設計しなければいけないという問題があります。
この時にWeb Componentsを利用してヘッダーを作成すれば、ヘッダー要素は外部に影響を与えることがないので、上記の問題点を解決できます。

Web Componentsには主に4つの仕様があります。

自由自在にカスタマイズできるCustom Elements

以下のように独自の要素が作成できます。

<my-element></my-element>

要素をカプセル化するShadow DOM

ある特定の要素が他のコンテンツとのクラッシュするのを防ぐために、カプセル化してくれる仕様です。

例えばShadow DOMで要素を指定すると外部のCSSの影響は受けず、Shadow DOMで指定したCSSのみ対応してくれます。
また内部で指定したCSSは外部に影響がありません。

JSからJSを読み込むES Modules

あるJSファイルで別のJSファイルが読み込めるようになること

HTML Template

<template></template>のこと。templateタグ内のリソースはJSでアクティベートしないとレンダリングされません。
display:noneと似ていますが、templateのメリットはJSでアクティベートされるまで画像や動画などのコンテンツをサーバーに取りに行かないため、省エネなことです。

GooglebotのパワーアップでこのWeb Components v1に対応するそうです。

requestidlecallback

優先度の低いJSは後ほどアイドル中に処理してね!とお願いする機能です。

visibilityState

document.visibilityStateでページが現在見れているかどうかを判定してくれます。

CSS Font Loading API

フォントを読み込んだ際に、読み込めたかどうか確認してくれます。

Networking Information API

ユーザーがどのインターネット回線でページを見ているのか教えてくれます。

以前と比較して対応できるようになったJavaScriptの仕様については動画の3:48をご覧ください。

まとめ

最後に言うのもあれですが、今回のパワーアップするGoogle botは「The new evergreen googlebot」と言うそうです。
名前はどうであれこのアップデートで少しでもWebディベロッパーのSEO対策の負担が減ることを祈っています笑