SEO対策としてAMP対応の必要性
スマホを使って調べ物をしている時にタイトルの横にカミナリマーク（⚡️）のついた検索結果をご覧になった方はおられるでしょうか？
これはAMPという独自のHTMLを使って作られたページを表しています。
目次
AMPについて
このカミナリマークのついたページはAMPというGoogleとTwitterが共同で開発し、Googleが推奨しているスマホ用に高速でページを表示するHTMLで書かれたページを示しています。
AMPで書かれたページをご覧になったことがある方はお分かりだと思いますが、ページの装飾がとてもシンプルなものになっていたと思います。
これは高速でページを表示するためにAMP用のHTMLで扱えるCSSのサイズが50kbと非常に少なく、無駄な装飾にCSSを割けないという制限から来ています。
さらにjavascriptに関しても非同期のもののみ許可されています。
AMP用のHTMLは通常のHTML宣言とは異なりカミナリマーク付きの宣言文を使います。
こっちではなく
<!doctype html>
<html lang="ja">こっち
<!doctype html>
<html ⚡ lang="ja">またAMP用のHTMLでは通常のHTMLタグとは別のAMP専用のタグが用意されていて画像やiframeはそちらのタグを使わなければいけません。
- img → amp-img
- iframe → amp-iframe
- etc…
このように高速で表示するための厳しい制限を守り作られたAMP用のページを用意することで対応が可能です。
この記事のAMPページだと表示はこんな感じです。
https://m-ww.jp/2019/11/10/wordpress-amp/?amp=1
AMP対応するメリットについて
このAMPに対応することでどんなメリットがあるのでしょうか？
まとめるとこのような利点だと思います。
- モバイル端末でのページの表示速度が大幅に改善される。
- 検索結果に専用の表示枠が用意されておりそこに表示されることがある。
これにより表示された場合アクセス数が大幅に増える可能性がある。 - データの転送量が大幅に抑えられる。転送量に制限があるサーバだと非常にありがたい。
逆にデメリットは
AMPを実装することのデメリットを考えると以下のようなものがあげられると思います。
- デザインが変わる
- 実装が面倒臭い。
当事務所のポートフォリオサイトはかなりシンプルなデザインで作ってあるので、そこまでデザインは変わりませんが、もっとコテコテしたデザインだとAMPページのシンプルなデザインは許せないかもしれません。
まとめ
まとめると、
実装を制作会社に投げる場合は、実装の手間はありませんので無視しますが、表示速度と検索エンジンの検索結果の優遇をとるか、デザインをとるかの選択だと思います。