2017年8月ごろに、ブログの AMP 対応を実施し、その後 2017年10月から徐々に Google Search Console の AMP エラーが増え始めました。
それなりの数になったため、出力される警告、エラーに対処しました。
結果を以下に記載します。

[TOC]

前提

使用しているOS 等の情報を記載します。

Google Search Console 上で出力されている問題

以下のような問題が出力されています。それぞれ頭から対処していきます。1

問題重大度問題のあるページ
1HTML タグの禁止された用法、無効な用法致命的
2同等の AMP タグがある HTML タグの使用禁止致命的
3無効な CSS スタイルシート致命的
4AMP タグの無効な用法致命的
5ページにユーザー作成の JavaScript がある致命的
6サポート終了のタグまたは属性の使用重要ではない問題

HTML タグの禁止された用法、無効な用法

ドリルダウンして、警告の詳細な内容を確認すると、以下の内容が出力されていました。

  • タグ「 wicket:header-items 」は許可されていません。

  • タグ「 a 」の属性「 href 」に無効な値「 https://.... 」が設定されています。

  • タグ「 string, 」は許可されていません。

  • タグ「 searchresult 」は許可されていません。

  • タグ「 install_apps 」は許可されていません。

これは HTML のフィルタを外したことが影響していて、対象のページで HTML タグとして認識される文字列を使用していたため、出力されていました。対象のブログ投稿の文字列を HTML として認識されない形式に変更して対応しました。

同等の AMP タグがある HTML タグの使用禁止

詳細な警告として以下が出力されていました。

  • タグ「 iframe 」はタグ「 noscript 」の子孫としてのみ使用できます。「 amp-iframe 」ではありませんか？

これは、AMP 向けに タグ変換を行っていますが、その中で iframe の考慮が足りなかったようです。
iframe 向けのタグ変換処理を追加しました。2
Add convert iframe to amp-iframe · kemsakurai/mezzanine-theme-amp-start-blog-post@f051786

無効な CSS スタイルシート

詳細な警告として以下が出力されていました。

  • AMP ドキュメントでインラインの「 style 」属性を使用することはできません。「 style amp-custom 」タグを代わりに使用してください。
    これは、Jyupiter NoteBook で 出力した Markdown 形式の投稿で出力されています。
    タグの style 属性を無理矢理インライン化する filter が必要なのかもしれません。
    すぐには対応できそうにないので、後日対応しようかと思います。

AMP タグの無効な用法

詳細な警告として以下が出力されていました。

サポート終了のタグまたは属性の使用（重大ではない問題）

詳細な警告として以下が出力されていました。

  • このページで拡張機能「amp-analytics」が検出されましたが、この拡張機能は使用されていません（「amp-analytics」タグが見つかりません）。これは今後エラーとなる可能性があります。

これは、amp-analytics の機能を使用していないにも関わらず、タグのインポート記述があるため、出力されていました。
過去に勢いあまって、GTMタグの出力をコメントアウトしていたので、それを復活させて使用するようにしました。

  • base.html の記述 

    <body id="{% block body_id %}body{% endblock %}">
{% if settings.AMP_GOOGLE_TAG_MANGER_ID %}
<amp-analytics config="https://www.googletagmanager.com/amp.json?id={{settings.AMP_GOOGLE_TAG_MANGER_ID}}&gtm.url=SOURCE_URL"data-credentials="include"></amp-analytics>
{% endif %}
{% if settings.AMP_GOOGLE_ADS_CLIENT_ID_OVERLAY %}

  • settings.py の記述 

    #########
# AMP
#########
AMP_GOOGLE_TAG_MANGER_ID = "GTM-XXXXXXXXXX"

AMP テンプレート作成後の経過観察での感想

以下、経過観察した結果の感想になります。

  • アフィリエイト関連タグに AMP 向けでない記述が混じり、エラーとなることがあるので独自変換実装が必要になる。
    iframe を amp-iframe に変換するだけでは、AMPとして使用できない属性が含まれるため、エラーとなります。
    独自に変換処理を実装する必要があります。

  • Mezzanine の RichTextFilter は優秀なので特段理由がない限りは、OFFにしないほうがいい。
    私は、Iframe を使用したかったので OFF にしましたが、予想外の場所でタグのような記載があり、AMPエラーとなりました。
    特段やりたいことがなければ、基本は ON にしたほうがいいかと思います。
    セキュリティ観点での Filter ON が推奨されます。

  • AMP の妥当性チェックは定期的に実行したほうがいい。
    チェック内容が少しずつ変化していますので、スケジューラ等で定期的に実行はしておいたほうがいいです。
    私はそれで、気づきました。

以上です。

  1. 想像を超える警告の数でした。 ↩

  2. 単純変換処理のみ実装しましたが、この後、style タグ、使用できない属性に対する警告が出力されはじめました。 ↩

コメント

カテゴリー

最近の投稿