WordPressで当ブログを書いています。
利用しているテーマ『Simplicity 2』のおかげでAMPにも簡単に対応しています。
先日、「Google Search Console」からAMPエラーを指摘されました。
「許可されていない属性または属性値が HMTL タグにあります」と。
今回、エラーの原因となったのはプラグイン「Easy Table of Contents」でした。
設定変更で対処できました。
現在(2022.11)の環境は、
- WordPress 6.1
- テーマ『Simplicity 2』
- プラグイン「Easy Table of Contents 2.0.37」
です。
それにしても、ダメ出しされるのは結構へこみますね。
▪︎contents▪︎
そもそもAMPどうする?
AMP(Accelerated Mobile Pages)対応ページは、モバイルでのウェブサイト閲覧を高速化するために最適化されています。
2021年6月以降はGoogleによるAMP化されたサイトの優遇が終了しているので、無理して対応する必要は無いです。
ただ、スマホでのページ表示速度は速いに越した事はありませんね。
記事が読めないローディング中の状態をじっと待てるのは5秒が限界かな?
テーマ『Simplicity 2』のおかげでAMPを続けるも簡単、やめるも簡単、ページ単位で「AMPページを生成しない」のも簡単です。
どうしようもなくなったらAMP対応をやめるとして、修正できるなら修正してみよう!
気楽にいきます。
ちなみに自分はプログラムなんて読めません。
AMPエラーの原因を探る
「Google Search Console」でサイドバーの「AMP」をクリックし、まずは威圧感のある真っ赤なびっくりマークにドキドキします。
心を落ち着けてからエラー名をクリックするとエラーのあるページ、更にページごとにエラーとなる部分の記述も確認できます。
個別ページをクリックするとエラーの記述が赤く示されます。
エラー部分の前後を見て、ページのどのあたりにエラーがあるのかを頑張って推測します。
プログラムは読めませんが、確かに許可されていない属性&属性値がありますね。
今回の「許可されていない属性または属性値が HMTL タグにあります。」でインスタンス(実体とか事例という意味)は2件。
(「HMTL」って「HTML」とは違うのでしょうか?いつもスルーしていますが……。)
- タグ「svg」の属性「version」に無効な値「1.2」が設定されています。
- 属性「baseprofile」はタグ「svg」で使用できません。
「svg」は画像の拡張子ですが、WordPressではアップロードできないファイルです。
「svg」をアップロードしたいならプラグインを利用したり、どこかのプログラムをいじったりしないといけないので、自分では使っていません。
自分の操作が原因ではないとなると、
- WordPress本体のプログラム
- テーマ内のプログラム
- プラグイン内のプログラム
- 広告の画像内のプログラム
などに原因があると考えられます。
1と2は問題があったら同じ環境の多くの皆様がネット内でざわつき、数日も待たないで修正される可能性が高いですが、2日ほど待って何も起こらず。
4の場合も自分では対処が難しいかな。
これ、3のプラグインが原因の可能性高いかも?
位置的に怪しいのが「Easy Table of Contents」です。
目次を入れるプラグインですが、多くの方は「Table of Contents Plus」を利用しているのでは?と思います。
少数派の「Easy Table of Contents」なので、即座に修正が入らないかもしれませんから。
自分でできるところまで探ってみます。
でも「Easy Table of Contents」で画像なんて使っていな……、いや、折りたたみ用の四角いマークってsvg画像では⁈
怪しいぞ!
WordPressのダッシュボード>プラグイン>インストール済みプラグイン>Easy Table of Contents>Websiteからサイトにアクセスしてみます。
更新があった場合も何が変更になったとか、バグがあって誰かが報告して対処されたとか、GitHubで公開されているようですね。
プログラムなんて一切読めませんが、「baseprofile」と検索してみるとビンゴです。
「baseprofile」「svg」「version=”1.2 “」など、「Google Search Console」で指摘されたエラー内容と一致します。
目次用プラグイン「Easy Table of Contents」の折りたたみ用の四角いマークがAMPエラーの原因であるのはほぼ間違いないでしょう。
今回のAMPエラーへの対処
いくつか考えられる対処方法はあります。
- サイト全体のAMP対応をやめる→最終手段
- プラグインの影響があるページを1つ1つ「AMPページを生成しない」に変更していく→沢山あるので面倒
- 何らかのプログラムを書き換える→無理無理
- エラーが出るプラグインの使用をやめる→気に入っているのでイヤ!
- プラグインの設定変更で何とかならない?→できればこれで!
プラグイン「Easy Table of Contents」の設定項目を見ると、「折りたたみ表示」のチェック欄がありますね。
「折りたたみを許可します」のチェックを外すと問題のsvg画像が消えました。
AMPテストをしてエラーにならないのも確認できました。
もう1つ考慮する事は、通常ページからも折りたたみが無くなってしまう事ですね。
記事に見出しが沢山あって目次に折りたたみが必要な場合は、全体のAMP対応をやめる方が適しているかもしれません。
自分の場合は目次がそんなに長くならないし、折りたたみできなくても良いのでは?
うん、大丈夫!
対処ができたら「Google Search Console」で「修正を検証」にして数日待ちます。
………………。
「AMPの問題が修正されました」と通知が届いて、AMPエラーの対応は完了です。
プラグイン「Easy Table of Contents」は頻繁に更新が入るので、そのうち「Google Search Console」に怒られないプログラムに変更される可能性もありますね。
時々、プログラムを確認しに行ってみます。
よし、もう少しAMPに対応したままでブログを継続!
コメントは優しくどうぞ