WordPress での AMP への対応

  • 記録
Share:

AMP とは

AMP の背景

AMP はウェブサイト配信に関する Google による独自規格です。もともとは「Accelerated Mobile Pages」の略でしたが,スマートフォン向け以外での使用も推奨し始めたことにより,現在では「AMP」自体が正式名称になっています。

HTML / CSS / JavaScript に様々な制限が加わったサブセット規格123と,検索エンジンの CDN によるキャッシュ配信4の組み合わせであり,演算能力や回線速度が限られたスマートフォンでも高速に表示できるというのが売りです。

AMP は建前としては中立の規格ということになっており,AMP Project は Google から独立した非営利組織という体裁になっています。じっさい,「Advisory Committee」には Google とは関係のない人が多く並んでいます56

しかし Board ではなく,その名の通り諮問機関にすぎないことに注意する必要があります。実際の意思決定権限を握っているのは不透明な Technical Steering Committee であり,確認できる限り Google と Twitter の関係者によって占めれています6。運営状況についての情報が公開されている GitHub レポジトリ ampproject/meta を見ても,ほぼ完全に Google 関係者によって取り仕切られていることが確認できます7

AMP Project と Google の関係を象徴しているのは,2019 年に Google が新 gTLD .dev を提供開始したのにあわせてドメイン名をわざわざ ampptoject.org から amp.dev に変更したことでしょう8。これは,chromeos.devfuchsia.devweb.dev といった他の Google 製品の開発者向けウェブサイトに揃えたものと想像されます。

AMP の長所

AMP の採用には以下のようなメリットがあります。

  • 検索エンジンの CDN でキャッシュが配信されるため高速4
  • よって SEO 上優遇される

AMP の短所

一方で,以下のようなデメリットがあります。

  • HTML / CSS / JavaScript の独自サブセットである
  • 既存のプラグイン等の機能と AMP の制限が衝突する場合がある
  • 有効な AMP ページとするには,検索エンジンによるキャッシュ配信に同意する必要がある
  • キャッシュの対象や更新タイミングは検索エンジン側の任意であり,コントロール権がない
  • 事実上 Google によって支配されている

AMP に対応した理由

なぜ AMP に対応していなかったか

上で示したとおり,事実上 Google の独自規格であるというのが理由です。今のところは中立性の建前を保つために注意深く運用されていますが,AMP が当たり前になったときに何が起きるのかは,これまでの歴史が証明してきたとおりです。

なぜいまさら AMP に対応したか

Google は,彼らが Core Web Vitals9と呼ぶ新しい独自指標への傾注を強めています。

そしてついに,来月5月からは,Core Web Vitals が検索結果への掲載順位の決定における要因になることが明かされています10

これはページの表示速度を見るものですが,既存の CMS を使う限りでは,最適化の余地はそれほどないかと思います。一度試みてはみましたが,かなり管理の手間が増えることになった割に変化がなかったので元に戻してしまいました。つまり,意地の悪い言い方をすれば,収益化に成功し高速なサーバを用意できるウェブサイトを優遇する仕組みであると言えます。そのようなサイトにはきっとアドセンスが貼られていることでしょう(対照的に,私も含め趣味で書いている人では,見た目を悪くし訪問者を危険に晒すアドセンスを使用してことが多くあります)。

Core Web Vitals が正式にランキング要因となれば,個人が趣味でやっているサイトは広告収入を最大化することが目的のサイトには到底太刀打ちかなわなくなってしまうでしょう。既に,有料プランのサーバを使用しているサイトであっても,全ページが LCP の不足で「改善が必要」になって久しいです。これ以上は月額 1000 円程度以上するようなプランが必要だと思われます。そのコストを回収するためには,多くの広告を掲載する必要があります。

その文脈では AMP は一種の救済策としての側面を持ち,コンテンツの内容に制限が加えられる代わりに検索エンジンがサーバコストを負担してキャッシュを配信します。

