AMP対応とは?簡易ページと考えたら負け! AMPでサイト自体を構築すべき決定的な理由

私のサイトはPage Insight 90点以上のページで溢れています

 WEBマーケターの方を中心に日々、検索エンジンランキング向上のための施策に取り組んでいることかと思います。その中でも重要な1つの指標が [サイトの高速化]です。2020年5月28日に、Googleが「2021年からコアウェブバイタルを検索ランキングの要素に含める」と発表したことから、私も準備を行いました。

 ただ、これが思ったより非常に、本当に非常に大変な作業でした。そもそも、エンジニアである私としては、サイトの高速化のために行っていたことは下記でした。

  • ページキャッシュの適用
  • ブラウザキャッシュの適用
  • サーバースタティックキャッシュの適用
  • オブジェクトキャッシュの適用
  • 画像の遅延読み込み
  • gzip圧縮
  • CSS遅延読み込み
  • JSの遅延読み込み
KAZU

上記の施策の実施作業については、また別記事で述べて更新したいと思います。このサイトは私が2021年に独立するために、ブランド構築目的で2020年10月に始めたばかりでまだ記事ないっす笑

 残念ながら、Googleのコアウェブバイタルは、これらの全てを行っても効果がほとんど出ません。というのも、Googleが見ているのは「サーバー云々やフロントの小手先のテクニックを適用した上での実測値だけでなく、そのページが、Googleの求める条件にどれくらい近いか」だからです。

  • レンダリングを妨げるリソースの除外 : [レンダリングを妨げるリソース(JS / CSS)の遅延読み込み]ではなく、削除を求めている
  • 適切なサイズの画像
  • CSS の最小化 : そのページ上で使用されていないCSSを全削除
  • JavaScript の最小化 : そのページ上で使用されていないJSの全削除
  • 次世代フォーマットでの配信
  • CSS / JS 解析時間 : 複雑なCSSとJSは解析に時間がかかる
  • その他諸々

 これはほんの一部ですが、こういった条件を全て満たすのは至難の技でした。また、1つ1つの項目に対して、専門的な知識が必要になるため、導入するスキルを持ち合わせている人自体が非常に少ないのが現状です。企業の開発者の中でわかる人が1人もいないというのが当たり前なのです。

 そんな中、IDEA HACKはコンテンツ量が多かったりTwitterのタイムラインなどのモジュールを入れている一部のページで70点台後半から80点台、その他のほとんどのページでは90点台を達成しています。

KAZU

PCでは・・・なんてセコいことは言いません。モバイルでです。PCは条件を満たすと99点とか出せますよ。

 モジュールを入れている記事の一例はこちらです。

SEO効果を向上させるXMLサイトマップとは?注目すべき点と作り方

 この記事のGoogle Page Speed Insightの評価を見てみましょう。

これは低い時の例です。Twitterなど外部モジュールを入れていると、値が低くなります。

 では、次にモジュールを入れていない例を紹介します。

Atom エディターで全角スペースを表示させる方法
Atom エディターで全角スペースを表示させる方法

 この記事のGoogle Page Speed Insightの評価を見てみましょう。

モジュールがないと、高評価が出ることが多いです。

 実際に、この値が毎回必ず出るわけではありませんが、世の中のほとんどのサイトが20点くらいでうろちょろしているので、相対的に非常に高い数値が出せていると自負しています。

 ではこれをどうやったのかですが、答えはAMPです。

AMP(Accelerated Mobile Pages)とは?

 AMP(Accelerated Mobile Pages)とは、モバイルページを高速に表示させることを目的にTwitterとGoogleによって共同で開発されている「WEBフレームワーク」です。広義にはBootstrapなどのWEBライブラリと同種の位置付けの物で、別にGoogle検索に対応するためだけのテンプレートではありません。

 AMPがGoogle検索エンジンのための機能ではなく、Google検索エンジンがGoogleが求める条件を満たしたAMPページをGoogleのサーバーにキャッシュして、より良いユーザ体験をGoogle上で提供するという認識がより正確です。また、GoogleのトップカルーセルにAMPページを表示する様にしているため、より良いビジュアルと検索順位を獲得するために効果的です。

「産経ニュース」で検索したら最新情報が全部AMPページです。報道機関はAMP対応が早かった事で知られています。

AMPの構成要素

AMP HTML

HTMLのサブセットに当たるマークアップ言語です。カスタムタグとカスタムプロパティが用意されており、それらを組み合わせて構築することになります。ただし、通常のHTMLに精通している場合は、既存のページをAMP HTMLに対応させることは難しくはありません。

AMP JS

モバイルページ用のJavaScriptフレームワーク。ほとんどの場合、リソース処理と非同期ロードを管理します。サードパーティのJavaScriptはamp-acriptタグを使って導入できますが、いくつかの制約がある点に注意してください。

AMP キャッシュ

AMPページ向けのCDNツールです。Googleのバリデートを通過したAMPページをGoogleのサーバーにキャッシュして配信するため、WEBサイトのサーバーリソースの節約にもつながります。

