AMPについて

AMPについて調べた事をまとめます。

AMPとは

「Googleが推進しているモバイルページを高速に表示させるための手法によって作成されているコンテンツ」

Accelerated Mobile Pages の略
Googleが推進している、モバイルページを高速に表示させるための手法
GoogleとTwitterが共同開発
検索結果にAMPマークがつく

AMPページが高速に表示される理由

・AMP HTML
・AMP JS
・AMP Cache
の3つの要素から構成されている。

AMP Cache について

・AMPページをキャッシュする仕組み
・Googleがキャッシュサーバー（CDN）を提供
・HTTP2などの最新技術に対応
・GoogleのクローラーがAMPページを見つけると、そのAMPページをキャッシュする仕組み

・AMPテンプレートが用意されている
https://amp.dev/documentation/templates/?referrer=ampstart.com

・AMPが正しく設定されているか確認する
https://search.google.com/search-console/not-verified?original_url=/search-console/amp&original_resource_id

AMPに向いているサイト

静的で、複雑なデザインやアニメーションがない
体感から、動作が遅い
モバイル端末からの流入がメイン
回遊が多く、快適性を重視している

AMPに向いていないサイト

複雑なデザインや動きを実装している
すでに速度が速く、快適なユーザー体験を提供できている
AMPに対応していないアフィリエイトプラグラムを利用している
モバイル端末からの流入がほとんどない

AMPページで使えないタグ

base
frame
frameset
object
param
applet
embed
picture

カスタムタグの使用が必要なタグ

img　…amp-imgに置き換えが必要
video　…amp-video に置き換えが必要
audio　…amp-audio に置き換えが必要
iframe　…amp-iframe に置き換えが必要

AMP導入してるサイト

朝日新聞、毎日新聞、産経ニュース、東洋経済
TechCrunch、Gigazine、ClnetJapan、Ameba

Scroll top

AMP コンポーネント

AMP専用のライブラリが用意されており、それを読み込む事で機能を拡張する事ができる。
例えば、iframeはamp-iframeという拡張コンポーネントを読み込む必要がある。

amp-bodymovin-animation

AdobeAfterEffectsによって生成されたjsonからアニメーションをレンダリングする事ができます。

amp-carousel

よくあるカルーセルが作れる。

amp-dynamic-css-classes

このコンポーネントを追加すると、body要素にクラスが追加される。
追加されるクラスはamp-referrer- *
ローカル（https://127.0.0.1:5000 ）で確認したところ、下記クラスが付与されました。

amp-referrer-1
amp-referrer-0-1
amp-referrer-0-0-1
amp-referrer-127-0-0-1

https://amp.dev/ja/documentation/components/amp-dynamic-css-classes/?format=websites

amp-fx-collection

視差効果パララックスを簡単に実装できる。また、フェードインやスライドインなどのスクロールに応じたアニメーションも可能。

HTMLをAMPに変換してみる

1.まず、AMPライブラリを追加する。

headタグ末尾に！

<script async src="https://cdn.ampproject.org/v0.js"></script>

これで認識させる。
コンソール開くと、こんな感じ。

URL末尾に #development=1追加して、AMP検証ツールを有効にする。
そしたら、エラーが色々表示されましたー。

2.文字セットを指定する

headタグ最初の行に！

<meta charset="utf-8" />

3.正規リンクを指定する

2の次の行に！

<link rel="canonical" href="/article.html">

4.AMP属性を指定する

htmlタグに⚡️かampと記述する
⚡️の方がおすすめの方法って、ドキュメントには書いてある……

<html ⚡ lang="en">
or
<html amp lang="en">

5.ビューポートを指定する

width と minimum-scale に指定する値は、AMP で必須の値

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

6.外部スタイルシートを置き換える

AMPでは外部スタイルシートは使用できない！！！styleタグを使え！！
とのことなので、インラインで記述します。

<style amp-custom>

/* The content from base.css */

</style>

7.サードパーティの JavaScript を除外する

JavaScriptはインライン化ではなく、下記のような条件がある

すべての JavaScript を非同期にする必要があります（script タグで async 属性を指定します）。
ページ上の JavaScript は AMP ライブラリ用と AMP コンポーネント用です。

AMPコンポーネント
https://amp.dev/ja/documentation/components/?format=websites

8.AMP CSS ボイラープレートを指定する

すべての AMP ドキュメントには次のような AMP ボイラープレートコードが必要

<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>

9.タグの置き換え

imgタグはamp-imgタグに
width と height も指定する

<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>

これでエラーはなくなる！

ページが検出されるようにする

ampページには正規ページのリンクを貼っているので、

<link rel="canonical" href="/article.html">

正規ページにもampページへのリンクを貼る

<link rel="amphtml" href="/article.amp.html">

構造化データを追加する

AMPページ　headタグ一番最後に追加する

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage":{
   "@type":"WebPage",
   "@id":"https://example.com/my-article.html"
},
"headline": "My First AMP Article",
"image": {
   "@type": "ImageObject",
   "url": "https://example.com/article_thumbnail1.jpg",
   "height": 800,
   "width": 800
},
"datePublished": "2015-02-05T08:00:00+08:00",
"dateModified": "2015-02-05T09:20:00+08:00",
"author": {
   "@type": "Person",
   "name": "John Doe"
},
"publisher": {
   "@type": "Organization",
   "name": "⚡ AMP Times",
   "logo": {
     "@type": "ImageObject",
     "url": "https://example.com/amptimes_logo.jpg",
     "width": 600,
     "height": 60
   }
},
"description": "My first experience in an AMPlified world"
}
</script>

その他メモ ٩( 'ω' )و

これ便利
https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb/related

参考サイト

https://digitalidentity.co.jp/blog/seo/amp/what-is-amp.html
https://www.gc-seo.jp/journal/design/amp/
https://speakerdeck.com/shoyan/ampdebao-su-websaito?slide=21

ページが高速表示されるAMPについて調査