AMPページのエラーを発生させないために注意すべき3つのこと

WordPress
スポンサーリンク

AMP(アンプ)は Accelerated Mobile Pages の略称で、スマートフォンなどモバイル端末から、一瞬でウェブページを表示するための仕組みです。WordPress には、自動でAMPページを作成してくれるプラグインやテーマがあるのですが、記事の書き方によって「AMPページのエラー」が発生することがあります。そこで今回は、AMPページのエラーを発生させないために、特に注意が必要な3つのことをご紹介いたします。

AMPページのエラーを確認するには

AMPページのエラーの確認は、Google Search Console の「AMP テスト」に、APMページのURLを入力するだけで簡単に確認できます。AMPページのエラーが発生している場合は、どこを修正すればよいかも教えてくれます。(Google Search Console に登録していなくても利用できます。2019年2月25日現在)

「AMP テスト - Google Search Console」の画面

HTMLタグでない「<」や「>」は必ずエスケープする

HTMLタグでない「<」や「>」をエスケープしないと、許可されていないHTMLタグと認識されてたり、タグが閉じられていと判断され AMPページのエラーが発生します。必ず次のようにエスケープしておきましょう。

< → &lt;
> → &gt;

AMPページのエラーになる例

例えば下は、SSL証明書を生成するためのお決まりのコマンドなのですが、「< server.csr >」の部分が許可されていない HTMLタグとして認識されAMPページのエラーになってしまいます。

openssl x509 -days 3650 -req -signkey server.key < server.csr > server.crt

AMPページのエラー表示

他には PHPの開始タグや、Apache httpd のディレクティブなどをエスケープ処理していないとエラーの原因になります。特に技術系の記事をテキストモードで書いている場合は注意しましょう。

<?php ← タグが閉じられてないためエラー
 
<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で使ってはいけない文字です。基本を忘れてはいけませんね、、、反省しました。

コメント

タイトルとURLをコピーしました