AMPページの作り方
（更新 ）
ホームページをAMP（アンプ、Accelerated Mobile Pages）に対応すると、モバイル環境で閲覧した際にサイトの表示が高速化されます。
当ホームページでもAMPには対応していますが、自サイト内の平均読み込み時間で比較するとAMPページは「-76％」となっており、かなり高速で表示されるようになりました。
AMPは当ホームページでご紹介しているような静的なHTMLサイトと相性がよく、シンプルで軽量なHTMLとCSSで作成することにより、ウェブサイトを高速化することができます。
ただ、実際に作成する際、外部CSSは原則として使えないなどの「AMP HTML」のルールに沿って作成する必要があり、一定の改修作業が必要となります。また、AMPでは一般的な<script>タグによるJavaScriptは使えないため、サイト内でJavaScriptを多用している場合は、AMP独自のコンポーネントへの置き換え作業が必要になります。
そのため、動的なサイトをAMP化するには多少はハードルが高い印象があります。
一方で、「AMP HTML」と「HTML5」はほぼ同様の仕様となっており、AMP独自のタグはそれほど多くはありません。シンプルな構成のHTMLサイトであれば、既存のページをそのまま流用しやすいため、AMPプロジェクト公式サイトの手順に沿って対応することをおすすめします。
Googleの公式ブログでは、「3. サイト全体を AMP 化（#AMPlify）する必要はない」とあるため、サイト内の１部のページのみをAMPに対応するのでも問題はありません。
また、「6. 検索結果のランキングに影響はない」とありますが、当サイトでも検索順位への影響は全くありませんでした。高速で表示されることで軽微なSEO効果ぐらいはあるだろうと期待していましたが、現状では全くの無風状態です。
モバイルファースト・インデックスについては、AMP版を作成しても、すでにレスポンシブWebデザインで正規化しているモバイルページが存在する場合、そちらの方が評価対象となるため、当サイトではSEO効果はありませんでした。
また、かつてはモバイル検索のリッチリザルト掲載のためにAMP対応が必須でしたが、現在は非AMPページであっても同等に掲載されるように仕様が変更されています。
そのため、今となってはクリック率改善のためにAMP化する必要性は低くなった反面、保守する手間はかかるため、多くのメディアがAMP対応をやめてしまいましたし、当サイトもやめました。
ただ、純粋にユーザーのモバイル閲覧時の表示速度を高める目的で、アクセスの入り口となるランディングページをAMP化する意義はあると思いますので、もしAMP化をする際は以下の手順で対応することをおすすめします。
AMPページ作成と「Google AMPキャッシュ」の関係
AMPページを作成しておくと、GoogleにAMPページのキャッシュが作成され、Googleのサーバーからキャッシュページが直接表示されるようになります。
（※参照：概要 | Google AMP キャッシュ | Google Developers）
PCサイトでもキャッシュがありますが、こちらは正規ページのキャッシュになります。
■正規ページのキャッシュ
こちらはその正規ページのキャッシュを表示したものです。
（※Googleは2024年にこのキャッシュ表示機能を廃止したため、現在では表示できなくなりました。）
「Google AMPキャッシュ」は、この正規ページのキャッシュではなく、作成した「AMPページのキャッシュ」になりますが、モバイル環境ではこちらが直接表示されることで高速で表示されるようになります。
■AMPページのキャッシュ
そのため、配信されるドメインはGoogleのURLになります。
仮に、自サイトでは重たい格安サーバーを利用していたとしても、Googleが管理しているサーバーから配信されるため、サイトの表示が高速化されるメリットがあります。
一方で、自サーバー内に作成したAMPページに訪問者が直接アクセスされることはほとんどないかもしれません。
上記のように、モバイル検索時には異なるドメインからキャッシュ配信されるため、基本は正規ページを「HTML5 ＋ レスポンシブウェブデザイン」で作成しつつも、高速化したいページのみをAMP化させていくことをおすすめします。
- 正規ページ：PC＋タブレット端末＋スマホ（※HTML5のレスポンシブウェブデザインで作成）
- AMPページ：スマホ（※AMP HTMLで作成）→ Google AMPキャッシュ
また、Google 検索セントラルでは以下の記載があり、AMPページについてもレスポンシブ デザインが推奨されています。
「AMP ページ自体はどの種類のデバイスでも表示できるため、レスポンシブ デザインで AMP ページを作成することをおすすめします。」
パソコンやタブレット端末ではGoogle AMPキャッシュは配信されず、あまり高速化されないとは思いますが、AMPはGoogleだけで利用できる機能ではないため、PCサイトでもタブレット端末でも閲覧できるようにしておいた方がよいかもしれません。
ホームページをAMP化する際の手順
まずはAMPページを入れておく専用の「amp」フォルダを作成し、カテゴリ分けのフォルダなどもPC用と同じように作成しておきます。
次に、作成したフォルダにオリジナルページのHTMLファイルをコピーし、以下の10カ所程度を修正することでAMPに対応することができます。
■AMP化の手順
（１）DTDの<html ⚡ lang="ja">の箇所
（２）<link rel="canonical"でオリジナルページへ正規化
（３）外部CSSは使えないため、<link rel="stylesheet"を削除
（４）<style amp-custom></style>内に外部CSSを置き換え
（５）<style amp-boilerplate>～の定型文の記載
（６）<script async src="https://cdn.ampproject.org/v0.js"></script>の定型文の記載
（７）<img>タグを<amp-img></amp-img>に置き換え
（８）javascriptの使用は制限があるため、アクセス解析や広告などを削除
（９）オリジナルの元のページに<link rel="amphtml"を記載してAMPページを通知
（10）チェックツールでエラーを修正
上記の公式サイトではサンプルコードが公開されていますが、順序なども含め、ほぼ、そちらの通りに作成していけば問題ありません。
■<html ⚡ lang="ja">の記載
稲妻マークの絵文字に戸惑うかもしれませんが、そのまま記載します。また、lang="en">の箇所は日本語のlang="ja">に書き変えておくことをおすすめします。
■AMPページの指定とオリジナルへの正規化
AMPページは昔のガラケー携帯サイトの作り方と似ていますが、PC用のオリジナルページには <link rel="amphtml" を記載します。これにより、AMP版のページが存在することをGoogleやTwitterなどに通知することができます。
一方、AMPページの方には <link rel="canonical" を記載して元のオリジナルページへと正規化します。
この <link rel="canonical" についてはPC用のオリジナルのページにも記載し、自分自身に正規化して明示しておくのもよいかと思います。
■CSSの記載
外部CSSは使えないため、<link rel="stylesheet"の記載は削除します。スタイルシートは<style amp-custom></style>内にまとめて記載しますが、正規ページの外部CSSと同じものをそのまま記載しておけば問題ないかと思います。
Google 検索セントラルでは、AMPページはレスポンシブ デザインで作成することが推奨されているため、正規ページのレスポンシブ対応のCSSをそのまま使用するよいと思います。
ただし、AMPはモバイル端末での表示がメインとなるため、PC表示用のスタイルシートについては簡素化した方が高速化されるかもしれません。メディアクエリのブレイクポイントで600pxあたりまでのスマホに対応しておけば問題ないかと思います。
また、できるだけCSSのMinify化で半角スペースや改行などを削除し、ファイルの容量を圧縮しておくことをおすすめしますが、Google AMPキャッシュでの利用については自動で変換してくれるようです。
（参照：HTML のサニタイズ）
■定型文の記載
（５）と（６）の定型文のコードは長いので、このページでは省略してますが、何も考えずに公式サイトの通りにそのまま記載して問題ありません。
上記5カ所の記載がメインになりますが、AMP広告も掲載する際は「amp-ad」のタグが必要となり、さらにアクセス解析も設置する際は「amp-analytics」関連でのタグが必要になります。
■画像タグの修正
難易度が高いのは<img>タグの<amp-img></amp-img>への置き換えですが、AMPページでは終了タグの</amp-img>が必要なため、一括での置換は難しいかもしれません。
また、画像に layout="responsive" を指定することでコンテナ要素の幅と同じになるように自動で拡大、縮小されます。ただし、ロゴなどに設定してしまいますとロゴが巨大化してしまいます。
そのため、はみ出る場合は縮小されつつ、なおかつ通常の場合は原寸大で表示される layout="intrinsic" を指定しておくことをおすすめします。
■内部リンク
AMPページに記載する内部リンクは、オリジナルの正規ページを指定しているケースが多いと感じています。オリジナルページでのキャッシュも確認して、そちらと同じ構造になるようにしておくことをおすすめします。
■その他
大手ニュースサイトなどの場合、構造化データも作成して検索結果のリッチリザルトにも対応した方がよいと思いますが、こちらについては省略できます。
AMP化しないと利用できないリッチリザルト機能があるものの、そもそもAMPによる「モバイルサイト高速化」と構造化データによる「検索結果のリッチリザルト化」は別の機能です。とりあえずはAMP化した上で、余力があれば対応することをおすすめします。
- AMP → モバイル環境での高速表示
- 構造化データ → 検索結果でのリッチリザルト表示
ちなみに、このページでは「HowTo」の構造化データを記載していますが、タイミングによってはモバイル検索でこのようなリッチリザルトが表示されます。
ただし、この構造化データのリッチリザルトはAMP化しなくても利用できるものも多いため、AMPに関わらず、通常のホームページでも対応しておくとよいかもしれません。
また、OGPタグはPC用のオリジナルのものをそのまま使用してよいと思いますが、細かい点は大手メディアなどのAMPページを参考にされるとよいかと思います。
WEBフォントについては、Google AMPキャッシュではフォントもキャッシュする必要があるため、サーバー内に設置しているフォントについてはダウンロード可能な状態に設定しておくことをおすすめします。
もし表示されない場合、.htaccessでMIMEタイプを設定しておくことをおすすめします。
→ @font-faceでWEBフォントの指定方法
AdSense広告の場合、amp-adのスクリプトを<head></head> タグの間に貼り付けたのち、AMP対応のAdSenseタグをコンテンツ中に貼り付ける形になります。
Google Analyticsについては、実際に設定する際はこちらのページを参考にしながら設定するとよいかと思います。
■AMPチェック
あとはAMPのチェックツールを使い、エラーが出てこないか確認します。
AMPではHTML5の仕様にはない独自のカスタム要素（<amp-img> など）や属性（⚡、layoutなど）を使用しているため、通常のW3Cバリデーターではエラーになります。そのため、記述の検証には専用のAMPバリデーターを使用します。
こちらはこのページのAMPページをチェックしたものですが、問題ない場合はこのように表示されます。
プレビュー機能もあり、イナズママークがあれば、AMPページということになります。
チェックツールについては、上記の「AMPテスト」ツールは2023年12月に終了となったため、現在はChromeデベロッパーツールやAMP公式のThe AMP Validator、あるいはGoogle Search Consoleの「AMP」ステータスレポートを使用することをおすすめします。
AMPページの内部リンクには正規URLを記載する
AMPページでは左上のマークをタップすると正規化のURLを確認できますが、この表示されているAMPページ自体はキャッシュのため、配信されるURLについてはGoogleのURLになります。
例えば、このページのAMPバージョンの場合、Google AMPキャッシュのURLは以下のようになっていましたが、httpsやhttpなどでも違いがあり、おそらく、/amp/s/の「s」はhttpsのsかと思います。
https://www.google.co.jp/amp/s/www.homepage-tukurikata.com/amp/hp/amp.html
URLがGoogleのため、AMPページの内部リンクを相対パスで指定すると、内部リンクもGoogleのURLで表示されるかといえば、PCページ版のキャッシュと同様、きちんと自サイトのURLで表示されていました。
上記の「HTML のサニタイズ」の箇所には以下の記載がありますが、このことを指しているのではないかと思われます。
「ドキュメントがサイト運営者からではなく Google AMP キャッシュから提供される場合でも外部へのリンクを引き続き使用できるよう、外部へのリンクが絶対リンクに設定されます。」
また、AMPページの内部リンクには、「自サイト内のAMPページ」でも「GoogleのAMPページのキャッシュ」でもなく、「正規のオリジナルページ」で内部リンクを記載するのが一般的です。
■AMPページに記載する内部リンク → PC版の正規URLを指定
そのため、「GoogleのAMPページのキャッシュ」から、内部リンクを経由して自サイト内を巡回する際はオリジナルの正規ページへとアクセスされることになります。
- 自サイト内のAMPページ → 実際は直接アクセスされない
- GoogleのAMPページのキャッシュ（GoogleのURL）→ モバイル検索のランディングページ
- 正規のオリジナルページ → PC検索のランディングページ
また、AMPページの内部リンクには自サイトの正規URLが記載されるため、ランディングページ自体は高速化されたとしても、そこからサイト内を巡回する場合は正規のオリジナルページへ移動となります。
そのため、検索結果から飛んだ最初のランディングページについては高速化されたとしても、そこからサイト内を巡回する場合は遅く表示されるはずです。
ちなみに、すべてのページを高速化させたいからといって、手動でGoogleのドメインを内部リンクに直接記述することは避けてください。これはCORS（同一オリジンポリシー）違反を引き起こし、Cookieやセッション、アクセス解析が正常に動作しなくなる可能性があります。
内部リンクは常に自サイトの正規URL（または相対パス）を記述し、キャッシュ状態の維持や制御はGoogle側に任せることをおすすめします。