他に Cloudflare の無料プランという選択肢もあります。メンテナンスのコストや代替可能性という点では AMP より遥かにマシな選択肢ですが,表示面では偉大なる Google 様のご命令に沿わないままになるので手間をかけて調整する必要が残りますし,そこまでやっても効果の程ははっきりしません。とりあえず Google でのペナルティをやめてほしいのが目的であれば,Google 自身が基準として公表している要素をパッケージにしている以上,それに乗っかるのが確実でしょう。幸い現在の仕組みでは AMP 版ページでは URL に ?amp というパラメータがつくだけなので,あとで AMP 版ページを削除しても被リンクは有効に機能します。

AMP への対応手順

AMP WordPress プラグインの導入

公式に WordPress 用プラグインが提供されているため,対応は簡単です。サイドバーから「AMP」を選ぶと一番上に「Open Wizard」というボタンがあるので,そこから設定を開始します11

ここで重要なのは「トランジショナル」を選択することです。このモードは対応しているテーマでしか利用できませんが,従来のページがそのまま(いくつかのレンダリングに関係しないタグが追加されるだけで)存置され,?amp パラメータがついたアクセスの場合のみ AMP ページが表示されます。既存の要素で AMP の制限に抵触するものは自動的に削除されます。「標準」は(その名に反して)非常に特殊なモードで,サイト全体が Google の独自規格である AMP 準拠とされてしまいます。もちろん,AMP としてのエラーの修正に大変な手間がかかります。「リーダー」は互換性のためのモードで,AMP に対応していないテーマを使用している場合にのみ選択します。

アクセス解析の追加

AMP では JavaScript の利用に制限がありますが,アクセス解析については JSON の形で値を渡すことで JS での取得と同じように利用できます。

  1. 「アナリティクス」ペインをクリックして開きます

  2. 「種類:」は空欄のままにしておきます。

  3. 「JSON 構成:」に以下を追加します。

{
    "triggers": {
        "trackPageview": {
            "on": "visible"
            "request": "pageview"
        }
    },
    "requests": {
        "base": "https://<Matomo が設置されている URL>/matomo.php?idsite=<Matomo での Site ID>&rec=1&action_name=${title}&url=${sourceUrl}&rand=${random}&apiv=1&urlref=${documentReferrer}&res=${screenWidth}x${screenHeight}&lang=${browserLanguage}&gt_ms=${serverResponseTime}&cs=${documentCharset}&_cvar={\"1\":[\"errorName\",\"${errorName}\"],\"2\":[\"errorMessage\",\"${errorMessage}\"]}",
        "pageview": "${base}"
    }
}
  1. AMP ページへのアクセス時に既存のアクセス解析タグが読み込まれないようにします。私は「Head, Footer and Post Injections」プラグインで自動挿入しているため,これを Plugin Supression ペインで Suppressed にしました(挿入している他のコードも利用できなくなるという副作用はありますが気にしない)。

トラブルシューティング

以下に私の環境で遭遇したトラブルと解決策を示します。

プラグインと AMP 制限の衝突

以下のプラグインが AMP の制限と衝突しました。

  • Contact Form 7
  • Head, Footer and Post Injections (Header and Footer)
  • LuckyWP Table of Contents
  • Open External Links in a New Window
  • WP Githuber MD

対応:Pulgin Supression を Supressed に。

Google Search Console 警告

  1. 必須の構造化データ要素のエラー
    AMP では以下の要素を要求しています。
  • author
  • author.name
  • datePublished
  • headline
  • image
  • publisher
  • publisher.logo
  • publisher.logo.url
  • publisher.name

このうち,以下の要素が問題になります。

  • image
  • publisher.logo
  • publisher.logo.url

image は記事に画像がない場合は存在しません。publisher.logo および publisher.logo.url はテーマの設定でロゴ画像が設定されていません。

