【THE THOR】AMPエラーを解決!実際にエラーが0になった修正方法を解説

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のダッシュボードから、外観>テーマファイルエディター へ進んで追記します。

functions.phpを編集する前にバックアップを取るようにし、編集は自己責任で行ってください。

 

 

以下の点を確認してください。

  • 編集するテーマ: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のダッシュボードからコードをコピペするだけのかんたんな方法でした。

次回もお楽しみに!

 

>コアース株式会社

コアース株式会社

〒530-0041 大阪市北区天神橋1丁目18-25 第3マツイビル401号室

Coeure Design(コアース・デザイン)は大阪を拠点に業務システム開発を行なうコアース株式会社が運営するホームページ制作サービスです。Webサイトのデザインから,他のシステムとの連携,アフターサービスまで総合的にサポートいたします。

CTR IMG