• HOME
  • ブログ
  • AMPをチェック
  • 【AMP】「エラー:タグ「style amp-custom」内のテキストに「CSS !important」が含まれていますが、これは許可されていません」の意味と改善方法

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

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

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

ネットユーザーの中には、テキストに「CSS !important」が含まれていますが、これは許可されていませんというエラーメッセージを見たことがある人もいるのではないでしょうか。ある程度のネットワーク環境に精通している人でも、一般のユーザーにとっては、理解することが難しい内容のこのメッセージの意味は、すなわちユーザーにとって重要なサイトに不具合や支障をきたすような可能性があるということです。詳細を理解するためには、AMPを把握する必要もありますので、しっかりとマスターしておきましょう。

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

「style amp-custom」内のテキストに表示されたエラーを改善するための方法としては、先ずはその内容をしっかりと理解することから始めなければなりません。とりわけ、ネットワークサービスを使いこなす自信がない人であれば、ここが重要なポイントといえるのではないでしょうか。

具体的にはAMPページのURLの最後に、#development=1と打ち込むことでインスペクタのConsoleにエラーメッセージが表れます。ですから、この「#development=1」というワードは知識として覚えておくことが求められます。普段使用しているメモ欄や備忘録に足しておくなどすれば安心かもしれません。

また、エラーの指摘部分が広範囲にわたってわかりにくいというケースでは、バリデータを活用することで解消できます。URLを入力してから「VALIDATE」とクリックすれば、エラーメッセージが赤く表示されますので、容易に見つけることが可能です。

記事データに問題の箇所が含まれている場合の対処方法についても理解しておくと良いでしょう。このような事象に遭遇したケースでは、WordPressプラグインの「Search Regex」を使って置き換えを行います。

置き換えについては、任意の文字列でも対応可能のため極めて便利です。システムエンジニアやプログラマーでなくても、やり方さえ覚えてしまえば簡単です。突然、画面にエラーコードやエラーメッセージが表示されても慌てふためくことはなくなります。

「本当にエラーが改善されたか確かめたい」とうユーザーも多いはずです。まして、業務でネットワークを使いこなすことが求められるユーザーにとっては、情報共有の必要性があります。エラーが改善したことの確認は至ってシンプルですので覚えておきましょう。

search consoleに表示される「問題の詳細」ページの右下にある、「公開中のバージョンをテスト」というタグをクリックしてみます。すると、画面に「有効なAMPページです」という表示が出ますので、それを確認して「GOOGLEに送信」ボタンを押下すれば完了です。個別の事象によっても異なりますが、概ね翌日にはエラーが解消されます。

このテーマの関連記事はこちら