1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JekyllでAMP対応ページを出力する

Last updated at Posted at 2019-06-01

1. サイト本体をAMP対応させる

Amplifyという専用テーマがあります。
これを元にデザインをカスタマイズしても良いし、AMP StartAMP Templatesで配布されているテーマをJekyll用に改造しても良い。

だたしこの方法は、スクリプトなどを多用しているサイトには不向きです。
サイト全体をモバイルファーストにして、複雑なギミックなどはすべて捨てる覚悟が必要。

2. サイト本体とは別にAMPページを出力する

私は本体のデザインが捨てがたかったので此方を採用。
この場合は、amp-jekyllというプラグインを導入します。gemでインストールすることもできます。

これは指定したフォルダにAMP対応ページを別途出力してくれるプラグインです。
URL構造は通常ページのに指定したディレクトリ名が付きます。(WordPressのAMPプラグインだと最後にディレクトリやクエリがつくので逆です。)

付属のAMPページ用テンプレートはカスタマイズ前提なのでご注意ください。
先のセクションで紹介したテンプレートサイトから好きなのを持ってきてJekyllのレイアウトファイルにしてしまうのが簡単だと思います。

AMPが正しく動くかチェック

AMPは一つでもエラーがあるとGoogleがキャッシュしてくれず、検索結果には表示されません。(通常ページが表示されます。)
生成後は必ずAMPBenchでエラーがないかチェックしましょう。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?