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

# 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
https://amp.dev/documentation/examples/visual-effects/scroll_to_top/?format=websites


## AMP コンポーネント

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

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

https://amp.dev/ja/documentation/components/amp-bodymovin-animation/?format=websites


### amp-carousel

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

https://amp.dev/ja/documentation/components/amp-carousel/?format=websites


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

https://amp.dev/documentation/examples/components/amp-fx-collection/?format=websites


# HTMLをAMPに変換してみる
https://amp.dev/ja/documentation/guides-and-tutorials/start/converting/?format=websites

### 1.まず、AMPライブラリを追加する。
headタグ末尾に！

```html:
<script async src="https://cdn.ampproject.org/v0.js"></script>
```
これで認識させる。
コンソール開くと、こんな感じ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240803/e0c27cbc-0087-d720-cb65-c14280af007d.png)

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

### 2.文字セットを指定する
headタグ最初の行に！

```html:
<meta charset="utf-8" />
```

### 3.正規リンクを指定する
2の次の行に！

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

### 4.AMP属性を指定する
htmlタグに⚡️かampと記述する
⚡️の方がおすすめの方法って、ドキュメントには書いてある……

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

### 5.ビューポートを指定する
width と minimum-scale に指定する値は、AMP で必須の値

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

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

```html:
<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 ボイラープレート コードが必要

```html:
<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 も指定する

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

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

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

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

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

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

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

### 構造化データを追加する
AMPページ　headタグ一番最後に追加する

```html:
<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