AMP非対応の有料テーマが多い中、THE THOR は数少ないAMP表示に対応しているテーマのひとつです（ただし記事部分のみ）。
THE THORはAMP表示に必要な要素がきちんと構築されているので、基本的には機能を有効化するだけで良いのですが、カスタマイズ部分や設定項目、プラグインとの兼ね合いなどによってエラーが出てしまうことがあると思います。出やすいエラーや対処法なども含めて、サイトをAMP対応させる方法をまとめておきます。
AMPとは何か？
ここをざっくり理解していると出来ることが把握しやすいと思いますので、まず最初にAMPについて説明します。
AMP(Accelerated Mobile Pages)
AMPとは、GoogleとTwitterが2015年に立ち上げた「モバイル端末でウェブページを高速表示するためのプロジェクト」で、実装するとページの表示速度が約4倍・データ量が約1/10になると言われています。
AMPの仕組み
通常であればアクセスと同時にそのページのデータをサーバーへ読みに行きますが、AMP対応したページはGoogleのサーバー側にキャッシュされており、爆速で表示することができます。
どのような高速化処理がされているのか興味のある方は、AMP公式の「AMPの仕組み」というページに詳しく書いてありますので、そちらを参照してください。
覚えておいて欲しいこと
AMPは元々、検索結果やSNSに投稿されたリンク先において、ユーザーがストレスなく必要な情報を得るために作られたシステムですので、サイト内部でAMPページからAMPページへ飛ぶという使い方は（基本的には）できません。
もし変更してしまうと、モバイル端末以外から見た時もAMP用のページが表示されてしまうのでご注意ください。
「THE THOR」のAMP設定方法（カスタマイザー）
まずはAMP機能をオンにする前に他の設定からしていきます。
AMP設定＞AMPロゴの設定
AMPでは高速化のために使用できる画像サイズが決まっています。
サイトタイトルに画像を使用したい場合は、縦：60 × 横：600px 以下のサイズのロゴを用意してここに設定してください。
AMP設定＞AMPページ用広告設定
Google AdSense を利用している場合は、AMP用の広告を設定する必要があります。Adsense ヘルプに詳しい手順が載っていますので、そちらを参考にして新しい広告ユニットを作成してください。
作成した広告ユニットのコードを「AdSense等の広告タグを入力」という欄にコピペします。これでサイト内のAdSense広告がAMP用のものに置き換えられます。
広告にAMPで使用できないコードが含まれているせいでエラーが出ることが多いので、AdSenseを利用している方はここの設定は必須です。
AMP自動広告を利用する場合
AMP自動広告を利用する場合は、ここには何も入力する必要はありません。
の「自由入力エリア」に、Google AdSense の「AMP自動広告」で発行されるスクリプトと広告コードをそれぞれコピペしてください。
AMP設定＞AMP機能設定
ここには3つの設定項目があります。
AMPページを表示するか選択
ここで「表示」を選ぶと、AMPページが表示されるようになります。
この設定をしただけでは、ただ単にAMPの仕様に合わせたページを表示できるようになるだけです。ページを Google のクローラーがクロールし、AMP CDN にキャッシュされた時点で初めて「AMPページ」として閲覧できるようになります。
AMPページで検索ボックスを表示するか選択
ここで「表示」を選ぶと、AMPページにも検索ボックスが表示されます。SSL化されている（https で始まるURLになっている）ページのみで利用できます。
※SSL化に関してはサーバー側で設定する必要があります
AMPページで通常ページへのボタンを表示するか選択
ここで「表示」を選ぶと、ヘッダーお知らせ欄の下あたりに、下記のようなボタンが出現します。
AMPページ（キャッシュ）からオリジナルのページ（自サイト）へ飛ぶには、アイコンをタップ → ページのオリジナルURLをタップ という2ステップ必要ですが、このボタンを置くことで直接オリジナルのページへ移動することができます。
Google の「AMP テスト」でページをチェックする
ここまで設定できたら、Google の「AMP テスト」で、AMPページが有効になっているかチェックしてみてください。
「THE THOR」のAMPページはURLの末尾に「?type=AMP」を付けたものになります。
AMP 対応できるのは記事ページのみとなりますので、適当な記事のURL末尾に「?type=AMP」を追加したものを入力して、AMPテストを行ってください。
エラーがない場合
下の画像のように「有効な AMP ページです」と表示されていれば、そのページは正常にAMP化されています。
Google のクローラーがクロールして AMP CDN にキャッシュされ次第、検索結果やSNSからのリンク先がAMPページに置き換わりますので、あとは数日間待つだけです。
エラーがある場合
エラーがある場合は下の画像のように「有効な AMP ページではありません」と表示されます。
ページのどの部分にエラーがあるのかを調べるには、「検証の問題」という項目の「○個のインスタンス」という文字をクリックします。エラーのある行数とコードが表示されるので、そこを更にクリックしてください。
右側に「AMP HTML」が表示されます。エラーの出ている部分には背景色が付いて分かりやすくなっていますので、ここでどんなエラーかを把握して修正していくという流れになります。
出やすいエラーと対処方法
AMP化の際に出やすいのは、プラグイン由来のエラーとAMPで利用が禁止・制限されているHTMLによるエラーだと言われています。
実はこの記事を書くためにわざとエラーを発生させようと試みたのですが、「THE THOR」では amp-css などでほとんど対処されていて、エラーになりませんでした。なので「THE THOR」でAMPを有効にした際にエラーが出る場合は、プラグイン由来のものと広告タグ等によるものが大多数になるのではないかなと思います。
THE THOR で対処されていること
参考までに、私が意図的にエラーを発生させようとしてもエラーにならなかった項目を挙げておきます。
- リンク切れ・存在しないURLへのリンク
- 記事内に大きなサイズの画像を貼る
- width、height を指定せずに画像を貼る
- Twitter の埋め込みリンク（横幅が大きいサイズに指定されているもの）
- YouTube の埋め込みリンク（横幅が大きいサイズに指定されているもの）
それからこちらはエラー関連ではないのですが、THE THOR のAMPページではインラインのスタイル指定が全て除去されるようです。（2018年7月までAMPではインラインのスタイル指定が禁止されていたため、おそらくその名残だと思います）
AMPページでも通常ページと表示を変えたくない場合は、インラインのスタイル指定は使わないようにしてください。
よくあるエラーと対処法
属性「border」はタグ「amp-img」で使用できません
A8.net などの広告タグを貼っている場合に発生するエラーです。
AMP では img に border を指定してはいけない決まりになっているのですが、広告タグに「border="0"」が指定されているためエラーが出ます。
対処方法
広告タグ内の「border="0"」を削除するだけなので、記事数が少ない場合は1記事ずつ削除していくのが良いと思います。
記事数が多く個別に対処するのが大変な場合は、テーマファイルにAMPページの時のみ「border="0"」を削除するためのPHPを記述する方法もあります。
function.php から一括で削除する方法と、THE THOR 本体でAMPページの書き換えを行っている部分に追記する形を別記事にまとめましたので参考にしてください。前者はコピペ一発で実装できます。（他にも変更を加えたい場合には、後者の方法が応用できると思います）
サイトをAMP対応させる時によく出るエラーのひとつが、A8.net等の広告タグに含まれる「img border="0"」というコードです。（AMPでは img に border を指定してはいけない決まりになっているため）記事数が少ない[…]
タグ「amp-img」の属性「src」に URL がありません
プロフィール画像を登録していないサイトで、カスタマイザーの「投稿記事設定」で「プロフィール」を表示させるとエラーが発生しました。
対処方法
プロフィールを「表示しない」設定に変更するか、プロフィール画像を登録すればエラーが消えます。
ビジュアルエディタで埋め込みタグや広告タグを記述した場合
ビジュアルエディタを使用している場合、SNSやYouTubeの「埋め込みタグ」を記述してしまうとエラーが出ることがあるようです。
対処方法
ビジュアルエディタでは、SNSやYouTubeのURLをそのまま書くだけで記事に埋め込まれる（コードが変換される）ため、「埋め込みタグ」を利用する必要はありません。URLのみに書き換えればエラーが消えると思います。
また、広告タグの貼り付けや編集はテキストエディタで行うようにしてください。
とりあえずのまとめとお願い
THE THOR の AMP ページは、個人的な意見としては非常に優秀だと思います。通常ページとほぼ同じデザインで表示されますし、出やすいエラーにもほとんど対処されていて、当初はマニュアルが不親切すぎるのであまり力を入れていないのかなという印象だったのですが、これなら有効化するだけで十分かもと思ってしまったくらいです。
とはいえ、この記事はテスト用の別サイトを使って色々検証しながら書いたので、想定できていない部分などもあると思います。こんなエラーもあるよ、とか、ここが分かりづらいぞ、など何か気付いたことがあれば Twitter からご連絡下さると嬉しいです。よろしくお願いいたします。
