スタジオ運営に付随して、スタジオアトラのホームページの運用も私の仕事の一つ。
対応する内容はサーチコンソールの「AMP異常対応」
今回は主に備忘として書かしてもらいます。
御多分に漏れずこのページもWordPressで運用させてもらっています。最近ではAMPへの対応ができるテンプレートも揃ってきていて、スタジオアトラでもこれを採用させて頂いております。
有料のもので運用させてもらっていますが、全てがうまくオプティマイズ最適化されるわけではないんですね。
久々にサーチコンソールを覗いてみると、なんとこの2，3日の間にAMP異常が30ページにわたって出力されている。
あまり時間もないので、1週間くらい放置しておいたんですが、対応しないと気持ち悪いし、ページの表示順位も下がろうというもの。
因みにここからはノウハウ的、私の備忘ブログなものなので、いつもの撮影スタジオのブログとは違うものになります。
発生した異常は
「AMP ページが無効です」
「許可されていない属性または属性値が HMTL タグにあります。」
発生カ所はというと画像、写真のはめ込み部分
「<amp-img layout=”responsive” loading=”lazy” src=”https://studioattra.com/xxx/xxx/xxx.jpg” alt=”xxx” class=”wp-image-1032″ width=”579″ height=”434″/></amp-img>」
で色々ググってみると、画像をAMP対応させるので、遅延読み込みloading=”lazy”
は無効とのこと。
まあAMPの意味を考えてみればわかることなのだが、スマフォ等のローパワーの端末への表示をできるだけ早く表示させたい訳で、そのために画像表示サイズを指定させて、1回の情報ダウンロードによる高速表示が目的。
画像に関しては多くの場合、端末いっぱいに表示させているのに、遅延制御や、読み込み後の再表示で、レイアウトを何回も変えて表示させては高速表示の意味がなくなるというもの。
WordPressの5.5最新盤では今回のloading=”lazy”が勝手に挿入されるように改定されたようです。
だからほぼ２０ページ以上での異常になる訳です。
今回はこのページを参考にfanctions.phpにこれを書き込んでとりあえずのエラー回避/* WordPress 5.5のlazy-loading『loading="lazy"』挿入の無効化 */
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
ただ、こういう修正ってなんか上手くかみ合ってない感じがするのは私だけでしょうか？
AMPもHTMLの王道だとは思わないしそのためにWordPressのメインストリームのデフォルト値を修正しなければならないことも、テンプレで対応できればそれを回避するという方法も、あるいはブラウザや端末を意識したスクリプトにする事も、なんか結構複雑な組み合わせになっていることが残念だね。
例えばレスポンシブ指定をサイト自体、アパッチに指定すると勝手にAMP対応するような仕組みができたり、ハードパワーが上がって、AMP指定自体が必要でなくなったりといった、すっきりした解決方法があるといいのに。
なんかすっきりしたシステムにならないかと思う今日この頃でした。
