AMPページの作り方

ホームページをAMP(アンプ、Accelerated Mobile Pages)に対応しますと、モバイル端末で閲覧した際にサイトの表示が高速化されます。AMPプロジェクトの公式ページは日本語にも対応しているため、こちらの手順に沿ってAMP化していくことをおすすめします。

https://amp.dev/ja/

AMPは当ホームページでご紹介しているような静的なHTMLサイトと相性がよく、シンプルで軽量なHTMLとCSSで作成することにより、ウェブサイトを高速化することができます。

実際に作成する際、外部CSSは使えないなど「AMP HTML」のルールに沿ってHTMLファイルを作成する必要がありますが、「HTML5」とほぼ同様となっており、AMP独自のタグはそれほど多くはないため、既存ページをそのまま流用することで簡単に対応できます。

AMPはGoogleが中心となって開発されたプロジェクトのため、W3CでのValidatorではエラーが出てしまいますが、本体の正規ページは「HTML5」で作成しつつ、モバイル検索用として別途に「AMP HTML」でAMPページを作成しておくことをおすすめします。

現在ではスマートフォンの普及でレスポンシブウェブデザインが主流になっていますが、基本は「HTML5 + レスポンシブウェブデザイン」でモバイル端末に対応しつつ、高速化したいページのみをAMP化させていくとよいでしょう。

