AMP 対応「プラグインなしで実現できる多機能な AMP」

LION BLOGではカスタマイズからAMP機能を有効化するだけで簡単に AMP に対応することができます。

LION BLOG の AMP の特徴

1. AMP機能をカスタマイズから簡単に有効化できます。
2. オリジナルのページと AMP のページの見た目がほぼ同じです。
3. AMPページ用広告登録枠があります。
4. AMP 用のAnalyticsコードを登録できます。
5. https通信サイトではAMPページでもサイト内検索ボックスを表示できます。
6. 投稿本文をAMPに対応するために自動的に置き換え・削除を行います。
   1. Twitterをamp-twitterに置換
   2. Instagramをamp-instagramに置換
   3. YouTubeをamp-youtubeに置換
   4. iframeをamp-iframeに置換
   5. imgをamp-imgに置換
   6. scriptを削除
   7. style属性を削除
   8. onclick属性を削除
   9. fontタグを削除
7. AMP用のロゴ画像を登録できます。

Twitter、Instagram、YouTubeをページに埋め込む場合は、埋め込みたいページのURLを、そのまま投稿本文に入力してください。URLをただ入力するだけで、自動的に通常ページとAMPページ用にコンテンツが埋め込まれます。

○：https://www.youtube.com/watch?v=_8ksOgWYleA
×：<iframe width="560" height="315" src="https://www.youtube.com/embed/_8ksOgWYleA" frameborder="0" allowfullscreen></iframe>

また、投稿ページの本文入力エリアの下にある、【AMPページ用scriptの選択】から、該当のscriptを選択してください。
※YouTubeを読み込んだならYouTubeにチェック

AMP の有効化と無効化

画像のように、カスタマイズから機能を有効化するだけで、簡単にAMPに対応したページを作成することができます。

AMPページの確認

LION BLOGでは、AMP機能を有効化している場合、通常の投稿ページのURLの後に「?amp=1」と入力することで、AMPページを表示することができます。

このページの場合

AMPページがきちんと対応できているかチェックするツール

投稿ページが、きちんと AMP に対応できてるかどうかは、Googleが提供しているAMP テストツールで確認してください。
Google Console AMP テスト

注意事項

LION BLOGのAMP機能は、できるだけエラーが起こらないように、一部機能が利用できません。利用することができない主な機能は以下の通りです。

1. ウィジェットのすべて(サイドバーが使えません)
2. コメント欄(今後、改善予定)
3. WPプラグイン(wp_headとwp_footerを読み込んでいません)
4. imgタグを<amp-img>と記述する必要はありません。
5. 外部コンテンツを埋め込む場合はAMPページ用scriptを必ず選択してください。