[AMPエラー] タグ「amp-img」の属性「src」のURLプロトコル「blob」が無効です。【blobプロトコル】

Googleサーチコンソールを見ていたら、エラーの通知がありました。

どうも、画像のアップロードに失敗したまま、記事を公開してしまっていたようです。

1.

タグ「amp-img」の属性「src」のURL プロトコル「blob」が無効です

サイト〜で「AMP」の問題が新たに 検出されました

タグ「amp-img」の属性「src」のURL プロトコル「blob」が無効です。

問題の箇所を見てみると、確かに画像タグのsrcアドレスがおかしいです。

src="blob:https://chiilabo.com/1b8100c8-3e10-48d7-8fdd-af47e53df9da"

2. 画像に alt 属性が指定されていません

編集ページで確認してみると、「画像に alt 属性が指定されていません」と表示されています。

画像に alt 属性が指定されていません。ファイル名：1b8100c8-3e10-48d7-8fdd-af47e53df9da

これはWordPressで画像をアップロードしているときに、けっこうな頻度で表示されるエラーです。

alt属性に問題があるというより、画像のアップロードそのものがうまくいっていないのが原因です。ブラウザは、画像を表示できず、代替テキスト（alt属性）も表示できずにエラーを表示しています。

気づかずそのままに公開してしまっていたようです。

3. blobプロトコルのデータはブラウザ内に保持されている

この「blob:」というのは、サイトにアップロード中の画像データの一時的なアドレスとして表示されています。

これは、ウェブサーバではなくブラウザで保持されているデータなので、そのままブログ内のURLアドレスに利用することはできません。

Blobとは「Binary Large OBject」の略で、単にバイナリデータの塊を表現したものです。…

バイナリデータを保持するURLの一種で、BlobからBlob URL Schemeに変換することが可能です。…
Blob URL Schemeにおいてバイナリデータ自身はBlob URL Schemeの文字列に埋め込まれているのではなく、ブラウザで保持されています。

Blobって一体何者？使い方まとめ（JavaScript/TypeScript） – okigaki_log

画像を再度アップロードして、右クリックで「画像アドレスをコピー」してみると、確認できます。

うまくアップロードが完了しないで、途中で停止（タイムアウト）してしまうと、blobのアドレスが残ってしまいます。

改めて、AMPテストをすると、有効になりました。

こちらもどうぞ

「AMP > 推奨サイズより大きい画像を指定してください」【AMP画像の推奨サイズ】

Google Search Consoleを見ていたら、「推奨サイズより大きい画像を指定してください」という警告が表示されていました。 AMPで設定する画像サイズを適切にすると、検索結果などで画像も表示されるようになるようです。 ポイント AMPのアイキャッチ画像：画像の幅は 1,200 px以上、幅と高さをかけて 800,000 px以上AMPロゴ：600x60 ピクセルの長方形。上下に6pxの余白。AMPのファビコン：48 ピクセルの倍数、正方形。 Google Sear...

chiilabo.com

[AMP] 「ドキュメント ヘッドの外側で、直接の子としてのみ許可されているタグが検出」【コピペでのmetaタグ挿入】

WordPressエディタでコピー・ペーストしたら、文字列前にmetaタグが付くようになっていました。放置すると、AMPエラーになるので、ご注意ください。 ポイント WordPressの段落内に不要なmetaタグが混ざってAMPエラーになっていた。WordPressエディタでコピー・ペーストすると、文字列前にmetaタグが付くようになっているので注意。 環境 WordPress 5.8、Cocoonバージョン: 2.3.2Mac OS Big Sur 11.5、Chrome ...

chiilabo.com

AMPエラー HTML タグに必須属性がありません。- formとJavaScript

ブログ記事の中にフォームを入れていたら、AMPエラーになりました。 カスタムHTMLを使うとよくAMPエラーになりますね。 足りなかったのは、formタグのtarget属性でした。formタグの説明では特に見かけなかったんですが、必須属性なんですね。 今回のコードでは、javascriptの関数を動作させるためのボタンを配置するためにフォームを作りました。 特にデータをサーバーに送るものでもなかったので、formのプロパティを指定していなかったのが、よくなかったようです。 こ...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。