チラシデザイン、動画、wordpressでホームページ制作は横浜の日本一店長のアイシープへ

日本一店長のチラシデザインと動画&wordpress

【最新版】AMP対策(よくあるAMPエラーの対処法)

1300 views
約2分
【最新版】AMP対策(よくあるAMPエラーの対処法)




はじめに


「AMP」とは、「Accelerated Mobile Pages」の略です。
GoogleとTwitterの共同開発で、モバイル端末でウェブページを高速表示するためのシステム、、、とでも言えばいいのでしょうか。
とても良さそうですが、、、、今までのwebページとはちょっとだけ作り方を変えないといけないのです。
そこで、うまく作らないと「エラー」が出てしまいます。
AMPのエラーはSEO対策上、ほっておくのはあまりよくありません。
そこで、対処法を備忘録としてメモしておきます。
Google search console上で「修正してください」的ないろんなメッセージが表示されます。
その対処法を記しておきます。

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属性を付ける。


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で点数稼げません。
・圧縮ツール

・使い方が具体的に書いてくれています。




Comment On Facebook