対応:"Default Featured Image" プラグインで 1x1 の透明 PNG をプレースホルダとして設定(ただし,これは後述の通りおそらくうまく機能しません)。600 x 60px のロゴ画像を設定の上,表示幅を 0px に。再検証キュー中。

なお,あえて透明 PNG を使用する理由は後述します。ロゴ画像を使用しない(表示幅を 0px にする)のは,その情報の本質が文字列である以上,体裁(フォント種類やサイズ,表示色)の選択は基本的にユーザの選択に委ねられるべきだと考えるためです。

  1. 推奨サイズより大きい画像を指定してください
    image に設定される画像には主に以下のような技術的制限があります。
  • 幅が 1200px 以上であること。
  • アスペクト比が 16x9、4x3、1x1 の高解像度画像(幅と高さをかけて 800,000px 以上の画像)が複数指定されていること。
  • Google 画像検索が対応しているフォーマットであること。

ほか,画像は記事の内容に関連するものである必要がありますが,大手メディアでも意味のない画像が掲載されていることが一般的であり,実際には空文化しているようです。

publisher.logo には以下のような制限があります。

  • 60x600px の長方形に収まり,かつ,高さが 60px である(推奨)か幅が 600px でること。
  • 文字の場合,文字の高さは 48px に納め,上下に余白を追加して全体の高さを 60px にすること。
  • 背景が無地である場合,周囲に 6px 以上の余白を追加すること。

詳細は Google の AMP に関するドキュメントを参照してください。

publisher.logo は容易に対応できますが,問題は image です。言うまでもなく,必ずしもウェブページに挿入すべき画像があるとは限りません。本の全ての節に図表があるわけではないのと同じことです。そのうえ解像度の制限は厳しく,一般的な図表やロゴでは要求を満たすことができません,Google の要求に合致した画像を掲載するためには,意味のないストックフォトを挿入するなど,ユーザの利便性を損なうことをする必要があります。これは受け入れられないことです。

対応:publisher.logo および publisher.logo.url については上掲のとおり。image は放置して経過観察。

構造化データは AMP の仕様ですが,画像サイズは Google 検索の仕様ということになっているようです。もちろん AMP は Google のものなので実質的に両者の区別はありませんが,Google としては AMP は独立した中立の規格だとの建前を保ちたいはずである以上,なお有効な AMP として扱われる可能性があります。ただし,Google のドキュメントには以下のような記述があります。

AMP の構造化データが、推奨サイズより小さい画像を参照しています。これにより、Google 検索で AMP 関連の機能がページに表示されなくなる可能性があります。

結語

Google による独占の弊害がいよいよ大きくなってきたことを感じます。

ユーザの利便性を考える限り完全な AMP 対応はできないことが判明したため,実験的に画像サイズについての警告は放置したまま運用することにしました。AMP ページとして扱われない等の問題が発生する場合は,AMP での対処を断念して Cloudflare CDN 無料プランでの対応を模索します。

  1. AMP HTML Specification - amp.dev
  2. Style & layout - amp.dev
  3. Documentation: - amp.dev
  4. AMP ページのキャッシュの仕組み - amp.dev
  5. AMP Advisory Committee 2020 election results – The AMP Blog
  6. AMP Project’s new governance model now in effect – The AMP Blog
  7. GitHub - ampproject/meta: Information about the AMP open source project.
  8. AMPproject.org moves to amp.dev! – The AMP Blog
  9. 【重要】コアウェブバイタルとは? LCP/FID/CLSをわかりやすく解説【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ | Web担当者Forum
  10. グーグルSEOのランキング要因にコアウェブバイタル、2021年5月からに決定【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ | Web担当者Forum
  11. 関係ありませんが,私はサイドバーに直接項目を置くか「設定」以下に置くかを選択できないプラグインは嫌いです。

コメントを残す

投稿にあたり,完全な IP アドレスが保存されます(公開されません)。

コメントはスパムフィルタで処理され,承認後に公開されます。