私が初めてAMP対応に着手しようとした時、複数のサイトを渡り歩いて情報を集めながら進めていかなければならない状態でした。「で、結局どうすればいいの」となったので、忘備録も兼ねてまとめていきたいと思います。速くなる仕組みなどは今回は省略します。
作る前に知っておいてほしい仕様
項目が多くなってしまったのですが、着手する前にAMPの制約を確認しましょう。作成方法にお急ぎの方はジャンプ
AMPの公式仕様に沿ってタグを記述する必要がある
AMPの公式仕様はこちらのサイト（https://amp.dev/ja/）に記載されています。この仕様で許可されていないタグは使用することができません。サイトから欲しい情報を探すのは大変なので、「AMP iframe」「AMP img」などキーワードでGoogle検索した方が速いと思います。必要になった時に検索すればいいので、今は耳に入れる程度でOKです。
AMPは現在進行形で許可されるタグが増えている
前項で許可されていないタグは使用できないと書きましたが、現在進行形で許可されるタグは増えていっているようです。ゆくゆくは使用できるようになるかもしれません。私が情報収集している際、ソースのコメントは使用できないという情報を見ましたが、実際使用してもエラーは起こりませんでした。
レスポンシブ対応が必須
AMPで許可されているviewportは、これだけです。|
1 |
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> |
これを機に、PCのみのサイトはレスポンシブ対応してしまうのがオススメです。
JSを使ってはいけない？
AMPには、スライドショーなどの代表的なJSがあらかじめ準備されています。動作に制限があるので、複雑な表現はできませんが、Google Analytics、ポップアップモーダル、ハンバーガーメニュー、TOPへ戻るボタンの表示非表示などが使用できます。独自で組んだアニメーションや、ajaxでのデータの取得などは厳しいかもしれませんが、iframeで読み込めば可能です。ちょっと無理くりです。
iframe読み込みについては、別記事を書いていますので、ぜひそちらも。
⇒ 別記事：AMP非対応のJSをiframeで使用する
styleはhead内に直書き（外部化するには？）
AMP化する際に私が一番ネックに感じたのが「styleはhead内に直書き」という仕様。しかもインラインでのstyle記述はエラー対象です。HTMLをPHPファイルにして、以下のようにCSSをincludeしてしまえばテキストとして読み込まれるので、共通化も可能です。
|
1 2 3 4 |
<style amp-custom> <?php include("./css/reset.css") ?> <?php include("./css/style.css") ?> </style> |
CSSのサイズ上限は75KBまで
AMPは高速化するため、CSSのサイズ上限があります。不要なCSSは極力削り、75KB以内に留めましょう。（2020年2月に50KBから75KBに緩和）
フォームは使用できるがデータの受け渡しに難あり
AMPでのフォームはレスポンスがJSONで返ってきます。ajaxでログインフォームなどを作っていた場合は改修が必要になります。また、<input type=button>と、<input type=image> は許可されていません。
WordPressサイトでの導入は困難
WordPressで構築されたサイトのAMP化はちょっと苦労します。初回構築時からAMP対応のテンプレートを使用していれば何とかなるかもしれませんが、例えば「All in One SEO Pack」などプラグインを追加するとcssを外部読み込みしようとするので、削ったりしなければならず大変面倒です。根気が必要になってきます。AMP対応広告が存在する
これは補足的な情報ですが、AMP対応のGoogle Adsenseが存在します。優遇されている点もあるようなので、興味があれば検索してみてください。
【その1】head内の記述方法
基本の記述方法
それでは、headタグの記述方法から見ていきましょう。headタグは、あらかじめ定義された記述を使用する必要があります。まずは下記にをコピペして、headタグにしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!doctype html> <html ⚡ dir="ltr" lang="ja"> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <link rel="canonical" href="https://xxxxxxxx.co.jp/"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <title>タイトルが入ります</title> <!-- ▽ 省略できるmetaタグ --> <meta name="robots"> <meta name="format-detection" content="telephone=no"> <link rel="shortcut icon" href="/images/favicon.ico" /> <meta name="description" content="ここにdescription" /> <meta name="copyright" content="© XXXX All Rights Reserved." /> <meta name="author" content="株式会社XXXXXX" /> <meta property="og:url" content="https://xxxxxxxx.co.jp" /> <meta property="og:type" content="website" /> <meta property="og:title" content="タイトル" /> <meta property="og:locale" content="ja_JP" /> <meta property="og:description" content="ここにdescription" /> <meta property="og:site_name" content="ここにサイトネーム" /> <meta property="og:image" content="https://xxxxxxxx.co.jp/ogimage.png" /> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@xxxxx" /> <meta name="thumbnail" content="https://xxxxxxxx.co.jp/thumbnail.png" /> <!-- △ 省略できるmetaタグ --> <style amp-custom> <?php include("./css/style.css") ?> </style> <!-- ※ここにJSの読み込みを追加（後述） --> </head> |
- 見慣れない <html ⚡ dir=”ltr” lang=”ja”> の記述に戸惑いますが、ここは雷の絵文字になっているのが正解です。
- 灰色になっている行（1～5行目と7,8行目）は固定ですので変更しないでください。それ以外はご自身のサイトに合わせて変更してください。metaタグなどが不要であれば削除しても構いません。
- 特に6行目の下記の記述の箇所は、間違っていると検索結果からはじかれてしまうので、忘れずに変更してください。
1<link rel="canonical" href="https://xxxxxxxx.co.jp/">
- styleはPHPでincludeして、直書きと同じ扱いにしています。ディレクトリとファイル名を合わせておいてください。
追加でJSの読み込みが必要な場合
スライドやGoogle Analyticsを追加する際、head部分に追加でJSを読み込む必要があります。前項で「※ここにJSの読み込みを追加」と書かれている箇所に追加します。
JSを追加した後のheadはこんな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
～略～ <style amp-custom> <?php include("./css/style.css") ?> </style> <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script> <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script> <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script> <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script> </head> |
追加したJSは、7行目から順に、Google Analytics、Youtube、サイドバー（ハンバーガーメニュー）、iframe、lightboxを読み込んでいます。
では、読み込むJSはどうやって調べるのか？という点です。まず導入したいタグのAMPの公式ページを確認します。
例として、Google Analyticsを導入する際に必要なJSを紹介します。
AnalyticsのAMP仕様はこちらに掲載されています。
⇒ amp-analytics ： https://amp.dev/ja/documentation/components/amp-analytics/
ページを開くと、下記のような見た目のページだと思います。
赤線で囲われた部分をheadに記述します。headに記述の必要があるJSは常にこの場所に表示されています。
そのまま先へ読み進めていくと、bodyタグ内での使い方・仕様が書いてあります。（Analyticsの導入は後述します）
都度検索して、ガイドラインに沿って記述していくだけなので、やってみると案外簡単です。
詳細な仕様が載っているので、適宜読み飛ばしていくと楽です。
【その2】body内の記述方法
通常のHTMLと記述方法が異なるタグ
bodyの中には、通常のHTMLと書き方が異なるタグが存在します。それ以外はいつも通りのコーディングをすれば大丈夫です。では、いつもと違うタグはどんなタグでしょうか？
- imgタグ
- iframeタグ
- Youtubeの埋め込みタグ
- Facebook、Twitterの埋め込みタグ
- Facebookいいねボタン、Twitterのツイートするボタン
- lightbox
- Google Analytics
- ハンバーガーメニュー
JSが絡んでいる箇所は書き替えの必要があると思ってください。
基本的には、imgタグの記述を変更していくのがメインになると思います。
タグを書き換えいってみましょう。
imgタグを書き換える
⇒ imgタグのAMP公式仕様： https://amp.dev/ja/documentation/components/amp-img/まず、仕様に沿ってimgタグをamp-imgに書き換えてみましょう。
|
1 |
<amp-img src="img01.png" alt="" width="150" height="50"></amp-img> |
width、heightは必須。閉じタグも必要です。
また、CSS側の記述もamp-imgにしないと効かない場合があります。
実行結果をブラウザで確認してみると、amp-imgの中にimgタグが生成されているので、私はamp-imgとimg両方に同じCSSを適用して保険をかけています。
|
1 2 3 4 |
amp-img, img{ display: block; } |
レスポンシブに対応する画像の場合は、 layout=”responsive” を追加します。
AMPのレスポンシブ属性は少し癖があり、この属性を追加するとCSSによっては親要素に対して100%になったりするので、divなどでくくって親要素に横幅指定してあげるのが綺麗だと思います。（レスポンシブはimg以外のタグでも使用できます。）
|
1 |
<amp-img src="img01.png" alt="" width="150" height="50" layout="responsive"></amp-img> |
ブラウザ幅で表示する画像を切り替えたい場合はmedia属性を追加して、ampタグを併記します。
|
1 2 |
<amp-img media="(min-width: 751px)" src="img01_pc.png" alt="" width="150" height="50"></amp-img> <amp-img media="(max-width: 750px)" src="img01_sp.png" alt="" width="150" height="50" layout="responsive"></amp-img> |
iframeタグ
⇒ iframeの公式仕様： https://amp.dev/ja/documentation/components/amp-iframe/AMP対応ページでiframeを使用しましょう。
まずiframeをAMPを使用するには、head部分にJSを追加で読み込みます。
|
1 |
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script> |
では実際にiframeを使用してみましょう。
iframeはAMP対応ページでは下記の記述になります。
|
1 2 3 4 5 6 7 |
<amp-iframe width="200" height="100" sandbox="allow-scripts allow-same-origin" layout="responsive" frameborder="0" scrolling="no" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=iceland"> </amp-iframe> |
width、heightは必須です。
レスポンシブにしたい場合は、layout=”responsive”属性を付与します。SP幅の際に100%にしたい場合は、CSSでwidth=”100%”を利かせてあげましょう。
これでGoogle MAPを出力できます。
Youtubeの埋め込みタグ
⇒ Youtube埋め込み公式仕様： https://amp.dev/ja/documentation/components/amp-youtube/?format=websitesAMP対応ページでYoutubeの埋め込みタグを使用しましょう。
head内に以下のJSを追加します。
|
1 |
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script> |
Youtubeタグは下記の記述になります。
|
1 2 3 4 5 |
<amp-youtube autoplay data-videoid="6Y3bRMwBCP4" layout="responsive" width="480" height="270"></amp-youtube> |
width、heightは必須です。autoplayは自動再生なので、不要であれば削除。
data-videoidには、表示したいYoutubeのビデオIDを入れてください。data-videoidの代わりに、data-live-channelidにすると、チャンネルの貼り付けも可能です。
レスポンシブにしたい場合は、layout=”responsive”属性を付与します。SP幅の際に100%にしたい場合は、CSSでwidth=”100%”を利かせてあげましょう。
lightbox
⇒ lightbox公式仕様 ： https://amp.dev/ja/documentation/components/amp-lightbox/AMP対応ページでlightboxを使用しましょう。
head内に以下のJSを追加します。
|
1 |
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script> |
lightboxのタグは下記の記述になります。
|
1 2 3 4 5 |
<button on="tap:quote-lb">See Quote</button> <amp-lightbox id="xxxxx" layout="nodisplay"> <blockquote>"Don't talk to me about JavaScript fatigue" - Horse JS</blockquote> <button on="tap:quote-lb.close">Nice!</button> </amp-lightbox> |
buttonタグ内の「on=”tap:xxxxx”」の記述で、開く対象のlightboxを指定しています。
xxxxxの箇所を、amp-lightboxタグ内のidと同じにしてください。うまくいけば、ボタンタップでlightboxが開きます。
buttonタグは代わりにdivなどを使用しても構いません。
その際は制約があって、role属性とtabIndex属性が必須になります。（divタグだけど「buttonの動作をします」と宣言させています）
それ以外はclassやidを振ってもOKですし、子要素に画像を表示したり、好きにコーディングして構いません。
|
1 |
<div on="tap:quote-lb" role="button" tabIndex="0"></div> |
また、この「on=”tap:xxxxx”」は、複数個所に設置できます。header要素の中のボタンやfooter要素のリンクからなど、あらゆる箇所から開くことが可能です。
amp-lightboxタグの中身も自由に変更できます。
制約はひとつで、必ず閉じるボタンを含む必要があります。
|
1 2 3 4 5 6 |
<amp-lightbox id="xxxxx" layout="nodisplay"> <!--! 好きに組んでOK --> <div class="closeBtn" on="tap:xxxxx.close" role="navigation" tabIndex="0">× 閉じる</div> </amp-lightbox> |
先述のとおり、divで組んでみました。
ログインフォームや利用規約を表示したり、色々試してみてください。
IDを変更すれば、1つのページに複数のlightboxを設置してもOK。
サイドバー（ハンバーガーメニュー）
⇒ sidebar公式仕様 ： https://amp.dev/ja/documentation/components/amp-sidebar/AMP対応ページでのサイドバーは、アニメーションに制限があり、必ず画面の左右いずれかからスライドして表示されます。Facebookのスマホ版表示と同じ動作ですね。
では、それを踏まえてAMP対応ページでsidebarを使用しましょう。
head内に以下のJSを追加します。
|
1 |
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script> |
次に、headerの中にサイドバーを起動するためのボタンを設置します。（headではなくheaderなので注意）
|
1 |
<div role="button" on="tap:xxxxxx.toggle" tabindex="0" class="hamburger">☰</div> |
内部は好きに画像を表示したりして、好きにカスタマイズしてください。
最後に、サイドバー本体を追加します。これはheaderの閉じタグの直後に追加してください。
|
1 2 3 4 5 6 7 8 |
<amp-sidebar id="xxxxxx" layout="nodisplay" side="left"> <div role="button" aria-label="close sidebar" on="tap:xxxxxx.toggle" tabindex="0" class="close-sidebar">✕</div> <ul class="sidebar"> <li><a href="#">Example 1</a></li> <li><a href="#">Example 2</a></li> <li><a href="#">Example 3</a></li> </ul> </amp-sidebar> |
起動するためのボタン＆閉じるボタンの「on=”tap:xxxxxx.toggle”」のxxxxxxとなっている2箇所と、amp-sidebarのidを合わせます。これでサイドバーの開閉が動作します。
amp-sidebarの中身は、閉じるボタンが必須という制約がありますが、それ以外は好きにコーディングしてOKです。
▼サイドバーの中のボタンからlightboxを起動したい時
サイドバーを消す動作とlightboxを開く動作を同時にしたい！
その際は下記のようにカンマ区切りで記述すればOKです。
|
1 |
<div on="tap:quote-lb,sidebar1.toggle" role="dialog" tabIndex="0">ログインする</div> |
Facebook埋め込みタグ
⇒ Facebook埋め込み公式仕様 ： https://amp.dev/ja/documentation/components/amp-facebook-page/?format=websitesAMP対応ページでFacebookの埋め込みタグを使用しましょう。
head内に以下のタグを追加します。
|
1 |
<script async custom-element="amp-facebook-page" src="https://cdn.ampproject.org/v0/amp-facebook-page-0.1.js"></script> |
Facebook埋め込みタグは、以下の記述になります。
|
1 2 3 4 5 6 7 8 |
<amp-facebook-page width="340" height="130" layout="fixed" data-hide-cover="true" data-href="https://www.facebook.com/xxxxxx/" > </amp-facebook-page> |
width、heightを調整するのと、data-hrefのxxxxxxの箇所に、ご自身のFbのIDを挿入してください。
Twitter埋め込みタグ
⇒ Twitter埋め込み公式仕様 ： https://amp.dev/ja/documentation/components/amp-twitter/?format=websitesAMP対応ページでFacebookの埋め込みタグを使用しましょう。
head内に以下のタグを追加します。
|
1 |
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script> |
Twitter埋め込みタグは、以下の記述になります。
|
1 2 3 4 5 6 7 |
<amp-twitter width="375" height="472" layout="responsive" data-tweetid="xxxxxx" > </amp-twitter> |
width、heightを調整するのと、data-tweetidのxxxxxxの箇所に、ご自身のFbのIDを挿入してください。
SNS共有ボタンタグ
SNS共有ボタンのAMP仕様はこちらです。⇒ social share仕様： https://amp.dev/ja/documentation/components/amp-social-share/
AMP対応ページでSNSの共有ボタンタグを使用しましょう。
head内に以下のタグを追加します。
|
1 |
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script> |
基本的には、こちらのJSひとつで下記のSNSが使用できます。
Facebook、LinkedIn、Pinterest、Tumblr、Twitter、WhatsApp、LINE
SNSとは違いますが、メールやSMSも使用できます。また、カスタマイズすればはてなブックマークなどでも使用できます。（後述）
もちろん、同ページ内で複数のボタンを設置しても大丈夫です。
＜Facebookボタン＞
ボタンを挿入したい箇所に、下記のタグを追加します。
|
1 2 3 4 5 6 7 |
<amp-social-share width="75" height="20" type="facebook" data-param-text="共有時に使用したいテキストを入れてください" data-param-url="URLを入れてください"> </amp-social-share> |
data-param-textとdata-param-urlはご自身のサイトに合わせてください。
また、デフォルトだと「f」アイコンが表示されるだけですので、CSSを駆使して「共有する」文言を挿入できます。
|
1 2 3 4 5 6 7 8 9 |
amp-social-share[type="facebook"]{ background-position: left 2px center; } amp-social-share[type="facebook"]::after{ content: "共有する"; font-size: 11px; text-align: center; padding-left: 12px; } |
＜Twitterボタン＞
ボタンを挿入したい箇所に、下記のタグを追加します。
|
1 2 3 4 5 6 7 |
<amp-social-share type="twitter" width="75" height="20" data-param-text="共有時に使用したいテキストを入れてください" data-param-url="URLを入れてください"> </amp-social-share> |
data-param-textとdata-param-urlはご自身のサイトに合わせてください。
こちらもデフォルトだと鳥アイコンが表示されるだけですので、CSSを駆使して「ツイート」文言を挿入できます。
|
1 2 3 4 5 6 7 8 9 |
amp-social-share[type="twitter"]{ background-position: left 2px center; } amp-social-share[type="twitter"]::after{ content: "ツイート"; font-size: 11px; text-align: center; padding-left: 12px; } |
＜はてブボタン＞
さて、はてブボタンはデフォルトでは仕様に無いため、多少カスタマイズが必要になります。
はてブの場合は、下記のタグになります。
|
1 2 3 4 5 6 |
<amp-social-share type="hatena_bookmark" layout="container" data-share-endpoint="http://b.hatena.ne.jp/entry/XXXXXXX"> B! </amp-social-share> |
アイコンが表示されないため、「B!」をタグ内に書き込んで直接表示させています。
typeは「hatena_bookmark」に、data-share-endpointには、はてブのブックマーク発行URLを記載します。XXXXXXXの箇所をご自身のサイトのURLに変えてください。
さらにCSSを記述します。
|
1 2 3 4 5 6 7 8 9 10 11 |
amp-social-share[type="hatena_bookmark"]{ width: 75px; height: 20px; font-family: Verdana; background-color: #00A4DE; font-weight: 700; text-align: center; font-size: 15px; border-radius: 3px; color: #FFF; } |
これで他のボタンと同じように表示することができます。
デフォルト搭載のボタンと異なりアイコンが表示されないので、自分で中身とstyleをこしらえてあげる必要があります。
Google Analytics
AMP対応ページでGoogle Analyticsを使用しましょう。AnalyticsのAMP仕様はこちらです。
⇒ analytics公式仕様 ： https://amp.dev/ja/documentation/components/amp-analytics/
が、公式はちょっと細かすぎて不親切な部分もあるので、ただアクセス解析を取得したいだけであればこれで！というのを紹介します。
まずhead内に以下のタグを追加します。
|
1 |
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> |
そして、以下のタグをbodyの終了タグ直前に記述します。
5行目はご自身のサイトのanalyticsのIDと書き換えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<amp-analytics type="googleanalytics"> <script type="application/json"> { "vars": { "account": "UA-9999999-99" }, "triggers": { "default pageview": { "on": "visible", "request": "pageview", "vars": { "title": "Name of the Article" } } } } </script> </amp-analytics> |
【その3】AMPの仕様に沿っているかチェック
最後に、完了したかなと思ったらAMPテストでエラーがないかチェックします。⇒ AMPテスト： https://search.google.com/test/amp?hl=ja
公開ページでないと検査できないので、Basic認証などかかっていれば外してチェックすると良いと思います。
エラーが出れば、何か記述が間違っていたり、必要な追加JSが読み込めていなかったりするので、都度検索して潰していきます。
この表示になるまで頑張りましょう。まずは既存サイトのTOPページのみAMP対応するなどで、練習してみるのが良いと思います。
YoutubeChannelのご紹介
同様の内容を、動画でご覧になれます。
https://youtu.be/D3VaWiK6SYA
