Posted at

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


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

Amplifyという専用テーマがあります。


これを元にデザインをカスタマイズしても良いし、AMP StartAMP Templatesで配布されているテーマをJekyll用に改造しても良い。

だたしこの方法は、スクリプトなどを多用しているサイトには不向きです。


サイト全体をモバイルファーストにして、複雑なギミックなどはすべて捨てる覚悟が必要。


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

私は本体のデザインが捨てがたかったので此方を採用。


この場合は、amp-jekyllというプラグインを導入します。gemでインストールすることもできます。

これは指定したフォルダにAMP対応ページを別途出力してくれるプラグインです。


URL構造は通常ページのに指定したディレクトリ名が付きます。(WordPressのAMPプラグインだと最後にディレクトリやクエリがつくので逆です。)

付属のAMPページ用テンプレートはカスタマイズ前提なのでご注意ください。


先のセクションで紹介したテンプレートサイトから好きなのを持ってきてJekyllのレイアウトファイルにしてしまうのが簡単だと思います。


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

AMPは一つでもエラーがあるとGoogleがキャッシュしてくれず、検索結果には表示されません。(通常ページが表示されます。)


生成後は必ずAMPBenchでエラーがないかチェックしましょう。