『LION MEDIA』カスタマイズ【AMP設定】の使い方：初心者向け

最終更新日：2018.05.29

WordPressの無料テーマ『LION MEDIA』について解説しているページです。

今回のテーマは、カスタマイズ【AMP設定】の使い方をです。

ここでは、AMPの機能を有効にするのかどうか、有効化した場合に表示するロゴの設定を行います。

AMPの概要

【AMP設定】にも説明が記載されていますが、AMPとは、「Accelerated Mobile Pages」の略で、そのまま日本語に訳すと「加速されたモバイルページ」になります。

GoogleとTwitterで共同開発されているモバイル端末でウェブページを高速表示するためのフレームワーク（AMP HTML）のことを意味します。

スマートフォンとタブレットが普及し、パソコンよりもモバイル端末から検索する機会が多くなっています。検索し、探しているコンテンツが見つかっても、表示速度が遅ければユーザーは閲覧をやめてしまいます。そのために高速なサイト表示が求められています。

ある調査では、ページの読み込みに 3 秒以上かかると、40％ のユーザーがそれ以上の閲覧をやめてしまうことがわかっています。これは、コンテンツ提供者にとっては、広告や定期購読による収益化の機会を失うことも意味します。

Googleウェブマスター向け公式ブログ

AMP機能の有効化

AMP機能を使いたいという方は、この設定で有効化にします。（デフォルトは無効）

「有効化効化した場合、投稿ページのURLの後ろに「?amp=1」と入力すると、AMP用ページが表示されます」と書かれていたのでやってみました。

PCで表示させたので、スマホ用のイメージはブラウザーを小さくして表示してみました。

AMPを有効化してみてわかったこと

・サイドバーの表示がなくなる。（スマホ対応だからね）

・ウィジェットで記事上に貼っていた広告が、AMP用に設定した広告に置き換わった。（そりゃ当然だよね。AMP用に設定しているから）

パーマリンク設定に「基本」を選択している場合は、投稿ページのURLの後ろに「&amp=1」と入力すると、同じようにAMP用ページが表示されるそうです。

AMPに対応しているページ

AMPに対応しているページは、検索結果に表示されたときに、赤い線で囲んでいるマークが表示されます。

有効化によるエラー

「AMPを適用させるには、AMPが定める厳格なマークアップルールに従う必要があります。記述に誤りがあると機能を有効化してもページによってはエラーとなる可能性があります」と記載があります。

エラーとなった場合、Search Console（サーチコンソール）を利用していればエラーメッセージが送られてきます。

上の画像を例にとると、エラーの内容は２つ。

・許可されていない属性がAMPタグ「amp-img」にあります。

・必須属性「height」タグ「amp-img」にありません。

これについて修正しないと検索結果に影響するよっていう内容です。

私もあんまり理解できていないので、こういうエラーが出るたびに悪戦苦闘しています。エラーが出るたびに修正をしないダメなので、初心者のかたは、まだ有効化しなくてもいいと思います。修正に時間が取られます（こはる：経験済み）。

AMP用ロゴ画像の設定

AMP機能を有効にした際に使用するサイトのロゴ画像の設定（必須項目）を行います。

縦60×600px以内で制作した画像を用意する必要があります。

画像の選択をクリックすると、メディアファイルが開くので画像をアップロードして設定しましょう。

以上で、カスタマイズ【AMP設定】の解説は終わりです。お疲れさまでした。

私のレベルではまだまだ難しい・・・・。もう少し勉強します。

次のテーマは、『LION MEDIA』カスタマイズ【SEO設定】の使い方です。