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

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

AMP対策【よくあるAMPエラーの対処法】

345 views
約 2 分
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> - アコーディオンを設置する Syncer】


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












Comment On Facebook