LIONMediaにてAMPエラー＆ぱんくずリストエラー対応

今回も、Wordpressサイトネタです。

最近、Wordpressサイトネタが多いのは、冬で釣りにあんまり行っていない、あるいは娘が受験真っ只中（早朝から夕方まで車がないと不便なときもある）、というところはあります＾＾

さて、前回にも記載していましたが、このサイト（Wordpressサイト）にてAMPエラーが出ており、なかなか手を付けられていませんでしたが、対応をついにはじめました。

AMPエラーとは？

AMPはモバイルでの表示を高速化する仕組みです
＊WikipediaのAMPを参考にどうぞ。

このサイトではWordpressの中の「テーマ」が、通常のWebサイトと、それを自動変換したAMPサイトを両方提供しています。
AMPエラーと言っているのは、Google Search Console（アクセス解析サービス）の中のAMPコンテンツのGoogle対応確認でのエラーのことです。

いろいろな問題があったり、自分の使用しているワードプレステーマの問題だったりで、対応が難しいです。
そんな中ひとつずつ対応しはじめました。

対応前の状況

スタート地点はこちらです。
99%エラーの出るサイトになっています。
ここまでにも結構対応していたつもりだったのですけどね・・・。

上記をクリックすると、問題のあるページがそれぞれリスト化されます。
そこでGoogleのAMPテストのページに行き、URLを入力しますと、何がダメかを具体的に指摘されます。

画像の高さ設定・・・”必須属性「height」がタグ「amp-img」にありません”

上記の、画像にheight（高さ）が入っていないという点も主たるエラー項目でした。
一個ずつ画像をクリックして編集にしたうえで保存を押すとHeightが入るので100個くらいそれをやってみたのですが、ちょっと飽きてきました・・・。
何より問題は最新の投稿記事にもその値が入らない部分です。

検索すると以下の記事に到達し、こちらを参考にして、対応実施しました。
非常に助かりました。

しかし、上記では対応できていないところがあり、ソースコードを確認しました。（コードの記載内容は検索で確認してなんとなく理解しました）。
上記の対応としては、画像を「http://」というURL形式で検索して合致判断をし、”Height”や”Width”を入れる変換していました。

これで対応できていなかった理由はというと、自分のサイトの画像URLは絶対パス「http://・・・」ではなく相対パスの「/wp-content/・・・」が多くあったためでした。
これを踏まえて、以前使ったことのある一括変換プラグインの”Search Regex”にて、自分のサイトの画像URL指定を「”/wp-content」を「”http://・・・/wp-content」に置換することで対応できました。
＊「http://・・・/wp-content」の場合の「/wp-content」を変換してしまわないように、「”/wp-content」と「”」を一番はじめにつけています。

Lazy-load（遅延読み込み）対応不可・・・許可されていない属性または属性値が HTMLタグにあります

前回も記載のLazy-loadのエラーです。

WordPressの新しいバージョンに標準装備されたLazy-loadという機能は「ページをスクロールしたときに画像を追加で読み込む設定とすることで、初期表示が早くなる」ものです。
しかしAMPではその機能のタグを認めていないということでエラーになります。
「それを回避するような内容をfunction.phpに書く」という対処でした。
こちらを参考に、対応を前回実施しました。

そうすると、サムネイルが上手く表示されませんでした。
サムネイルはプラグイン（Featured Image from Url：以降FIFU）でつけているのですが、その機能がうまく機能しなかったようです。
このため、一旦、上記のFunction.phpへの記入はやめました。
また、サムネイルの側の問題かと、サムネイルを全部一旦削除して（オートで）入れなおしてしまいました・・・

前回はここまでです。

今回再度試してみると、上記のように、サムネイルを一旦全削除したせいか、大部分でうまく動作するようになりました。しかし、たまに少し問題のある部分（縦長でも上下を切り取って表示してほしいが、縦長になってしまう。今でもやや残っています）がありました。

試しにFIFUのプラグインを一旦停止してみると、サムネイルがほぼ消えたのですが、一部サムネイル画像が残る部分があり、前述の作業をしたときにうまく動作しない部分と対応しているようでした。
これらは手作業で画像を登録した部分でFIFUがOFFになっているようで、そこが動作上問題があります。一方、FIFUでオートでついた部分は問題ないという関連性のようでした。
そこを修正しようと思いましたが、正直なところ、どこを修正したらいいのかわかりません。サムネイルとして保存された画像の問題か、表には出てこない設定の問題か、設定でかえれる部分の問題なのか。

