とうとう「AMPお願いします」って言われてしまった……
スマホでニュースを検索すれば、知らず知らずのうちに導かれているAMP対応ページ。
SEO的な魅力もあって、やりたいクライアントさん、売りたい営業さんが増えてきています。
でも、ぶっちゃけ「AMP」って結局何？どこまでできるの？ってわからないまま……。
AMPはじめる前に読んでおきたい記事5選！
ということで、AMP対応を始める前に一通り読んでおきたいあれこれをまとめました。
Googleが推進する「AMP」と「AMP HTML」概要
http://knowledge.sakura.ad.jp/knowledge/7443/
さくらのナレッジより、エンジニア向けにAMPとは何かから、AMPの作り方の基本までまとまっています。
とりあえずこれを見てAMP HTMLをつくってみましょう。
AMPは使用できるHTMLを制限するとともに、JavaScriptによる動的な表示を制限することで表示を高速化する技術で、次の3つの要素から構成される。
- 表示の高速化のためにHTMLに制約を加えた「AMP HTML」
- 高速にコンテンツのロードを行うためのJavaScriptコード「AMP JS」
- コンテンツのキャッシュ配信を行う「Google AMP Cache」
AMPはあくまでHTMLやJavaScriptに制約を加えただけのものであるため、AMP対応ページは一般的なWebサーバーで配信でき、またそのページはWebブラウザでそのまま閲覧できる。
（中略）
もちろん、AMP非対応のページを作らず、AMP対応ページのみを提供することも可能だ。テキストや画像が中心で動的な表示を利用しないようなシンプルなWebサイトであれば、このやり方のほうがAMP対応が容易かもしれない。
レスポンシブな AMP ページを作成する
https://www.ampproject.org/ja/docs/guides/responsive_amp
こちらは公式ドキュメント。
つくるなら公式ドキュメントを読んでおくのが一番。
中でも気になる、レスポンシブ対応について書かれているのがこのページ。
AMP でレスポンシブな要素を作成するのはとても簡単です。要素に
layout=responsiveを指定します。
簡単です。
AMP対応するためのCSSを書いててエラーが出たので原因と解決方法をまとめました
https://www.imamura.biz/blog/24967
既存のページのAMP化では特にキモとなりそうな部分。
「<style amp-custom></style>」内に書けるCSSは50,000Bytes(バイト)＝50KB(キロバイト)までなんですね。
など、いつものcssならできることが、できません。
AMP対応するまでに失敗したこと
http://ichiy.hatenablog.com/entry/2016/10/05/182753
こちらも、頭のスミにそっと置いておきたい情報。
ちゃんとしたバリデーションは下記の2つのツールを使って検証する必要があります。
https://validator.ampproject.org/
構造化データ テストツール前者はAMP記法として正しいかをチェックしてくれます。
後者は構造化データが正しいかをチェックしてくれます。
AMP Start、レスポンシブウェブデザインのAMPサイトを簡単に構築できるテンプレートを公開
https://www.suzukikenichi.com/blog/get-started-with-amp-by-amp-start/
AMPのことがなんとなく分かったあなたは、無理に1から10までコーディングする必要もないかもしれませんね。
テンプレートを使ってしまいましょう……！
AMP プロジェクトは、AMP HTML で構成したウェブサイトを簡単に作成するためのテンプレートの提供を始めました。
AMP Start という名称のサイトで公開しています。
れっつらAMP！
もはやモバイルフレンドリー対応が標準の現在ですが、近い将来サイトのAMP化もあたりまえ、という時代がやってきそうですね。
そのまえに、ためしてみよう！れっつらAMP！
コメント