AMP ページを作成する

AMP

こんにちは。ましじめの田村です。

AMP対応するケースがありました。確認したページや所感を残しておこうと思います。
ざっくりと次を頭に入れておくと良いかもしれません。

  • 非AMPページとAMPページは別のHTMLとして作成出来る
  • CSSは75kb以下
  • 画像タグがamp-imgに変更されてwidth,heightが必須
  • 原則JavaScriptは使えない

所感

既存のサイトをAMP化するにはどれだけCSSを圧縮出来るかというのが課題になりそうです。
CSSの容量を75kb以下に抑えるのが難しい場合はAMPは別のテンプレートとして装飾を作り直す方が早いかもしれません。

深く追っていけば広告や 動画、スライドショー、制限付きでJavaScriptも使用できますがまずはシンプルに作成することを心がけるのが良いと思います。
また、すでにAMP化されたサイトを数サイトチェックしておけば安心して進めることが出来るかもしれません。

作業内容

実際の作業ですが、基本的には公式ページを見ると対応できそうでした。

最初にチュートリアルを進めて大筋の仕様を確認すると良いと思います。
初めての AMP ページを作成する
AMP HTML 仕様

また構造化データも重要になってきますのでこの辺りも確認すると良さそうです。
AMP が検索結果にどのように表示されるかを理解する
構造化データ
構造化データの仕組みについて

その後こちらのページを見ながら実際にAMPに変更したいサイトをAMP化していくというのが良さそうです。
HTML を AMP に変換する

あとはCSSの容量とエラーを確認しながら進めて行くという形になってくると思います。

以上「AMP ページを作成する」でした。
AMP対応する際に参考にしてみてください。

前の記事 次の記事

ましじめのスキルが必要ですか?

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、
あなたのウェブサイトの制作を強力にサポートすることができます。

ご連絡おまちしています!

10万円からホームページ作成サービス

フレームワークをベースに柔軟なカスタマイズ&低価格で作成します。

サービスを詳しく見たい方へ