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 属性を勝手に付与しないように画像サイズを大きくしました。

add_filter('wp_min_priority_img_pixels', function () {return 100_000_000;});

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

\国内最高峰のSEO最適化WordPressテーマ/

記事内に広告を含みます(PR)

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

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

AMPエラー

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

AMPエラー該当ページ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に追加したほうが確実です。

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

add_filter('wp_min_priority_img_pixels', function () {return 100_000_000;});

このコードの意味は、以下の通りです。

add_filter 関数は、WordPressのフィルターフックに関数を登録するための関数です。

wp_min_priority_img_pixels は、WordPress6.3で追加されたフィルターフックで、画像に fetchpriority 属性を付与するための最小ピクセル数を指定することができます。

function () { return 100_000_000; } は、無名関数(クロージャ)と呼ばれる関数で、この場合はフィルターフックのコールバック関数として登録されます。

return 100_000_000; は、この関数が返す値を指定するもので、この場合は 100_000_000 という数字です。

つまり、このコードは、「wp_min_priority_img_pixels フィルターフックに無名関数を登録し、その関数が 100_000_000 を返すようにする」という意味です。

これにより、fetchpriority 属性を付与するための最小ピクセル数が 100_000_000 になります。

デフォルトでは 50_000 なので、この値は非常に大きいためfetchpriority 属性を付与される画像はまずないでしょう。

つまり、このコードを付与することで、fetchpriority 属性によるエラーを防止できます。

この方法は、最初にfetchpriority 属性を除去するコードを書いたときに他に対策を打っている方がいないか確認してみたところこのブログで対策を打っていらっしゃったので当方でも導入したものです。

東京節約ブログ

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

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

  1. 管理画面
  2. →「外観」
  3. 「テーマファイルエディター」
  4. 「Theme Functions(functions.php)」
  5. →ファイル末尾にコードをコピー&ペースト
  6. →下部「ファイルの更新」をクリック

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

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

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

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

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

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

AMPエラー該当ページ経緯

コード追加2日後

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

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

AMPエラー該当ページ2日後
AMPエラー該当ページ2日後

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

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

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

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

ページエクスペリエンス (1)

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

WordPressテーマはデザインだけでなく、様々な設定が簡単にできるようになるため最初に導入しておいたほうが、その後の作業も大幅に軽減できます。
ですのでこれは実感として言えますが、「有料テーマは絶対最初から買うべきです。
有料テーマでは、装飾などのカスタマイズや文字の装飾などをすでに実装している場合が多く、その都度プラグインを導入する手間が省けます。
何より導入してからリライトする手間が省けますので、最初に買ってスタートから重武装・ハイパワーで臨むべきなのです。
今回はAMPエラーの対処でしたが、『THE THOR(ザ・トール)』ならプラグインを導入せずにAMPを導入でき、初期に出てくるエラーも非常に少ないので割りとすんなりAMPに対応できます。

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

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

THE THORホームページ

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

数あるテーマの中でもオールインワンパッケージで利用できるテーマだと云えます。

THE THORの特徴

THE THOR(ザ・トール)』で気づいた特徴は以下の点です。
  • 2つのアカウントで利用できる。
  • 秀逸なデザインを設定できる。
  • SEO対策実装済み。
  • 殆どのプラグインが不要(実装済み)。
  • 表示速度が向上します。

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

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

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

国内最高峰のSEO最適化WordPressテーマ「THE THOR」
4.5

①ユーザー目線の見やすいデザイン
②上位表示されやすいSEO対策実装
③殆どのプラグインが不要(実装済み)。
④非常に速い表示速度
⑤アフィリエイト広告を一括で管理できるタグ管理
⑥作業効率が追求された管理機能
⑦記事作成がやりやすいエディター

    国内シェアNo.1・国内No.1サーバー速度「エックスサーバー


    エックスサーバー


    1. ハイスペックのサーバー・ソフトウェア機能で国内No.1のサーバー速度
    2. 独自ドメイン無料
    3. もしもの時に安心な自動バックアップ機能
    4. SSLの利用が無料
    5. メールサポート24時間365日対応

    \WordPressが10分ではじめられる/

    9月8日まで半額キャンペーン中
    AMPエラー【属性「fetchpriority」はタグ「amp-img」で使用できません。】の対処方法
    最新情報をチェックしよう!