MR.HARIKIRI-INSIGHTS

[WordPress] AMP対応化で、使用しているその他のプラグインによるエラーが出ないようにするために – プラグイン別 [2020/11/16]

Written by

harikiri

in

Post Views: 245

はじめに

AMPプラグインをインストールしている場合、投稿/ページを公開/更新した際に、AMPの検証/再検証が行われます。サイト毎に使用されているプラグインがAMPに沿ったコードを作るわけでは無いため、AMPの仕様に沿わない場合があります。その結果として、「makeupエラー」や「スクリプトエラー」などがアラートされる訳です。これらのエラーは、AMPにおいてなるべく出なくすることが良いと考えます。そのエラーとなったコードを削除した場合にどうなるのかは、表示させたりしてその結果を確認しないと分かりません。

  • AMP (Accelerated Mobile Pages)はGoogleが提唱する高速化の仕様であり、以下のような制約が設定されている
  • JavaScript は使用禁止
  • CSS は head セクション内にインラインで 75,000 バイト(約 75KB) 以下
  • img タグは amp-img に置換
  • frameタグはamp-fameに置換
  • フォームや video、audio タグを利用するには専用のライブラリをロードしSSL 環境行う
  • すべての仕様に準拠する必要がある
  • AMP の詳しい仕組み

以下の情報は、AMPプラグインを使用している前提で、その他のブラグインの使用として、エラーが出ないように工夫してきた、知識情報です。

あるプラグインを使用する場合、使用していもエラーが出ないもの、使用すると前述のようなエラーが出るものなど、基本的にやってみないと分からないものばかりです。

機能を充実したり、見栄えを良くしたりするために、色々なプラグインを使用することは、速度の制約となるという、トレードオフの関係にあります。その規律(ルール)となっているのが、AMPプラグインです。AMPプラグインは、速度の制約となるものをエラーとして知らせます。エラーとならない使い方、すなわち、機能の有効化/無効化が、AMPプラグインで設定が可能です。

AMPエラーが出たとしても、そのプラグインを使用したい場合は、AMPページでの、そのプラグインの使用を無効化することで、AMPに非対応にできます。この最終手段により、そのプラグインを使用できます。

以下は、そのプラグインを使用して、且つ、AMP対応にしたい使い方について、プラグイン別に示しました。

基本的な設定方法

  • 使用したいプラグインを有効にして、目的のページに使用し、AMPページを更新する
  • AMPの検証済みURLを表示
    • 当該ページが赤フラグ(エラー)となっていれば、そのAMPページを表示させる
    • エラー(削除提案が出ている)について、削除のチェックをつけ、更新ボタンを押す
    • ページを表示して、表示状況を確認する
    • 問題があれば、削除提案のチェックは外す
    • 問題なければ、その後の操作は必要ない。その更新内容を受け入れることになる
  • エラーになった機能の削除を受けてれた場合は、そのプラグイでエラーとなっていた機能を削除したその操作は、今後のその他のAMPページでも自動的に採用されるので、同様のエラーとはならず、デフォルトで削除チェックが付いた状態で更新される。
  • 削除をチェックして更新した場合、その設定は、全てのAMPページに及ぶため、その他のAMPページは、「最新でない結果」というフラグが付く
  • 「最新でない結果」は、全て再検証する必要がある
    • AMPの検証済みURLを表示させ、オプションで表示数を100に設定する。
    • 最後のページを表示させて、全てをチェックして100ページを選択状態にした上で、再検証を選択し実行する。
    • 一つ前の100ページ分のリストに移動して、同様に、全てをチェックして100ページを選択状態にした上で、再検証を選択し実行する。
    • 以上を繰り返し、一つ前の100ページ分のリストを表示する番号として、最後の1までは実施せず、3番目で留めておく
    • その理由は、この再検証のタスクは、リアルタイムで実施されていないので、100ページの処理には、数十分かかるため、すでに完了したページが100ページ分のリストに表示される可能性があるため、複数回の無駄な再検証を避けるためである。

WordPress プラグイン別

現在は、以下、1つのプラグインのみです。

Content of Table Plus

  • 目次の表示/非表示機能を使わない設定にする
  • AMPプラグインが提案するエラーが出る機能を削除設定で更新
  • 以後、新しいページに、以上の設定が自動的に採用される

以上

編集履歴
2020/11/16 Mr.Harikiri
2020/12/11、追記 (基本的な設定方法)
2021/09/13,AMPの制限について追記

関連記事:

[WordPress] Autoptimize プラグインの威力 – ブログ・サイトのスピード改善対策プラグイン – 更にAMP対応まで進めた結果 [2020/05/15] [WordPress] 「AMP」プラグイン と広告プラグイン: 「Advance Ads Pro」- 高速化と広告表示の両立を図る [2020/09/11] [WordPress] AMPページ対応の広告プラグイン – Advanced Ads Pro (有料版) – 導入と運用 [2020/12/10] [用語] AMP ; Accelerated Mobile Pages [WordPress] メンバーシップ・サイトを構築プラグイン – Ultimate Member プラグインの使い方をAMP対応とともに解説 – [2021/03/07] [WordPress] 広告プラグイン – Advanced Ads Pro (有料版)の応用機能(Header/Footerにコードを挿入) [2020/05/03] [WordPress] このサイトの表示に関係する使用している「テーマ」と「プラグイン」のリスト – [2020/09/11] [WordPress] 「AMP」対応奮闘記 – プラグインAMPはVer.2.20になったけれど。[2022/01/05] [WordPress] AMP プラングインの運用 – DS920+のシステムメモリ(4GB)を8GBに増設すると一括検証可能数は、デフォルト「8」から「> 41」に増加 [2022/02/06] [用語] PSI; PageSpeed Insights [WordPress] [2022/09/04]

More posts