AMP（アンプ）は Accelerated Mobile Pages の略称で、スマートフォンなどモバイル端末から、一瞬でウェブページを表示するための仕組みです。WordPress には、自動でAMPページを作成してくれるプラグインやテーマがあるのですが、記事の書き方によって「AMPページのエラー」が発生することがあります。そこで今回は、AMPページのエラーを発生させないために、特に注意が必要な３つのことをご紹介いたします。
AMPページのエラーを確認するには
AMPページのエラーの確認は、Google Search Console の「AMP テスト」に、APMページのURLを入力するだけで簡単に確認できます。AMPページのエラーが発生している場合は、どこを修正すればよいかも教えてくれます。（Google Search Console に登録していなくても利用できます。2019年2月25日現在）
HTMLタグでない「<」や「>」は必ずエスケープする
HTMLタグでない「<」や「>」をエスケープしないと、許可されていないHTMLタグと認識されてたり、タグが閉じられていと判断され AMPページのエラーが発生します。必ず次のようにエスケープしておきましょう。
> → >
AMPページのエラーになる例
例えば下は、SSL証明書を生成するためのお決まりのコマンドなのですが、「< server.csr >」の部分が許可されていない HTMLタグとして認識されAMPページのエラーになってしまいます。
他には PHPの開始タグや、Apache httpd のディレクティブなどをエスケープ処理していないとエラーの原因になります。特に技術系の記事をテキストモードで書いている場合は注意しましょう。
<VirtualHost *:443> ← 許可されていないタグのためエラー
画像サイズを必ず指定する
AMPページで画像を表示するには、amp-img タグを使い、画像サイズ（widthとheight）を必ず指定する必要があります。そのため画像サイズの指定がない場合は AMPページのエラーが発生します。
amp-img components, like all externally fetched AMP resources, must be given an explicit size (as in width / height) in advance, so that the aspect ratio can be known without fetching the image. Actual layout behavior is determined by the layout attribute.
amp-img (Built-in) – AMP より引用（2019年2月25日）
とはいえ、画像サイズを指定していない記事が大量にある場合は、後から画像サイズを指定するのはかなり大変です。WordPress には自動で画像サイズを指定してくれるテーマなどがありますので、そちらを利用するのもひとつの手だと思います。
関連記事：WordPressテーマCocoonでAPMページの画像サイズが300x300になるのを回避する方法
style 属性はなるべく使わない
以前 AMPページでは、style 属性を使って HTMLタグに直接文字の色や大きさなどのスタイルを指定すること（「インラインスタイル」と呼ばれます）は許可されていませんでしたが、最近許可されるようになりました。
Styles may live in the head of the document or as inline style attributes (see Add styles to a page). But you can use CSS preprocessors and templating to build static pages to better manage your content.
Supported CSS – AMP より引用（2019年2月25日）
しかし、一般的に インラインスタイルはできるだけ避けるべき とされています。style属性を使う必要がなければ使わないようにしましょう。
おわりに
このサイトも最近 AMP に対応しました。しかし「<」や「>」をエスケープしていなかった記事が多く、手作業で約50記事も修正するハメになりました(^^;) そもそも「<」や「>」は HTMLで使ってはいけない文字です。基本を忘れてはいけませんね、、、反省しました。
コメント