LION BLOG Ver2.0.0を公開!【子テーマのCSSで見出しを上書きしている方へ注意事項あり】

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

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ページを表示することができます。

このページの場合

通常ページ:http://lionblog.fit-jp.com/no_plug_amp/‎
AMPページ:http://lionblog.fit-jp.com/no_plug_amp/‎?amp=1

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を必ず選択してください。

今より満足できるサイトを作りませんか?

CTA-IMAGE FITでは、誰もが良質なコンテンツをインターネット上に公開できるようにWordPress用無料テーマ「LION」を提供しています。 LIONテーマを使えば、SEO対策はもちろん、ユーザビリティに強化された美しいデザインのWEBサイトを作ることができます。

広告収益や売上に結びつけるためのマーケティング動線が強化されたLIONテーマを利用して、あなたのビジネスにお役立てください。