作成途中の AMP HTML を、The AMP Validator で検証して頂いて修正していく


最近、blog の AMP 表示テーマを作り始めました。
作成途中の amp html を で検証して、修正していった結果を記載します。


検証対象の AMP HTML の 特性

検証対象の AMP HTML の 特性(成り立ち?) は以下の通りです。


The AMP Validator について

Accelerated Mobile Pages Project – AMP が提供している
AMP の HTML 妥当性検証ページです。

The AMP Validator にアクセスして、
HTML を入力するか、URL を入力するか すると、対象のHTMLが、
AMP として妥当なページかを検証してくれます。

だいたい、django template が組み上がったので、そのテンプレートが出力した html を 検証対象としています。


出力されるエラーについて

エラーだけではなく、警告も出力されます。
以下、出力されたものをとりあえず、メモして対応していった結果を記載します。

The property ‘minimum-scale’ is missing from attribute ‘content’ in tag ‘meta name=viewport’.

  • 原因 metaタグ、viewport に、minimum-scale 属性がないため発生していました。
    mezzanine/base.html at master · stephenmcd/mezzanineviewport 記述をそのまま流用していて発生していたようでした。

  • 対策 AMP Start の Blog テンプレートの 記述を 参考に以下のように記載しました。

    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
    

The mandatory attribute ‘target’ is missing in tag ‘FORM [method=GET]’.

  • 原因 form タグに target 属性がないため発生しています。

  • 対策
    form タグに target 属性を追加しました。
    自画面に対して submit を行うため、 target="_self" を追加しましたが、
    amp は、target="_blank" または、 target="_top" のどちらかしか
    指定ができないようで、修正後に以下警告が出力されました。

    The attribute 'target' in tag 'FORM [method=GET]' is set to the invalid value '_self'.
    
    最終的に指定は、target="_top" としました。

The tag ‘script’ is disallowed except in specific forms.

  • 原因
    script タグを使っているために、出力されていました。

  • 対策
    不要な script タグ であったので、記述を削除しました。

  • 原因
    link rel=canonical タグがないため、出力されていました。

  • 対策
    template に
    <link rel="canonical" href="{{ request.get_full_path }}">
    を追加しました。

The mandatory tag ‘meta charset=utf-8’ is missing or incorrect.

  • 原因
    必須タグ ‘meta charset = utf-8’がないため、出力されていました。

  • 対策 タグ <meta charset="utf-8"> を追加しました。

The mandatory attribute ‘amp-custom’ is missing in tag ‘style amp-custom’.

  • 原因
    style タグ に amp-custom 属性がないため、出力されていました。

  • 対策
    つけ忘れ。です。いや、コピペして書いてるだけだったので、気がつきませんでした。

The tag ‘style amp-custom’ appears more than once in the document.

  • 原因
    style amp-custom が複数回登場しているため、出力されていました。

  • 対策 1つにまとめました。

エラーとして出力されていたものは、こんなもんでした。
以上です。

コメント