【AMP】「エラー：タグ「style amp-custom」内のテキストに「CSS i-amphtml- name prefix」が含まれていますが、これは許可されていません」の意味と改善方法

AMP（アンプ）はAccelerated Mobile Pagesの略であり、Webページの表示を高速にするための施策です。Googleが推奨しておりSEOにも関連します。WordPressブログであればプラグイン「AMP」によってAMP化は容易に行えるでしょう。
しかしAMP化すると問題が発生することも多々あるのです。該当箇所はGoogleのSearch Consoleで確認できます。本記事では、「エラー：タグ「style amp-custom」内のテキストに「CSS i-amphtml- name prefix」と表示された意味と、その改善方法を解説します。

「エラー：タグ「style amp-custom」内のテキストに「CSS i-amphtml- name prefix」が含まれていますが、これは許可されていません」の意味

GoogleのSearch Consoleにて、こういったエラー文が表示され、困ったことはないでしょうか。 WebサイトをAMP対応させる過程で、AMP対応ページの見た目をデザインさせるために、CSSのスタイルを書くことがあります。

タグ「style amp-custom」とは、AMPを対応させるページのhtmlに記述された下記タグのことを差します。

<style amp-custom></style>

そして、「class name prefix」とは、名前の通り、class名のことを言います。

つまり、エラー文はstyle amp-custom内に含まれている「i-amphtml-」から始まるClass名は指定できない、という意味になります。

「エラー：タグ「style amp-custom」内のテキストに「CSS i-amphtml- name prefix」が含まれていますが、これは許可されていません」の改善方法

これで、エラー文の意味は分かりました。では、どのように改善していけばよいのでしょうか？

改善方法はとても簡単です。
「i-amphtml-」というClass名が入ったCSSの文章を削除するだけです。Class名を変更してしまうと別のエラーが出てしまう可能性がありますので、該当するClass名のCSSの文章を削除するだけに止めるようにしましょう。

エラーが起きているページが複数ある場合は、まずは、1ページだけ修正してみると良いでしょう。そして、Search ConsoleのAMPチェックから修正したページのURL1つを選択して虫眼鏡をクリックします。一度はインデックスされているAMP htmlをチェックしてしまい、エラーが出てくると思いますが、そのままで大丈夫です。

次に、エラー表示を確認したら、右上に見えている「公開URLをテスト」をしてください。そこで初めて修正反映のテストができます。無事にエラーを改善したことを確認したら、全体反映させるために他のページも修正してください。また、該当するClass名が入ったCSSの文章を削除した後は、必ず全てのページを「修正の検証」を行うようにしましょう。

いかがでしたでしょうか？AMPページのカスタマイズは難易度高いと感じてしまいますね。
また、今回の記事でご紹介したエラー文と同様に、「-amp-」や「i-amp-」といった文字列もClass名として指定できません。
なので、これも同じように、該当するClass名が入ったCSSの文章を削除してしまえば解決することが出来ます。

CSSの書き方においての使用の可否については、ドキュメント（外部）にまとまっています。
全て英語表記になっていますので、英語が得意ではない場合は内容を理解するのは少し手間がかかってしまいます。だからといってドキュメントの確認を怠っていると、予期せぬエラーが発生してしまいますのでご注意ください。

そちらを確認しながら、AMPページに適用される専用のCSSプロパティをカスタマイズしていくことをおススメします。当然のことではありますが、エラーが出たとされるAMPはGoogleの検索結果では表示されなくなります。エラーが出た場合はなるべく早く原因を突き止め、改善するようにしましょう。