SEO担当者向け PWA・SPA・Service Worker 超入門。もう「JavaScript苦手」なんて言ってられない
SEO担当者として「JavaScriptは苦手」「PWAとかService Workerとか、わからなくていい」と言っていられない時代になってきている。
本記事では、最新かつ未来のウェブ技術「PWA」「SPA」「Service Worker」について、SEOや検索エンジン対応という観点をふまえて、全3回にわたって基本的なところから解説していく。
SEO担当者はいつも、JavaScriptに不信感を抱いてきた。
この不信感は、彼らの経験から来ている部分もある。検索エンジンは昔からJavaScriptが苦手だったからだ ―― JavaScriptに大きく依存しているコンテンツを発見し、クロールして、正確にインデックス化するが貧弱だった。
だが実際には、SEO担当者らの態度は、知識や経験に基づくというよりも、「とにかくJavaScriptを警戒する」という習慣から来ている側面もある。このことは、何年もから妥当性を失っている古いSEOのテクニックに依存したり、「テクニカルSEOに習熟するのに最新のウェブ開発手法を理解する必要はない」と考えたりする態度として表れている。そうした態度のせいで発生している状況がこれだ:
マーケティングとしてのSEOにおける技術的な知識の格差が常に広がり続け、多くのSEO担当者にとって新しい問題の解決をますます困難にしている。
※マイク・キング氏が「テクニカルSEOの復権」(日本語記事はこちら)で述べている言葉
実際のところ、多くのSEO担当者が、次のような先進的な技術に拒否感をもっている:
- PWA(プログレッシブ・ウェブ・アプリ)
- 最新のJavaScriptフレームワーク(React、Angular、Vue.jsなど)
これらの技術は「ウェブの未来」だと考えられるようになってきているものだ。にもかかわらず、それを取り入れようとしないのは言うまでもなく、探求することすら拒むようなSEO担当者は、時代に取り残されるリスクを抱えている。
この記事では、PWAを新たな視点から取り上げようと思う。SEOとユーザビリティの両方にもたらす影響を探るだけでなく、あなたがおそらく耳にしたことのない最新のフレームワークやビルドツールを取り上げ、ウェブ技術の最前線に立つために取り入れる必要がある手法を紹介したい。
1. PWA、SPA、Service Workerとは?
「PWA」「SPA」「Service Worker」―― SEO担当者に限らず、こうした言葉を「聞いたことはあるが、よくわかっていない」人もいるだろう。まず、これらがどういったもので、何を達成するために存在するのかを簡単に解説しておく。
「PWA(ピー・ダブル・エー)」とは、スマートフォンアプリと同じような機能や、安定して高速に動作する快適なUXを、ウェブで実現する手法や、そうした技術でつくられたサイトを指す(「Progressive Web Apps」の略)。
「SPA(エス・ピー・エー)」とは、ブラウザでリンクやボタンを操作したときにページ全体を読み込み直すのではなく、動的に処理を行って表示を更新するような、アプリケーション的な動作をするページを指す(「Single Page Application」の略)。
「Service Worker(サービス・ワーカー)」は、主にPWAで「アプリのように高速かつ信頼性のある動作」をするための仕組みや、その仕組みで動作しているプログラムを指す。
「PWA」は、ネイティブアプリと同じようなユーザー体験を提供するウェブサイトだといえる。たとえば、次のようなことを実現できる:
プッシュ通知などの機能によって、企業はオーディエンスとの再エンゲージメントが簡単になる。
ユーザーはアプリストアで面倒な作業をすることなく、お気に入りのサイトをホーム画面に追加するだけで、アプリをインストールしたかのように使えるようになる。
オフライン環境や低品質のネットワークでも動作し、iOSやAndroidのネイティブアプリと同じように、非常に優れたフルスクリーンのユーザー体験を提供してくれる。
何よりも素晴らしいのは、上述のような特徴をもちながら、オープンでアクセスしやすいというウェブの基本的な性質は変わらず、それどころか、場合によっては強化されている点だ。
その名が示すとおりPWAはプログレッシブ(アプリの機能を「段階的」に拡充できる)である。かつ、レスポンシブであるため、使っているブラウザやデバイスの種類に関係なく、すべてのユーザーが利用できるように設計されている。また、自動で最新の状態に保たれ、これから説明するとおり、通常のウェブサイトのように検索したりリンクを張ったりしてもらえる。
さらに素晴らしいことに、PWAは採用するかしないかという二者択一の話ではない。既存のウェブサイトにPWAの機能を一部だけ取り入れ(シンプルなService Worker経由で)、PWAのメリットをすぐに享受することも可能なのだ。
![](https://webtan.impress.co.jp/sites/default/files/images/blank.gif)
PWAを使えば、スマートフォンでネットワーク接続ができない場所に行ってもスムーズに使い続けられるようにもできる(ウェブベースであっても)
とはいえ、PWAはまだ登場から日が浅い。そのため、サイトに実装するには、当然ながらそれなりの手間が必要になる。それでもPWAは、ウェブにとってこの10年で最大の進歩の1つであることは間違いない。PWAは急速に普及しつつあり、企業はPWAがさまざまな現実のビジネス目標を達成できることに気づきつつある。
PWAの機能と要件についてはGoogle Developersで詳しく解説されているが、PWAを可能にしている重要な技術は次の2つだ。
※Web担編注: 上記リンク先は、本記事編集時点でまだ日本語版がないが、同じくグーグルが公開している「はじめてのプログレッシブウェブアプリ」の記事は日本語化されているので、参照してほしい(技術的な記事ではあるが)。
App Shell(アプリケーション・シェル)アーキテクチャ
これは、「ロジック」(プログラムの処理)と実際の「コンテンツ」を分離するもので、SPAを開発する手段として使われている。
アプリが機能するために必要な最小限のHTML、CSS、JavaScriptで構成された、キャッシュ可能なユーザーインターフェイス(UI)の骨格だと考えればいい。
主にReact(リアクト)、Angular(アンギュラー)、Vue.js(ビュー・ジェイエス)などのJavaScriptフレームワークを使用して構築されるアーキテクチャであることが多い。
Service Worker(サービス・ワーカー)
これは、ブラウザがページとは別にバックグラウンドで実行する特別なスクリプトだ。インターネットとブラウザの間に入って中継動作するもので、ページからのネットワークリクエストを途中で受け取り、プログラムに従って処理する。
ネットワークの技術用語でいう「プロキシ」のように機能するものだ。
この2つの技術は互いに排他的ではない。SPAモデルは、Service WorkerやPWAよりずっと前から存在している(2010年のAngularJSの登場によって成熟した)。後述するが、SPAとして構築されていないPWAを作成することも十分に可能だ。
ただし、この記事で取り上げるのは、最新のPWAを開発するための「標準的な」アプローチだ。この2つの技術を採用する企業が急速に増えるなか、こうした流れに続くことにしたSEOチームにもたらされる影響(と機会)について説明したい。
まずSPAを可能にするApp Shellアーキテクチャを取り上げ、SPAモデルのレンダリングにもたらされる影響を探っていこう。
この記事は、前中後編の3回に分けてお届けする。
今回は、全体の導入として「SPA」「PWA」「Service Worker」についての基本と、それらがSEO担当者にどう関係するのかの概要を解説した。
中編となる次回は、PWAを可能にしている2つの技術のうち、SPAを可能にするApp Shellアーキテクチャについて説明する。→中編を読む
ソーシャルもやってます!