AMPについて勉強してみた

amp-header

AMPってなに

Accelerated Mobile Pagesの略。2016年2月24日からGoogleの検索結果に導入されました。
モバイル環境でのページ表示を高速化しよう!!っていうプロジェクト。


AMP対応すると…

モバイルでのGoogle検索結果ページの上部に、カルーセル形式で表示されるようになります。
これこれ。
amp


検索順位に関わるの!?

実は、今のところ検索順位には影響はないと言われています。
ただただモバイルで見やすくするため、高速化するためだけなのです…。

じゃあ対応しなくてよくない?
ねえ?今のままでよくない?

でも、考えてみてください。
レスポンシブデザインが出てきた頃のことを…

別にやらなくてよくない?って思ってたレスポンシブ化。。
今となっては、やるのが当たり前になってません?

Googleの方針ってすぐに、コロコロ、ポンポン、変わるんだよねぇ。
時代の変化についていこうぜ。


対応する時の注意点

AMP対応する時のHTML記述にて、制約条件がいくつかあります。

◆記述必須項目

  • viewportの指定
  • canonical属性の指定
  • boilerplateの記述
  • AMPライブラリの読み込み
  • amphtml属性でAMPページへ誘導
  • imgタグ→amp-img(width,height必須)などの置き換え

◆禁止事項

  • AMPライブラリ以外のJavascriptの使用禁止
  • formタグの使用禁止
  • CSSの読み込み禁止(直書き)
  • インラインでのstyleの指定禁止
  • CSSでの!importantの使用禁止

まとめ

今年に入って始まったばかりなのですが、ネット上には既に情報がたくさん。
時代の変化についていくために、少しずつAMP対応をしていかないといけないなと思いました(まだやってない)。

また、導入した時は記事書きます…

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です