GoogleがAMPページを検索エンジンに利用する条件

 私を含め、一度は勘違いをしてしまうことですが、AMPはそもそもGoogleの検索結果対策に行うツールではなく、Bootstrapと同じ位置付けにある「WEBフレームワーク」の1つです。実際に公式サイトのキャッチフレーズにも書いてあります。

AMPはWEBコンポーネントフレームワークです。

別にAMPページ自体に制約があるわけではなく、AMPページをGoogleが検索結果に利用するための条件をGoogleが指定しているだけです。ここを勘違いしている人が本当に多いです。

 では、GoogleがAMPページを検索エンジンに適用する条件はというと、大まかには以下の4つしかありません。

  • htmlタグに専用の文字列を追加
  • CSSを全てインラインで記載
  • CSSの合計容量を全て75kbに制限
  • JSはamp-scriptを使い、150kbに制限

 別にこれらの条件を満たさずともAMPというWEBフレームワークの利用は可能です。もう一度言いますが、AMPはBootstrapと同じライブラリの一種にすぎないからです。

【AMPの誤解1】AMP = CTR / 収益 / PV 向上ではない

 AMP対応を行えばメリットが必ず生まれると考えている人はその考え方を改めるべきです。まず、AMPはGoogle広告しか許可しないため、アウトブレインやログリーと行ったレコメンドエンジンを使っているメディアでは導入ができません。レコメンドを外した上で実装したとしても、これらの広告分の収益が丸ごとなくなるわけですから、むしろ収益減の元になります。

 加えて、「AMP = Google検索向けに用意する通常ページとは別のテンプレートで作る簡易ページ」と捉えている人も要注意です。デザインが違うということは、ユーザー体験も違うということです。つまりAMPページと通常ページでユーザーの行動が変わります。このため、AMPページの顧客満足度が低い場合、あなたのサイトのCTRや収益に影響が出ます。

 例えば、海外のWordPressホスティングサービス「Kinsta」はAMP対応を試験した結果、CTRが著しく低下したために取り下げて、逆にAMPを取りやめる方法を事細かに解説しています。

【AMPの誤解2 】AMP対応 = 簡易ページは選択肢の1つでしかない

 多くのサイトとその開発者は、この部分を根本的に勘違いしています。そのため、

質問者

AMPと通常ページでテンプレートを2つ用意しないといけないな。

質問者

AMPはできるだけ簡素にしないといけないな。

と考えてしまいます。私からすると、

KAZU

ならAMPをWEBフレームワークとして採用し、テンプレートを分けずにサイトを作れば良いですし、そしたらGoogleがコアウェブバイタルに求める通りのフォーマットでサイトの運用ができるわけですから、Google Page Speed Ingihtの評価も勝手に上がると考えます。

 私はこの考えを元に、WordPressのテーマ[Brandia]をAMP対応した結果、このテーマを利用しているIDEA HACKはいつでもどこでも高得点を出せる様になりました。ただし、Elementorを使っているLPページや決済ページは除きます。

質問者

でも、通常ページのAMPで作ったらデザイン性も機能も大きな制約が出るのではないですか?

KAZU

きちんとソースを整理した上でサイトを構築すればページを簡素化しなくてもサイトの構築は可能です。Brandiaの場合はヘッダーとフッターのCSS使用量は30kb程度に抑えています。記事のコンテンツ部分に関しては、その内容によりCSSの容量が変わってきますが、45kbの余裕があるわけですから、ページがGoogle検索に利用される条件を満たすことが可能です。

WEBバイタルの評価を上げたいなら、検索エンジン対策のページを全てAMPで作る

 この実体験から「AMP = 簡易ページ」という考えは選択肢の1つであり、絶対ではないという認識を持ちました。

  • Google検索対応のためにAMPを使った簡易ページを作る
  • AMPを超高速な「WEBフレームワーク」として扱い、サイトを構築する。Google検索対応はそのついでに過ぎない。
  • 確かにAMPページを簡素にしないと、CSSの容量制限(75kb)を回避できないページが多少は出てきます。努力をすればほとんどのページでは回避できます。コンテンツの構成上どうしても回避できないページは諦めましょう。Google検索対応の条件(75kb)を満たすことよりも、その様な一部のページは諦めて、Google Page Speed Insightから高評価を得ることの方がずっと大切です。

 この様に、考え方をシフトすれば、Googleのコアウェブバイタルへの対応は非常に簡単になります。あなたが私と同じ様にWordPressでサイトを運営しているのであれば、専用のプラグインBrandiaを利用し、そしていくつかの注意点を頭に入れてサイトを運営すれば、AMP対応は非常に簡単にできます。

 AutomaticとGoogleが共同で開発している専用プラグインは大変素晴らしく、あなたのテンプレートをAMPに変換する機能を用意しているので、これを使えば難しくないわけです。

 加えてこのプラグインの癖を理解して、より適切な形でCSSの記述・AMP JSの記述を行うことで、Brandaは非AMPページと同様のデザインでのページ表示を可能にしています。