ホームページ制作はコアース・デザインへ!

【THE THOR】AMPエラー対処法!『属性「fetchpriority」はタグ「amp-img」で使用できません』

WordPressを6.3に更新した時におきたAMPエラーの対処法をご紹介します。更新で“ご親切”にも追加された機能がまたまたAMPエラーとなるという…なんとも悲しい現実ですが,エラーをゼロできた方法をかんたん解説します。

 

WP6.1更新時のAMPエラー対応記事はこちら

 

WP5.9更新時のAMPエラー対応記事はこちら

 

 

目次

属性「fetchpriority」はタグ「amp-img」で使用できません

今回もAMPでは許可されていない属性が追加されてしまうことが原因です。

「許可されていない属性または属性値がHTMLタグにあります」ということで,20ページが該当しています。

 

詳細を見ると,エラーページはすべてAMPページだということが分かります。

 

さらにページの詳細を見ると,「属性「fetchpriority」はタグ「amp-img」で使用できません」というエラーになっており,20ページすべてで共通でした。

 

fetchpriority

この属性は,他の画像と比較して,読み込みの優先順位を高くしたり低くしたりするための情報をブラウザに伝えることができます。 <img> 要素に適用すると,読み込み処理の早い段階で重要な画像を通知できます。

WordPressを6.3に更新すると,amp-imgタグへ非対応の属性fetchpriority=”high”が追加されます。でも「属性「fetchpriority」はタグ「amp-img」で使用できません」ので,AMPエラーとなるわけです。

 

SEO対策として大切な読込速度を上げるための機能が,Google推奨のAMPページを表示させる時にエラーになる…厄介なことです。。。

ただAMP機能によって通常よりも約3倍の速度でページが表示されるので,恒例になりつつあるこのエラー対処作業も頑張って行いたいものです。

 

 

AMPエラー対処法

ダッシュボードの左メニューにある 外観>テーマファイルエディタ からfunctions.phpにコードを追記します。

 

functions.phpに追記

編集する前に以下の点をご確認ください。

編集するテーマ:THE THOR CHILD
テーマファイル:テーマのための関数(functions.php)

 

修正する時に,以下のメッセージが表示される場合があります。

ファイルのバックアップを取っておきましょう。

 

 

エラー修正コード

以下のコードを,functions.phpに追記します。

WordPress6.1への更新時に,下記の関連記事にあるコードを追記している場合は,一旦そのすべてを削除してから以下のコードを追記してください。

 

コード1

