LoginSignup
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@szaizenin株式会社LIG

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

Last updated at Posted at 2020-05-25

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

amp-fx-collection

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

HTMLをAMPに変換してみる

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

headタグ末尾に！

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

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

image.png

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

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?