amp | Casual Developers Note

TumblrでもWordPressでも、ブログを運営していると、ある日突然Google Search Console Teamから「AMPページのエラーを修正してください」というメールが送られてくることがあります。実際にGoogle Consoleを見ると同様のエラーが表示されるわけですが、皆さんは対応済みですか？自分も対応したので、その時の方法を共有します。ついでに、AMPの設定方法も紹介します。

そもそもGoogleが推奨するAMPとは？

AMPとはAccelerated Mobile Pagesの略称で、GoogleとTwitterが共同開発している、モバイル端末でブログなどの静的コンテンツを高速に表示するための仕様です。

つまり、この仕様に従ってHTMLを記述すると、GoogleによりAMPのページであると判定され、キャッシュなどによりページの表示が高速化します。さらに、Google検索の結果にAMPのマークが付き、SEO的にも有利になります。

TumblrでAMP機能を有効にするには？

AMPは仕様なので、HTMLを空で書くと準拠するのがめんどくさいですが、Tumblrには簡単にAMPに対応するためのボタンが追加されているため、以下の手順で簡単にブログをAMPに対応させられます。

「外観を編集」->「テーマの編集」->「詳細設定」から「Google AMPを有効にする」を選択する。

WordPressでAMPを有効にするには？

WordPressの場合は「AMP for WP」というそのままのネーミングのプラグインを入れれば自動的に生成されます。

Download QR-Code

AMP for WP – Accelerated Mobile Pages

Developer: Ahmed Kaludi, Mohammed Kaludi

Price: Free

GoogleからAMPエラーだと言われた時の対処方法

ここでやっと本題です。AMPを有効にした後で、そのブログがAMPの仕様に違反している場合に、Google Search Console Teamから「AMPページのエラーを修正してください」というメールが届きます。あるいは、自分でGoogle Search Consoleからエラーが無いか確認できます。エラーがあった場合はどう対処すればよいのでしょうか？順を追って説明します。

1. AMPのエラーの数を確認する

Google Search Consoleを開く
AMPエラーがある場合は対象のページに「AMP ページのエラーを修正してください詳細を表示」の表示を確認し、「詳細を表示」のリンクをクリックする
「レポートを開く」のボタンをクリックする
「Accelerated Mobile Pages」が表示され、「重大な問題のある AMP ページ」の数を確認できる

2. AMPのエラーの詳細を確認する

「Accelerated Mobile Pages」から「AMP タグに無効なレイアウトプロパティがある」のリンクをクリックする
エラーのあるAMPページのURLが出てくるので、選んでクリックする
「ページをテスト」をクリックし、AMPページをテストする
エラーの詳細が確認できる

3. AMPのエラーに対処する

エラーの詳細に沿って原因となっているHTMLを修正する
「ページをテスト」をクリックして、「有効なAMPページです」と表示されれば完了

これで対処は完了です。

自分の場合の原因と対応

対処方法は分かっていても、いざやってみるとハテナになる場合もありますよね。ということで、自分の場合のAMPエラーを説明しますので参考にしてください。

Tumblrで発生していたAMPエラーのメッセージ

暗黙的レイアウト「CONTAINER」はタグ「amp-img」ではサポートされていません。

原因と対応

このメッセージを見たTumblrユーザはこう思うはずです。「amp-img」タグなんて使ってないけど？カラクリを説明すると、TumblrのAMP機能を有効にした場合、ブログ内の「img」タグは自動的に「amp-img」タグに変換されます。この時「amp-img」タグの使い方が仕様に準拠していないとエラーになるわけです。

自分の場合は「amp-img」タグの仕様を確認した結果、要素に「width」と「height」が足りていないことが原因だったため、その「img」タグ(自分で記事を書いている時はまだ変換される前なので注意)の要素に「width」と「height」を追加することで解決しました。

WordPressで発生していたAMPエラーのメッセージ

タグ「span」の属性「id」に無効な値「AMP」が設定されています。

原因と対応

このメッセージが出たのはまさにこのページなのですが、AMPプラグインで自動生成したHTMLのspanタグに「id=”AMP”」という記述があるという意味でした。これはどういう場合に起こるかというと、h2タグなどの見出しとなるタグ内の文字にアルファベットがAMPしか含まれない場合です。例えば、「AMPとは？」という見出しにするとこのエラーが発生します。これは日本語ならではの現象で、英語で全て書いていれば起こりえません。

対処としては、AMPが含まれている見出しに他のアルファベットを入れて修正する必要があります。例えば、「AMPとは？」ではなく「Googleの推奨するAMPとは？」という風に修正すればエラーがなくなります。