WordPressでAMPプラグインを導入する際の設定と注意点

ダイブツ

この記事は約 5 分で読めます

POCO は AMP ページにすることを前提としたワードプレステーマです。 POCO のインストール後に AMP プラグインをインストールしてください。

このページでは AMP プラグインの設定内容を中心に解説します。また AMP プラグインを使う上で注意してほしいこと、不具合などについても整理しました。

AMPプラグインのインストール

AMP プラグインはワードプレス管理画面の「プラグイン」→「新規追加」から検索してインストールができます。 POCO のインストール後、クラシックエディタプラグインと共に必ずインストールしてください。

プラグインの設定

AMP プラグインのインストール後、ワードプレスの管理画面から “AMP” → “General” を選択して設定画面に移動してください。

順番に説明します。

上の画面 Template では Native を選択します。 AMP 構成には Native と Paired の2種類があります。それぞれこういう違いがあります。

  • Native: 公開コンテンツをはじめから AMP ページとして生成・公開・配信する。
  • Paired: AMP 化したページと、 AMP 化する前の元の html の2つが別々に存在する。2つのコンテンツの本文は同じで、 AMP 専用タグの使用の有無で分かれている。

POCO はシンプルに Native AMP 一本とします。そのため上記の設定では Native 以外を選択しないでください。

次に “Validation Handling” です。

上の “Automatically remove CSS…” はチェックしてください。 CSS の最適化(使っていないコードや改行コードの削除)をプラグインがやってくれます。読み込み速度の改善になります。

下の “Disable admin bar on AMP page.” はチェック不要です。この設定はワードプレスの管理画面にログインしているユーザーだけを対象とした設定です。ほとんどのユーザー(訪問者様)には該当しません。

最後の “Supported Templates” は「どのページを AMP 化するか」を設定します。最も重要な部分です。

まず画面一番上 “Serve all templates…” のチェックを外します。このチェックがあると問答無用で全ページが AMP 化されてしまいます。

全ページを AMP にした方がいいのでは?とお考えでしょうか。そうしない理由が2つあります。

  1. お問い合わせページをプラグイン(+固定ページ)で用意した場合、そのページには Javascript やショートコードが含まれてしまいます。これらは AMP エラーが発生する原因になります。
  2. ユーザーのほとんどは検索エンジン経由で訪問しますが、アクセスするのは(ランディングページは)主に投稿ページです。固定ページやカテゴリページではありません。

この2つの理由から、少なくとも固定ページの AMP 化は不要なはずです。

以上を踏まえて、 POCO 推奨の設定はこのようになります。

  • Content Types: 投稿とメディアにチェック
  • Templates: Singular (投稿ページと固定ページ)、Blog、Archives にチェック
    • 補足1: Homepage は記事一覧か特定のページを指定するかで処理が変わる。ワードプレスの表示設定で「固定ページ」を指定したら AMP にはならない。記事一覧とすれば Archive なので AMP ページになる。
    • 補足2: Archive ではカテゴリページとタグページを最低限チェックして AMP ページ化する。
    • 補足3: Author (執筆者別記事一覧)と Date (月別記事一覧)も必要ならばチェック。(例えば、定数設定でプロフィールリンクを執筆者の記事一覧ページにした場合など)
    • 補足4: search (サイト内検索)と Not found (404) は情報を届けるコンテンツではないので AMP 化しない。サイト内検索は一般的な検索エンジンでもできるので不要。

AMP プラグインには General 設定のほか Analytics (アクセス解析)の設定があります。しかし POCO で標準実装にしているためプラグインでの設定は不要です。このプラグイン設定はタグマネージャーに対応していないためです。

動作確認はプラグインではなく専用ページで

AMP プラグインは各ページに対して「有効な AMP ページになっているか」を検査してくれます。

上の図にあるように、アドミンバー内に AMP の項目が増えます。以下の2つの表示があるようです。

  • 緑のチェックボックス(検査合格、 AMP ページとして登録する基準を満たしている)
  • 黄色の警告アイコン(エラーあり、 Javascript など AMP ページで制限している何かが生成した html コード内にある)

このツールは便利なのですが、なんと見落としがあります。実際にはエラーなのに、緑のチェックボタンが出るケースがありました。

したがって、 AMP 検査をするときは専用の検査ツールを使用しましょう。アドミンバー上では合格でも、この検査ツールではエラーになりました。

外部リンク:AMP テスト – Google Search Console

AMPプラグインは他のプラグインと競合する可能性がある

POCO の基本思想の1つは「プラグインで対応できるものはプラグインを使い、自分で実装しない」です。しかし実際には、お恥ずかしながらこの原則がかなり制限されます。

AMP ページは基本的に Javascript の使用が NG です。そのため Javascript を使用しているプラグインはほぼエラーの原因になります。

特に、キャッシュ系プラグインである Litespeed Cache は私も想定外でした。

Litespeed Cache を有効にするとスクリプトが挿入されてしまいます。その結果、 AMP の検査が NGになってしまいました。しかもアドミンバー上のAMP検査では検出できず(緑のアイコンのまま)、サーチコンソールで NG を認識してしまいました。

このほか POCO の非推奨プラグインは別ページで整理しました。ご確認ください。

関連記事:POCOで動作するWordPressプラグインの一覧と非推奨プラグイン

まとめ

AMP は制約が多くブログ運営するうえで(特にデザインを重視する場合)楽しくないかもしれません。そのため POCO は上級者向けテーマと位置付けています。

AMPページとしてブログ運営をする場合は十分に注意してください。

この記事のカテゴリ:POCOでブログ運営
この記事のタグ: なし

シェアする

POCOを作った人

ダイブツ

WordPressでブログをはじめてみたものの、既存のテーマでは満足できなくてPOCOを制作しました。親サイトのコンセプト「自分の知識やノウハウをすべて公開する」にならって、POCOを通じて得たWordPressの知識はこのサイトで紹介します。

親サイトにある私の紹介:プロフィール

フォローする