LoginSignup
3
3

More than 3 years have passed since last update.

Next.jsのAMPページでfallback属性を指定するとErrorが発生してしまう

Posted at

tl;dr

空文字を指定しましょう
👍

<amp-img
  fallback=""
  src="hoge"
></amp-img>

👎

<amp-img
  fallback
  src="hoge"
></amp-img>

解説

AMP HTMLでは任意の要素にfallback属性を指定することができます。
公式サイトではvideo要素が対応していないブラウザに警告文章を出す例を示しています。
Placeholders & fallbacks - amp.dev

Next.jsではAMP Pagesを簡単に作成することができます。
しかし、fallback属性を指定するとAmp Validationが警告文を表示します。

The attribute 'fallback' in tag 'amp-img' is set to the invalid value 'true'.

訳:amp-imgタグ内のfallback要素に無効な値'true'が設定されている

該当Issueはこちらです。
Amp-image fallback leads to validation error · Issue #10000 · zeit/next.js

Amp ValidationにHTMLが渡るまでにtrueが自動的に設定されることからこの問題が発生します。
空文字を必ず設定しましょう。

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3