THE THORでAMP設定をした時、Googleサーチコンソールで通知されたAMPエラーについて、実際にエラーがゼロになった修正方法をご紹介します。今回通知されたエラーは、「許可されていない属性または属性値がHTMLタグにあります」です。
WordPress6.1に更新した時に生じるAMPエラー『属性「decoding」はタグ「amp-img」で使用できません』の解決方法については、以下の関連記事で書いてます。
今回はWordPress6.1に更新した際に生じるAMPエラー『属性「decoding」はタグ「amp-img」で使用できません』の解決方法です。またしても、WordPressの更新で追加された機能がエラーの原因でした。実際にエラーをゼロに[…]
「許可されていない属性または属性値がHTMLタグにあります」
エラーの詳細とその原因については、以下の関連記事で書いています。
今回は、THE THORのAMP機能設定で生じたGoogleサーチコンソールのAMPエラーについてです。実際に通知されたエラーの内容と原因を解説しています。その前に、AMPとは何か?THE THORでの設定方法についても書いています。 […]
成功した修正方法
実際にエラーがゼロになった方法です。初心者の方でも難しくありません。
テーマファイルエディターでコードを追記するだけ
前記事で解説した通り、今回問題となったのは、WordPressが遅延読み込みのため自動で挿入するコードです。これがAMPページの規則で許可されていない属性を含むためエラーが通知されました。
ネットやSNSを調べていくと、同じ悩みを持ち解決した人が見つかるものです。通常ページへのアクセス時は遅延読み込みを有効にしつつ、AMPページの場合は無効化することでエラーを解決した方がおられました。以下の記事と記事内の外部リンク記事が参考になりました。ありがとうございました。
Wordpress5.9にアップデートした矢先、AMPエラーとなった場合の「Lazy-load」回避方法を記載しています…
THE THORでは、テーマファイルエディターでfunctions.phpにコードを追記するだけです。WordPressのダッシュボードから、外観>テーマファイルエディター へ進んで追記します。
以下の点を確認してください。
- 編集するテーマ:THE THOR CHILD
- テーマファイル:テーマのための関数(functions.php)
「ユーザーカスタマイズエリア」の下、5行目から追記するコードをペーストします。以下のコードです。
追記するコード
function gnr_stop_lazyloading_when_amp() {
return !gnr_is_amp();
}
add_filter('wp_lazy_loading_enabled', 'gnr_stop_lazyloading_when_amp');
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;
}
function gnr_delete_amp_lazyload($html_src) {
if (!gnr_is_amp()) {
return $html_src;
}
$html_src = preg_replace('#loading="lazy"#', '', $html_src);
return $html_src;
}
add_filter('post_thumbnail_html', 'gnr_delete_amp_lazyload', 9999);
コードを追記した後、左下部にある「ファイルを更新」のクリックを忘れないようにしましょう。
「ファイルの編集に成功しました」と表示されたらOKです。
Googleサーチコンソールで修正を検証する
サーチコンソールの 拡張>AMP>詳細 で該当するエラーをクリックします。
修正を検証するため、画像にある「修正を検証」をクリックします。これにより、初期検証が行われます。
検証の開始
初期検証後に、修正の検証が開始される場合と開始されない場合があります。
検証が開始された場合
上の画像の通り、「検証:開始」となり開始日が表示されます。検証が終わるまで数日待ちましょう。1,2日で最初の検証結果が出る場合が多いです。
検証が開始されない場合
初期検証でエラーの該当ページが見つかった場合、「検証プロセスを実行できません」と表示されます。
当ブログでも、最初にこの表示が出ました。しかし、次の日など少し時間をおいてから「修正を検証」をクリックすると検証が開始されました。今回のphp追記による対応では解消しない別のエラーが関係している場合は、検証が開始されないこともあります。エラーに合った修正を行い、再チャレンジしてください。
新たな通知が届く
検証開始から2日後、上の画像のような通知が届きました。「検証:失敗しました」となっており「不合格」という判定です。
とはいえ、エラー数が8➔5に減っていることが分かります。詳細を確認してみます。
「一部のページで、この問題が依然として修正されていない」こと、「問題が修正されたページが1ページある」ことが分かります。
ネットを調べていると、1週間ほどしてエラーが消えていくという情報もありました。しばらく様子を見ることにしました。
エラーが2まで減る
一週間ほどして確認してみると、エラーが5➔2まで減りました。残ったエラーの原因を探ってみました。
残ったエラーの原因
エラーが残っている2ページを確認していくと共通点がありました。それは、内部リンクを直書きのURLで載せている部分だということです。
直書きのURLでの内部リンク
直書きの場合、THE THORでは自動で内部リンクと判断して上の画像のように表示されます。この部分の「amp-iframe」タグにAMPページでは許可されていない属性が付与されていることが原因でした。
ショートコードでの内部リンク
エラーに該当する部分を、ショートコードで内部リンクを設置する「サイトカード」に変更してみました。今回、エラー修正のために追記したphpは、このカードに対するものだったからです。
URL検査でリクエストする
エラーの残っていたページを修正後、サーチコンソールのURL検査で「インデックス登録をリクエスト」してみました。なるべく早く検証をしてくれるかもしれないと思ったからです。リクエスト時点では、上の画像のように「AMPページが無効です」となっています。詳細を確認してみます。
「許可されていない属性または属性値がHTMLタグにあります」と表示されていることを確認できました。この状態で「インデックス登録をリクエスト」(緑色囲み部分)をクリックしてリクエストします。
エラーがゼロになる!
翌日には、エラーがゼロになっていました!
詳細でも、エラーに該当するページも「0」ゼロになっています。
まとめ
いかがでしたか。今回はGoogleサーチコンソールで通知されたAMPエラーがゼロになった修正方法を、実際の経験に沿って解説しました。WordPressのダッシュボードからコードをコピペするだけのかんたんな方法でした。
次回もお楽しみに!