The Thorは標準でAMPに対応しているとのことですが、運用しているとエラーは出ますよね。
Googleサーチコンソールからちょくちょくエラーのお知らせがきてびびります。
基本的な部分は対応しているのですが、苦戦しながらとりあえずOHARICOのサイトを修正中。
記事ページのURLの後ろに「?type=AMP」をつけたらAMPページが表示されます。
AMPテストをしてたらいろんなエラーが出て、ひとつひとつ潰していこうとおもいます。
Rinkerによるエラー
アフィリエイトをしているのでRinkerというプラグインを導入しています。この部分のエラーがなかなか多かった。
AMPで使用できない属性の除去
the-thor-childの中にはデフォルトではconvert.phpがないので、the-thorからとってきますよ。
wp-content\themes\the-thor-child\inc\amp\convert.phpに、
border属性を除去する
marginwidth属性を除去する
marginheight属性を除去する
security属性を除去する
を書き足していきたいと思います。
border属性を除去する場合は下記のように記述しました。
//border属性を除去する
$the_content = preg_replace(‘/ +border=[“][^”]*?[“]/i’, ”, $the_content);
$the_content = preg_replace(‘/ +border=[\’][^\’]*?[\’]/i’, ”, $the_content);
サムネイルの画像サイズ
AMPでは画像にwidthとheightの属性が必要なのに、Rinkerではサムネイルの画像サイズがはいってません。
もうね、決め打ちでいれちゃうしかないかな？と思って、
wp-content\plugins\yyi-rinker\yyi_rinker_main.phpの2393行目から2409行目に3か所width=”128″ height=”128″を決め打ちで入れました。
サイト内URLの埋め込みエラー
タグ「amp-iframe」の属性「src」の URL プロトコル「http」が無効です。
これ、解決法をすごく探したのですが見つからず、URLのあとにつくembed関連のパラメータが原因なんじゃないかなと思いましたが、convert.phpに記述を追加するほうほうで、AMPではiframeごと除去しようと思います。
RinkerのAMPデザインを整える
RinkerをAMPでも崩れない程度にカスタマイズに成功
こちらを参考にさせてもらいました。
Cocoon限定と書いてありますが、The Thorでも追加CSSだけなら同じです。
single-amp.phpに追記する形で使わせてもらいました。
YOUTUBEの埋め込みエラー
タグ「amp-youtube」の属性「data-videoid」に無効な値「●●●」が設定されています。
エラーメッセージが長かったのであせりましたが、再びYOUTUBEに行って最新の埋め込みコードをとってきて埋め込めばあっさりと解決します。
これらの対応をして、AMPテストで赤点から緑の画面へ合格。
サーチコンソールからAMPエラーの修正確認を行ってしばらく待っています。
AMP化でアドセンスの収益が低下？！
徐々にAMP化に成功したページが浸透していくようで、翌日いくつかの検索キーワードで調べたら雷マークがついてAMPページがランクインされていました。
大成功！
と、思いきや。
アドセンスのページビューも収益も激減。
理由は簡単です。アドセンス広告コードって通常用とAMP用が違うんですね。変換をしていなかったので、広告が表示されていなかったという失敗。
WP QUADSというプラグインで広告の管理をしていてとても便利だったのですが、AMPアドセンスソースを貼るには有料版を購入する必要があります。
痛いところを突いてくる有料化だなと思いつつ、convert.phpで変換しようかと迷ったけれど、プラグインを変更してみることにしました。
その名もQuick Adsense。
AMP化することで、アドセンスの収益が下がるとか下がらないとか論争はあるみたいですが、グーグルさんが強く推すAMP化は遅かれ早かれ逃れられないと思うので、とりあえずエラーを修正していつでもオンオフできる状態だけは作ったうえで様子を見てみようと思います。
