AMP

AMP

　携帯などでページの表示スピードが増すというAMPですが、これがなかなか一筋縄では設定ができません。
　私が使っているテーマ cocoon では、AMP化は、「管理メニュ>cocoon設定>AMP」で、「AMP機能を有効化する」のタブにチェックを入れるだけです。でもそれだけだと、様々な所で不具合が起こります。
　AMPページで不具合が起こると、AMPでないページの検索結果にまで、ご丁寧に「このページには AMP 実装エラーがあります。」というような警告が出てくるので、この様になったしまったままAMP化するのもどうなのかなという感じです。

外部cssが読み込めない

　一番困るのは、外部cssが読み込めないことです。これまで、Simple Custom CSS and JSプラグインを使ってcssやJavascriptを追加していたのに、AMPページではどちらもそれでは動きません。
　結果、ページの見出しやタイトルが、既定のものになってしまって、独自に設定したものが無効になってしまいます。
　そうしないためには、「外観>ﾃｰﾏｴﾃﾞｨﾀｰ」から、cssなら、style.css、phpなら、function.phpを直接編集します。しかし、元のテーマを編集しても、バージョンアップ時にすぐ上書きされてしまっては大変ですから、cocoonのような子テーマが用意されているのものなら、その子テーマを編集することで、バージョンアップがされても、編集結果が上書きされることを防ぐことができます。子テーマが用意されていないテーマなら、子テーマを用意する必要があります。
　ただし、AMP で利用できる CSS のサイズ上限は 75,000 バイト (約 75KB)までです。
　cssやJavascriptのテーマエディターでの設定方法については、別ページを参考にしてください。

テーマエディター初回使用時の警告

　テーマエディターを最初使用するときだけ、次のような警告が出てきます。

これに躊躇していては先には進めませんから、あえて、テーマエディターでの編集を決行します。

画像の回り込み

　回り込みを指定した画像で、回り込まないことがあるので、それよりは右か左かだけでもまだ回り込んだ方が良いので、cssに、

amp-img{
  float:left;
}

を追加しました。

AMP コンポーネントの「script」タグがありません

　「このページには AMP コンポーネントの『script』タグが必要ですが、このタグがありません」というエラーが出てきました。
　これは、Google Analytics Dashboard for WP (GADWP)プラグインを導入していると出てきました。おそらく、Site Kit by Googleなども怪しいと思います。
　これらのプラグインで設定されるスクリプトと、cocoonが設定するスクリプトとが干渉して、cocoonの設定が有効になっていないからなのでしょう。

AMP HTML タグにレイアウト属性がありません

　楽天アフィリエイトなどで、リンクページなどがなくなっていると、リンクされた画像が表示できないので、表示するべき画像のサイズが特定できずに

「AMP HTML タグにレイアウト属性がありません」のエラーになります。
　AMPページのソースを見て、画像のURLが設定されていない上記のような記述があれば、このエラーの原因になります。

エラー確認には Google Search Console

　エラー確認には Google Search Console を使います。サチコと言うんだそうです。
　AMP以外にも、パンくずリスト、モバイルユーザビリティの項目もあります。
　「URL検査」を実行すると、HTMLのどこらあたりに問題があるのかを教えてくれます。ホームページを作っていると、いろいろな所でエラーが出てくるので、サチコさんには色々とお世話になることでしょう。
　でも、よくわからないで、なすすべなく結局そのままというパターンも結構多いです。