Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

Organization

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?