Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AMP 完全に理解した

bakunyo
September 22, 2018

AMP 完全に理解した

bakunyo

September 22, 2018
Tweet

More Decks by bakunyo

Other Decks in Technology

Transcript

  1. AMP って何 • Accelerated Mobile Pages の略 • Google が中⼼となって進めているオープンソースプロジェクト

    • モバイル環境でも快適・⾼速にウェブサイトを閲覧できるよう にするための仕組み ←モバイルのGoogle検索結果 でこのマークがついてるページは AMP対応済
  2. AMP JS • AMP HTML で利⽤が許された JS の外部リソース • async

    で読み込むため、レンダリングブロックしない • 後ほどいくつか紹介
  3. AMP 概要 おさらい • AMP HTML • パフォーマンスのために制限が課せられたHTML • AMP

    JS • AMP HTML で使える JS 外部リソース • AMP Cache • AMP ⽤コンテンツ配信ネットワーク
  4. AMP JS を使った実装( amp-img の例) 1. タグ毎に必要な JS ライブラリを head

    で async 読み込み <script async src="https://cdn.ampproject.org/v0.js"></script> 2. AMP 固有タグを使う <amp-img {src, alt, layout などのタグ毎に必要な属性}></amp-img> 3. 基本的にこれだけ ゆとりに優しい仕様
  5. Google 検索結果 → AMP ⽤ページ www.google.jp/amp/s/{ドメイン} にて配信される
 (⽶ Google では

    .com) CDNから配信されていることを⽰すヘッダー をクリックするとキャッシュ元ページへ 遷移する 【メタタグ関連】
 ・robots = noindex
 ・canonical はキャッシュ元ページ
  6. 中⾝は iframe Google も Yahoo も、同じURLを 参照
 
 最新巻-jp.cdn.ampproject.org
 


    というサブドメインが切られている Google AMP Cache ドキュメント https://developers.google.com/amp/cache/
 
 にサブドメインのルールについて記載がある
  7. イベント • AMP Contributor Summit • https://events.withgoogle.com/amp-contributor-summit/ • 2018/09/25-26 @Google

    in Mountain View, California • AMP Roadshow • https://www.ampproject.org/amp-roadshow/ • 来⽉、インドの3都市にて開催
  8. Bing 9⽉19⽇にアナウンス
 Introducing Bing AMP viewer and Bing AMP cache


    https://blogs.bing.com/Webmaster-Blog/September-2018/Introducing- Bing-AMP-viewer-and-Bing-AMP-cache ※⼿元では確認できず
  9. APPENDIX • 公式サイト • https://www.ampproject.org/ • AMP by Example •

    https://ampbyexample.com • GitHub • https://github.com/ampproject • Google AMP Cache ドキュメント • https://developers.google.com/amp/cache/ • Yahoo!検索ヘルプ AMP対応ページ表⽰について • https://www.yahoo-help.jp/app/answers/detail/p/595/a_id/138177/~/ amp%E5%AF%BE%E5%BF%9C%E3%83%9A%E3%83%BC%E3%82%B8%E8%A1%A8%E7%A4%BA%E3 %81%AB%E3%81%A4%E3%81%84%E3%81%A6