はじめに
「AMP」とは、「Accelerated Mobile Pages」の略です。
GoogleとTwitterの共同開発で、モバイル端末でウェブページを高速表示するためのシステム、、、とでも言えばいいのでしょうか。
とても良さそうですが、、、、今までのwebページとはちょっとだけ作り方を変えないといけないのです。
そこで、うまく作らないと「エラー」が出てしまいます。
AMPのエラーはSEO対策上、ほっておくのはあまりよくありません。
そこで、対処法を備忘録としてメモしておきます。
Google search console上で「修正してください」的ないろんなメッセージが表示されます。
その対処法を記しておきます。
しかし、こんなニュースが、、、
AMP廃止？？
AMPの優遇廃止と書いています。
Googleがスマートフォンやタブレットの読み込み速度を高めるとして推し進めてきた「Accelerated Mobile Pages(AMP)」について、Google検索やGoogleニュースなどにおける「AMPの優遇」が2021年6月に終了します。
せっかくAMP対策を施してきたのに〜。
さあ、今後どうなるのでしょうか？
AMP廃止後のモバイルSEO対策
PageSpeed Insightsでひたすらポイントを上げていくしかありません。
「改善できる項目」の「オフスクリーン画像の遅延読み込み」はWordPress 5.5から標準装備の（lazyload）があるから大丈夫ですが、
width属性とheight属性が必要です。
・wordpressプラグイン「Autoptimize」使用するが、不具合でプラグインによるスピードアップは断念。
AMPエラー対処法
imgタグはamp-imgに置き換える
画像imgタグは
<amp-img src="https://○○○○○○○○○○○○"</amp-img>
と書く。
【AMP HTML タグの属性で指定されたレイアウトが無効です。】の対処法
→対処法
<amp-img layout="responsive" src="https://○○○○○○○○○○○○"></amp-img>
layout=”responsive”を前に。
＜amp-accordion＞のルール
amp-accordion要素にはルールがあります。
これらを守らなければいけません。
・amp-accordion要素の直接の子要素は、section要素でなければいけません。
・section要素は、必ず2つの子要素を持たなければいけません。
・section要素の1つ目の子要素は開閉ボタン。h1、h2、h3、h4、h5、h6、headerのいずれかの要素でなければいけない。
・section要素の2つ目の子要素はコンテンツの内容。
・section要素はいくつでも設置できる。
・section要素にexpanded属性を付けると、そのコンテンツはデフォルトで開いた状態になる。
・section要素が1つだけしかないのにexpanded属性を付けると、文法エラーになりアコーディオンは表示されない。
・開閉状態はsessionStorageに保存される。保存を拒否するにはdisable-session-states属性を付ける。
やってました！section要素の1つ目の子要素であるh1、h2、h3、h4、h5、h6、headerが必須なのにp要素を入れてました。
もちろん「エラー」連発です。
GIFアニメーションは＜amp-anim＞
【head】～【/head】内に
<script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
HTML
<a href="https://○◯◯○◯◯○◯◯○◯◯"> <amp-anim src="/○◯◯/○◯◯.gif" width="200" height="150" layout="responsive"> <p placeholder>GIF画像を準備中…。</p> </amp-anim></a>
GIF画像もなるべく圧縮しないとgoogleのPageSpeed Insightsで点数稼げません。
・圧縮ツール
・使い方が具体的に書いてくれています。
Google search console上で「修正してください」的ないろんなメッセージが表示される
その対処法を記しておきます。
pagespeeginsights 40
First Contentful Paint 3.5 秒
実施：改善③ Webフォントのlinkタグを見直す