このブログの他にもうひとつWordPressでブログを運営しているのですが、そちらで「
AMP化」を試みています。
AMPとはGoogleが推奨するウェブサイトの形態で、とにかくページの表示スピードが速いのが特徴です。
その分、HTMLやCSSに制限があり、運用が難しんですよね。
今では多くのニュースメディアがAMP化しており、サイト運営側にとっても表示スピードが速いことでさまざまな恩恵があるようです。
で、そのAMP化を自分のブログで使おうと思うのですが、これがなかなかうまい事いかない！
コードに制限があるので、AMP化してみたらGoogleから「エラーだよ～」と言われることは日常茶飯事。
そのエラーが解決できることもあれば、素人には難しい場合もあって…。
わたしがものすごくつまづいたエラーが、
AMPエラー→タグ「link rel=stylesheet for fonts」の親タグは「body」ですが、「head」のみ使用できます。
というもの。
FontAwesomeを呼び込むためのコードのようですが、なんでこれが記述されているかぜんぜんわからん…。
七転八倒を経て、なんとか解決できたのですが、ここではその顛末を書きたいと思います。
AMPエラーをテーマ公式に問い合わせてもダメだった
まず試みたのはWordPressテーマの公式に問い合わせること。
わたしが使っている有料テーマは「サポート問い合わせ永年無料」が売りのテーマでした。
AMP化はプラグインなどではなく、そのテーマの機能を利用して実装していたためまずはテーマ公式に問い合わせることに。
…で、問い合わせてみたのですが、これがけんもほろろな対応でして。
ネガキャンしたくないので詳細は書きませんが、まぁなかなかの塩対応でした(笑)
やっぱりヘタな有料テーマより、Cocoonがイイね！
まぁしかし、無料で何でも解決しようとするのが虫が良すぎるだろうと思い、続いて試したのはココナラ 
の利用。
ココナラにはWordPressの相談やカスタマイズを販売している人がたくさんいます。
評判が良い人のWordPressカスタマイズを購入してみたのですが、これまた上手いこといかず！
お金かけたのに…。
まぁ、ココナラのクーポンが貯まっていたので、数百円で済んだのですが。
しかしAMP化はここで暗礁に乗り上げた…かに見えました。
AMPエラー→タグ「link rel=stylesheet for fonts」の親タグは「body」ですが、「head」のみ使用できます。の解決方法
実はココナラでプロに対応してもらっている最中にAMPテストしてみたら、なぜか「正常にAMP化されています」と表示されたり「エラーです」と表示されたり、わけのわからない現象が起きました。
そこで「ん…これはもしかしてキャッシュの問題か？」と思い至ります。
わたしのブログで使っているキャッシュプラグインといえば「WP Fastest Cache Premium」
WordPressブログ高速化のためにはよく用いられるプラグインです。
そしてズバリ原因は「WP Fastest Cache Premium」の設定でした。
WP Fastest Cache Premiumの管理画面から「Reader Bloking JS」のチェックを外せばこのエラーは解決されるよう。
そしたら見事解決！
なんだ…こんな簡単なことだったのかよ…。
参考記事：続：WordPress 用プラグイン「WP Fastest Cache Premium」を使用すると、「AMP」でエラーが発生する (2019/04/07現在)
反省：AMPエラー時は「○○（プラグイン名） AMP」「○○（プラグイン名） AMPエラー」などでググってみるのが大事
今回、こんなにも右往左往したのは自分で解決しようとせず、安易に人に頼ろうとしたことが原因ですね…。
参考記事は「WP Fastest Cache Premium AMP」で検索したら簡単にヒットしました。
そもそもAMPエラー時に一番に疑うべきは、画像とプラグインです。
画像に関しては記事内の画像のコードを少し改変すれば解決することが多いです。（borderタグとか）
一方、プラグインのエラーは単にそのプラグインをオフにすれば良いというわけではなく、今回のようにプラグインの一部の設定が原因になるパターンも多々あるようです。
そうなると自分で逐一検証すると （すべきですが）、かなりの時間がかかるので、やっぱりググって解決したい。
「プラグイン名+AMP」というワードでググれば良いんだという知恵があれば最初からこんなにめんどくさくなかった…。
情報強者への道は遠いです(笑)
そんなわけで、みなさんはAMPエラーがあった時にわたしのようにアホなことはせず、まずは冷静にググってみて下さい(笑)
