AMP導入とそのメモ
うちのサイトは昔ながらにテキストエディタと自作スクリプトで作成してるのですが、今回、ブログの一部をAMP対応してみたので導入方法を簡単にメモしておきます。気が向いたら、もう少し適用範囲を増やしていくかも。まあ、うちのサイトだと、手間がかかるだけでメリット少ないんだけど。
AMPの概要
AMPとはGoogleが推進しているWebページを高速で表示するための規格もしくはプロジェクトのことです。メリット、デメリットをまとめると以下の通り。
- メリット
- ページの表示が速くなる
- AMP提供の高速なライブラリが使える
- デメリット
- 自作のJavaScriptが使えない
- 登録された広告以外は使えない
- 規格が変更された場合に追従する必要がある
ま、Webページの表示が遅いのはだいたい無駄なJavaScriptと広告のせいなので、それらを禁止する代わりに一般のWebページを作るのに必要なライブラリはプロジェクトのほうから提供してもらえる、というのがAMPのミソ。「AMPに対応すると4倍速くなる」と言われてたりするんですが、広告を多用してないとそもそもそんなに遅くならないわけで、世の中のWebページはどんだけ広告貼りまくってるんだよ、って話です。うちのサイトは広告貼ってないので、AMP対応の前後でほとんど体感変わんねー。
AMPの導入
AMPを導入する方法は、ざっくり以下のような感じです。ぐぐると「AMP用のページを作りましょう」みたいなことを書いてる記述も多いのだけど、既存ページの修正でO.K.です。PCとスマホで表示を変える「レスポンシブWebデザイン」も普通に使えます。業者だと広告非対応が致命的なんでしょうけど、言うほど制限は多くありません。
- <html><head>をAMPのお約束の内容に変更
- 外部ファイルのcssを<head>にコピーして、インラインcssを削除
- 構造化データを追加
- JavaScriptはphpなどを使って代替
- 画像、ソーシャルボタン、Googleアナリティクスなどは、AMPのコンポーネントに変更
■ 構造化データ
ちょっ、imageデータのサイズ仕様が、横幅1200px以上ってどういうことーーーっっっ!! モバイル向けの仕様なのにありえないと思うんですけど。……うちはだいたいAmazonの画像データを使ってるんですが、Amazonだと1200px以上あるのってそんなにあるわけじゃないんですよね。画像データを登録してる出版社によって違うんですが。
まあ、構造化データ自体は、AMP対応に必須でないのでいいのですが。
■ AMPコンポーネント
ソーシャルボタン、Googleアナリティクスはコピペでいいんですが、画像対応がメンドイです。基本的には、imgタグをamp-imgに変更すればいいんですが、特に画像サイズについては、AMPのほうで補正されるようでなかなか思い通りにいきません。
- width/heightは必須。cssでの上書きはやらないほうがいい
- サイズを可変にしたいときは親要素で調整したほうがいい
- </amp-img>はちゃんとつける
というあたりはちょっと気を付けました。
AMPコンポーネントとしては、他にも、YouTubeやTweetの引用をサポートしたものもあるので、調べるといろいろできそうです。
参考になるサイト
最後に参考になるサイトのリンクを並べておきます。
- AMP（Accelerated Mobile Pages）の基礎知識から対応・導入方法まで！まとめ - ウェブ企画ラボ
- AMPのタグリファレンス
- 構造化データ テストツール
- AMP テスト - Google Search Console
[ 2018.11.10 ]