function gnr_tail_pattern_matched($target, $pattern) {
if (empty($target) && empty($pattern)) {
return true;
} else if (empty($target)) {
return false;
} else if (empty($pattern)) {
return false;
}
$s_end = strlen($target);
$s_len = strlen($pattern);
$offset = $s_end - $s_len;
if ($offset < 0) {
return false;
}
$pos = strpos($target, $pattern, $offset);
return $pos === $offset;
}
////AMPページか否か判定する
function gnr_is_amp() {
if (function_exists('is_amp') && is_amp()) {
return true;
} else if (function_exists('is_amp_endpoint') && is_amp_endpoint()) {
return true;
} else if (function_exists('ampforwp_is_amp_endpoint') && ampforwp_is_amp_endpoint()) {
return true;
} else if (@$_GET['amp'] === '1') {
return true;
} else if (@$_GET['type'] === 'AMP') {
return true;
}
$uri = gnr_get_uri_full();
return gnr_is_amp_pattern($uri);
}
function gnr_is_amp_pattern($uri) {
if (gnr_tail_pattern_matched($uri, '/amp')) return true;
if (gnr_tail_pattern_matched($uri, '/amp/')) return true;
if (gnr_tail_pattern_matched($uri, '?amp=1')) return true;
if (gnr_tail_pattern_matched($uri, 'type=AMP')) return true;
return false;
}
function gnr_get_uri_full() {
return (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off' ? 'https' : 'http')
. '://'
. $_SERVER['SERVER_NAME']
. $_SERVER['REQUEST_URI'];
}
function gnr_remove_amp_uri_part($uri, $pattern) {
$s_end = strlen($uri);
$s_len = strlen($pattern);
$offset = $s_end - $s_len;
if ($offset < 0) {
return $uri;
}
$pos = strpos($uri, $pattern, $offset);
if ($pos === $offset) {
return substr($uri, 0, $pos);
}
return $uri;
}
function gnr_remove_amp_pattern($uri) {
$uri = gnr_remove_amp_uri_part($uri, '/amp');
$uri = gnr_remove_amp_uri_part($uri, '/amp/');
$uri = gnr_remove_amp_uri_part($uri, '?amp=1');
$uri = gnr_remove_amp_uri_part($uri, 'type=AMP');
return $uri;
}
function gnr_get_amp_pattern($uri) {
$ret = '/amp'; if (gnr_tail_pattern_matched($uri, $ret)) return $ret;
$ret = '/amp/'; if (gnr_tail_pattern_matched($uri, $ret)) return $ret;
$ret = '/?amp=1'; if (gnr_tail_pattern_matched($uri, $ret)) return $ret;
$ret = 'type=AMP'; if (gnr_tail_pattern_matched($uri, $ret)) return $ret;
}

 

コード2

コード1の後に追記します。

function gnr_stop_lazyloading_when_amp() {
return !gnr_is_amp();
}
add_filter('wp_lazy_loading_enabled', 'gnr_stop_lazyloading_when_amp');
function gnr_delete_amp_lazyload($html_src) {
if(!gnr_is_amp()) {
return $html_src;
}
$html_src = preg_replace('#(loading|decoding|fetchpriority)[ \t]*=[ \t]*"[^"]*"#', '', $html_src);
return $html_src;
}
add_filter('post_thumbnail_html', 'gnr_delete_amp_lazyload', 9999);
add_filter('the_content', 'gnr_delete_amp_lazyload', 9999);

今回も以下の記事が参考になりました。ありがとうございました。

https://ganohr.net/blog/how-to-fix-amp-error-wp-63

 

 

追記後,左下にある「ファイルを更新」をクリックするのを忘れないようにしましょう。「ファイルの編集に成功しました」と表示されます。

 

 

エラーの修正を検証

functions.phpに追記後,サーチコンソールに戻り,エラーの検証をします。

 

画像のように,「修正を検証」をクリックします。

 

初期検証が始まります。

 

「初検出日」が表示されていた部分が「検証:開始」に変わります。開始日も表示されます。

「詳細を表示」してみましょう。

 

エラーに該当した20ページすべてが「保留」になりました。今後,修正検証が進んでいきます。数日様子をみましょう。

 

 

今回は,検証開始後に数ページがさらにエラー対象としてカウントされましたが,その後,エラーが減っていきました。

 

URL検査でリクエスト

サーチコンソールの「URL検査」機能を活用して,該当ページのURLの登録リクエストしておくと良いかもしれません。確証はないのですが,正規の代替ページとなるURLですので,クロールしてくれるまでに少し時間がかかりそうです。肌感ですが…リクエストしたほうが,修正検証を早くしてくれるように思います。

当ブログの場合,20あるエラーページのURLを再リクエストしました。一日にリクエストできるページ数は10ほどのようですので,二日に分けてリクエストしました。

 

 

今回は少し時間がかかりましたが,実際にエラーがゼロになりました。

 

 

今回は1ページだけなかなか「合格」にならなかったのですが,最終的にはエラーはゼロになっています。

 

 

まとめ

いかがでしたか。今回はWordPress6.3に更新した時におきるAMPエラー『属性「fetchpriority」はタグ「amp-img」で使用できません』の対処法でした。

WordPress更新時に起きるAMPエラー,少し恒例?になってきましたが,今回も無事にエラー修正できました。

では次回もお楽しみに!

プロフィール

コアース・デザインのWebディレクターです。WordPressなどCMSでのホームページ制作やブログ運営にかかわるお役立ち情報を、初心者目線で発信していきます。

目次