Googleの公式ブログでは、「3. サイト全体を AMP 化(#AMPlify)する必要はない」とあるため、サイト内の1部のページのみをAMPに対応するのでも問題はありません。AMPに対応すると高速化のメリットがある一方、配信されるドメインが異なってしまうなどのデメリットもあるため、徐々に対応していくことをおすすめします。

ホームページをAMP化する際の手順

まずはAMPページを入れておく専用の「amp」フォルダを作成し、カテゴリ分けのフォルダなどもPC用と同じように作成しておきます。

次に、作成したフォルダにオリジナルページのHTMLファイルをコピーし、以下の10カ所程度を修正することでAMPに対応することができます。

AMP化の手順

(1)DTDの<html ⚡ lang="ja">の箇所
(2)<link rel="canonical"でオリジナルページへ正規化
(3)外部CSSは使えないため、<link rel="stylesheet"を削除
(4)<style amp-custom></style>内に外部CSSを置き換え
(5)<style amp-boilerplate>~の定型文の記載
(6)<script async src="https://cdn.ampproject.org/v0.js"></script>の定型文の記載
(7)<img>タグを<amp-img></amp-img>に置き換え
(8)javascriptの使用は制限があるため、アクセス解析や広告などを削除
(9)オリジナルの元のページに<link rel="amphtml"を記載してAMPページを通知
(10)チェックツールでエラーを修正 → AMPテスト

上記の公式サイトではサンプルコードが公開されていますが、順序なども含め、ほぼ、そちらの通りに作成していけば問題ないかと思います。

<html ⚡ lang="ja">の記載

稲妻マークの絵文字に戸惑うかもしれませんが、そのまま記載します。また、lang="en">の箇所は日本語のlang="ja">に書き変えておくことをおすすめします。

AMPページの指定とオリジナルへの正規化

AMPページは昔のガラケー携帯サイトの作り方と似ていますが、PC用のオリジナルページには <link rel="amphtml" を記載します。これにより、AMP版のページが存在することをGoogleやTwitterなどに通知することができます。ニュースメディア等でこの <link rel="amphtml" の記載があれば、AMPに対応していますので、大手サイトなどを参考にしながら作業するとよいかもしれません。

一方、AMPページの方には <link rel="canonical" を記載して元のオリジナルページへと正規化します。

CSSの記載

外部CSSは使えないため、<link rel="stylesheet"の記載は削除します。スタイルシートは<style amp-custom></style>内にまとめて記載しますが、レスポンシブ対応の外部CSSと同じものをそのまま記載しても問題ないかと思います。

ただし、AMPはモバイル端末での表示がメインとなるため、PC表示用のスタイルシートを削除した上でコードを簡素化した方がさらに高速化されるかもしれません。メディアクエリのブレイクポイントで600pxあたりまでのスマホに対応しておけば問題ないかと思います。

定型文の記載

(5)と(6)の定型文のコードについては長いので、このページでは省略してますが、何も考えずに公式サイトの通りにそのまま記載して問題ありません。また、外部CSSやjavascriptのほか、コメントタグなども削除することをおすすめします。formタグについても対応が面倒なため、当サイトではタグを削除しました。

上記5カ所の記載がメインになりますが、AMP広告も掲載する際は「amp-ad」のタグを追加で一つ必要となり、さらにアクセス解析も設置する際は「amp-analytics」関連で2つのタグが必要になります。

画像タグの修正

難易度が高いのは<img>タグの<amp-img></amp-img>への置き換えですが、AMPページでは終了タグの</amp-img>が必要なため、一括での置換は難しいかもしれません。

また、画像に layout="responsive" を指定することでコンテナ要素の幅と同じになるように自動で拡大、縮小されます。ただし、ロゴなどに設定してしまいますとロゴが巨大化してしまうため、はみ出る場合は縮小されつつ、なおかつ通常の場合は原寸大で表示される layout="intrinsic" を指定しておくことをおすすめします。

内部リンク

AMPページに記載する内部リンクは、オリジナルの正規ページを指定しているケースが多いと感じています。オリジナルページでのキャッシュも確認して、そちらと同じ構造になるようにしておくことをおすすめします。

その他

大手ニュースサイトなどの場合は「Schema.org」の箇所の定義もした方がよいと思いますが、この構造化データについては省略できます。→ AMP が検索結果にどのように表示されるかを理解する

とりあえずはAMP化した上で、余力があれば、構造化データにも対応することをおすすめします。

このページでは「HowTo」の構造化データを記載していますが、タイミングによってはモバイル検索でこのようなリッチリザルトが表示されます。

ただし、この構造化データはAMP化しなくても対応できるため、AMPに関わらず、通常のホームページでも対応されるとよいかもしれません。

また、OGPタグはPC用のオリジナルのものをそのまま使用してよいと思いますが、細かい点は大手メディアなどのAMPページを参考にされるとよいかと思います。

AdSense広告の場合、amp-adのスクリプトを<head></head> タグの間に貼り付けたのち、AMP対応のAdSenseタグをコンテンツ中に貼り付ける形になります。

AMPチェック

あとはAMPのチェックツールを使い、エラーが出てこないか確認します。

こちらはこのページのAMPページをチェックしたものですが、問題ない場合はこのように表示されます。

プレビュー機能もあり、イナズママークがあれば、AMPページということです。

チェックツールについては、ChromeデベロッパーツールやAMPの公式ページのThe AMP Validatorなどもありますが、上記のGoogleのAMPテストが使いやすかったです。

AMPページとGoogle AMPキャッシュの関係

AMPページが昔のガラケー携帯サイトと大きく違う点は、GoogleやTwitterはこのAMPページをキャッシュした上でそちらを表示させるという点です。

(※参照:概要 | Google AMP キャッシュ | Google Developers

そのため、作成したAMPページがそのまま表示されるわけではなく、Googleのサーバーでホストされるキャッシュ(Google AMPキャッシュ)が表示されるため、異なるドメインから配信されることになります。

PCサイトでも検索結果ですばやく内容を確認したい場合、キャッシュを閲覧することがあるかと思いますが、Googleのサーバーから配信されるため、仮に本体サイトのサーバーが落ちていたとしても高速で表示されます。

こちらはパソコン上でのこのページのキャッシュです。

AMPページはこれのモバイル版のイメージになるかと思いますが、URLがGoogleとなっており、正規ページのURLが上部に表示されている点はPC版のキャッシュと同じです。

ただし、Goolgeの検索結果からアクセスがあった際、GoogleのAMPキャッシュが直接表示される点で違いがあります。

AMPページでは左上のマークをタップすると正規化のURLを確認できますが、この表示されているAMPページ自体はキャッシュのため、URLについてはGoogleになります。

このページの場合、Google AMPキャッシュのURLは以下になっていましたが、httpsやhttpなどでも違いがあるようです。

https://www.google.co.jp/amp/s/www.homepage-tukurikata.com/amp/hp/amp.html

URLがGoogleのため、AMPページの内部リンクを相対パスで指定するとGoogleのURLで表示されるかといえば、PCページのキャッシュと同様、きちんと自サイトのURLで表示されます。

また、AMPページの内部リンクには、「自サイト内のAMPページ」でも「GoogleのAMPページのキャッシュ」でもなく、「正規のオリジナルページ」で内部リンクを記載するのが一般的です。

そのため、「GoogleのAMPページのキャッシュ」から自サイト内を巡回する際はオリジナルページへとアクセスされることになり、自サイト内のAMPページに直接アクセスされることはないかもしれません。

  • 自サイト内のAMPページ → 実際は直接アクセスされない
  • GoogleのAMPページのキャッシュ(GoogleのURL)→ モバイル検索のランディングページ
  • 正規のオリジナルページ(自サイト内のURL)

この理由についてですが、せっかくAMPページを作成したとしても、ユーザーが利用している個人向けの格安レンタルサーバーから配信していたら表示が遅くなるため、高速化する意味がないからと思われます。

Googleが管理する高機能なサーバーでホストされることにより、サーバーがダウンするなどの心配はなくなりますし、高速化されるメリットもありますが、その一方でGoogleなどのURLで表示される点はデメリットかもしれません。

また、AMPページに記載する内部リンクについてはGoogle AMPキャッシュのURLではなく、一般的には自分のサイトのオリジナルURLが記載されるため、ランディングページは高速化されたとしても、そこからサイト内を巡回する場合はオリジナルページへの移動となります。

そのため、検索結果から飛んだ最初のランディングページについては高速化されたとしても、そこからサイト内を巡回する場合は遅く表示されるはずです。

全てのページを高速化する場合、内部リンクまでを含め、全てのページをGoogle AMPキャッシュのURLで指定する必要がありますが、そもそもAMPはGoogleのプロダクトではありませんし、AMPページを利用できるサービスはGoogleのみではないため、一般的なサイトではそういった形での運用はされていないようです。

概ね、PCでの検索結果のキャッシュと同じイメージで考えればよいかと思います。