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

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

検証対象の AMP HTML の 特性

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

• django の template ファイル

• AMP Start - Accelarated Mobile Pages Templates の blog テーマ を 元に、 template を編集中

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/mezzanine の viewport 記述をそのまま流用していて発生していたようでした。

• 対策 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 タグ であったので、記述を削除しました。

The mandatory tag ‘link rel=canonical’ is missing or incorrect.

• 原因
  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つにまとめました。

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