AMPエラー【属性「fetchpriority」はタグ「amp-img」で使用できません。】の対処方法

WordPressバージョン6.3が2023年8月8日にリリースされましたが、このバージョンへの更新でまたAMPのエラーが出てきましたので処理方法を説明します。

具体的なエラーは、【属性「fetchpriority」はタグ「amp-img」で使用できません。】というエラーでした。

どうやらWordPressバージョン6.3から自動でfetchpriority=“high” が追加されるようになったようなのですが、これがAMPでは許可されていない属性だったのが原因のようです。

プラグインでAMPを導入したわけではなく、WordPressテーマ『THE THOR（ザ・トール）』でAMPを導入しているため、functions.php の末尾に以下のコードを追加して保存することでfetchpriority 属性を除去することで対応しました。

// fetchpriority 属性を除去するコードfunction remove_fetchpriority_attribute($content) {$content = preg_replace('/fetchpriority="[^"]*"/', '', $content);return $content;}add_filter('the_content', 'remove_fetchpriority_attribute', 20);

このサイトで採用しているWordPressテーマ『THE THOR（ザ・トール）』は、モバイルで高速で表示されるAMPを標準搭載しており、SEO対策・デザインに必要な機能を実装したオールインワンパッケージのWordPressテーマです。

＼国内最高峰のSEO最適化WordPressテーマ／

AMPエラー【属性「fetchpriority」はタグ「amp-img」で使用できません。】への対策

今回の、【属性「fetchpriority」はタグ「amp-img」で使用できません。】というエラーは、Search ConsoleのAMPで急激に30件エラーが発生したことで気づきました。

この詳細を確認すると、『許可されていない属性または属性値が HMTL タグにあります。』というエラーが発生していて、対象例のURLをクリックすると【属性「fetchpriority」はタグ「amp-img」で使用できません。】という内容で30件も発生していました。

fetchpriority=“high” が自動で追加されるのは、今回のWordPressのバージョン6.3で初めて発生した現象で、この属性は画像の読み込み優先度を指定するものらしいのですが、AMPでは許可されていない属性だったのでエラーになったようです。

毎回ですが、WordPress側ではAMPをガン無視しているので、バージョン更新のたびにエラーが出るのは恒例行事になっておりかなり慣れてきました。

fetchpriority属性を除去するために functions.phpに追加すべきコード

AMPは非常に手間がかかりますが導入に踏み切っているのは、閲覧するユーザーのほどんどがモバイルユーザーであることが最大の理由です。

速度を向上させるために消耗戦をしなくても、AMPならそもそも約3倍の速度で表示されるためページエクスペリエンスでは余裕で100％合格点に達するからです。

といってもプラグインでAMPを導入したわけではなく、WordPressテーマ『THE THOR（ザ・トール）』でAMPを導入しているため、もともとエラーが非常に少ないのですが、今回はfunctions.phpの末尾に以下のコードを追加することで対処できました。

AMPプラグインの設定でも除去できるらしいのですが、他のHTMLタグや属性も除去される可能性があるので、できれば勉強も兼ねてコードをfunctions.phpに追加してfetchpriority 属性を除去したほうが確実です。

具体的に追加したのは以下のコードです。

// fetchpriority 属性を除去するコードfunction remove_fetchpriority_attribute($content) {$content = preg_replace('/fetchpriority="[^"]*"/', '', $content);return $content;}add_filter('the_content', 'remove_fetchpriority_attribute', 20);

このコードは、記事の内容を表示する前に、fetchpriority 属性を空文字に置き換える処理を行っています。

add_filter 関数では、the_content フィルターにこの処理を登録します。

20 は優先度を表す数字で、低いほど先に実行されます。

functions.phpはどこで編集する？

WordPressテーマ『THE THOR（ザ・トール）』ではfunctions.phpの編集はどこでするのかというと、WordPressの管理画面から「外観」→「テーマファイルエディター」→「Theme Functions（functions.php）」で編集できます。

この記述内容の末尾に、コードを記述して（コピー＆ペースト）、「ファイルの更新」をクリックすれば完了です。

fetchpriority属性除去のコードをfunctions.phpに追加後の結果

functions.phpの末尾にfetchpriority 属性を除去するコードを追加した翌日からエラーが発生している該当ページが減っているか確認してみました。

【許可されていない属性または属性値が HMTL タグにあります。】該当ページの推移

functions.phpの末尾にfetchpriority 属性を除去するコードを追加して、翌日から該当ページが減少し始めました。

この調子ならクロールされていく過程でエラーが発生している該当ページが少なくなっていくでしょう。

コード追加2日後

コード追加から2日後の状態です。

30件→27件→19件と徐々に該当ページが少なくなっています。

AMPエラーによりページエクスペリエンスでも改善が必要という判定に・・・

ページエクスペリエンスでもやはり問題が発生していて「LCP の問題: 2.5秒 超（モバイル）」で改善が必要という判定になっています。

こういったモバイルで表示される速度を簡単に高速化するためにAMPを導入しているので、AMPが表示されないと軒並み表示が遅くなり、離脱が多くなっていって順位が低下するという悪循環になります。

ですので問題を発見したら即、行動に移したほうが良いわけです。

WordPressテーマは、オールインワンパッケージ「THE THOR」がオススメ

このサイトで導入しているWordPressテーマは『THE THOR（ザ・トール）』

このサイトは、スピードを重視したため、余計なプラグインを導入して速度が低下することがないように、オールインワンパッケージともいえる『THE THOR（ザ・トール）』を導入しています。

『THE THOR（ザ・トール）』は、一度購入するとずっとサポートが受けられ、アップデートもその都度行われるので追加料金無しで常に最新の状態になるのが強みです。

THE THORの特徴

有料テーマで高性能のものは価格は決して安くはなく、THE THOR（ザ・トール）は16,280円（税込）です。

しかし、これを導入するのとしないのとでは、その後の作業量が大きく異なります。

またカスタマイズも簡単であるため記事作成に没頭しやすくなります。