ちなみにサムネイル手作業で入れていた分、というのは、一番初めの画像が記事の代表的なものでないと、順番を入れ替えた部分でした。
そのほか、一個めの画像より前に外部リンクがあるとよくないようでした（FIFUの動作上？）。

FIFUにもLazy-loadの機能がある点が関係あるのかな、と思いましたが、自分の設定ではOFFになっていましたし、おそらく関係ないようでした。

AMPサイトで大きい空白あり＝amazonリンクの1ピクセル画像の影響か

AMPサイトを確認していると、amazonリンクの下に10行分などすごくスペースのあくところがあり、なぜかよくわかりませんでした。
ソースを確認すると、1ピクセルの画像がamazonアフィリエイトリンクの次に挿入され、上記問題と、位置的な相関が認められます。
この画像がいるのか検索すると、必要というサイトが多かったです（最新情報じゃない印象ではあります）。

一方で、最近、コードを新しくamazonから取ったさいに、HTMLタグのほかに、URLで取ることもできることからこの画像は不要じゃないかと想定し、amazonのサイトを確認しました。
再度リンクを取り直すと、画像はついてこず、不要だと認識しました。
端的にいうと、amazonへのリンクのバージョンが古いということのようです。

後述の件もあって個別修正しようとしています。

iframeの高さ設定・・・必須属性「height」がタグ「amp-iframe」にありません

こちらのQ&Aの”2020年8月10日 22:25”の質問への回答を参考に、amazon画像つきリンクに関して、heightとwidthの入れ方の問題を修正しました。
今のところ、手作業です・・・

amazon画像付きリンクを取ったときのタグの中身にある
「iframe style=”width:120px;height:240px;」
の部分を
「iframe width=”120″ height=”240″」と修正し、heightやwidthで直接記載するように個別修正しました。

それぞれの個別のamazonリンクを更新する作業が必要です。全部で40個程度であり、今日も作業してみましたが、新しい側から半分くらい（20）は完了しました。
残り半分（これも20くらい）も近々つけなおそうかな、と思います。
40個は手作業できる数だな、と思います。

iframeの使えないタグ削除・・・”許可されていない属性が HTML タグ「amp-iframe」にあります”

こちらもamazonリンクの関係なのですが、上記iframeのエラーもあります。
AMPサイトでは”marginheight”などが使えないのですが、amazonリンクを取るとデフォルトでついてきます。
この件に関してはこちらのサイトを参考に一部対策実施。
＊上記のついでに消してもいます。

ぱんくずリストのエラー

「ぱんくずリスト」についても同じくGoogle search consoleでエラー指摘が急増していました。
ぱんくずリストが何かはあんまりわからないまま修正していますが、こちらを参考お願いします。

検索すると「WordPressのテーマが使用している、ぱんくずリストの形式が古いです。古いのはアウト扱いにしはじめました」ということのようです。

こちらやこちらを参考にしまして、
親テーマのfunction.phpの中の
http://data-vocabulary.org/Breadcrumb
を
https://schema.org/Breadcrumb
に置換しました。

修正後のAMP対応状況再テスト

AMP対応などを修正すると、Googleに修正確認を依頼します。

下図が今現在ですが、「有効」個数が、前述のスタート時の1%から、44%まで増えてきました。
＊まだ確認中の部分もあり、このままでももう少し「有効」は増えそうです。
＊ほかに、また違うエラーの部分もありますので、上記の残案件完了後、そちらも対応予定です。

ぱんくずリストのエラーは順調に減っています。こちらはまだ修正結果を未確認のところがあるだけで、そのうち0になると思います。

なかなか、修正は大変ですが、現状をお送りしました。

そのうちWordPressテーマを変更する場面は来るのだろうな、と思っています。
その時は十分これらの問題に対応してもらえていそうなものを選ぶ必要がありそうだなとは思っています。
そうなると有償なのかな、とは若干感じてはいます。

おしまい！