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」というそのままのネーミングのプラグインを入れれば自動的に生成されます。
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とは？」という風に修正すればエラーがなくなります。
最後に
ここまで辿り着いた皆さんはAMPに対応したブログを完成できましたか？これであなたのページはAMPパワーを存分に発揮してくれることでしょう。
![[column] 正月だし御節食べながら技術ブログ書きませんか？](https://casualdevelopers.com/wp-content/uploads/2015/12/new-years-day-1054594_1920-700x300.jpg)