AMP（アンプ）対応のメリット・デメリットとテーマ「LION MEDIA」でのAMP導入方法・主な問題修正【WordPress】

2018-01-14
2018-05-13
WordPress
AMP, LION MEDIA, WordPress, スマホ
5件

WordPress

AMPを導入してみました。

このサイトは「LION MEDIA」という無料テーマを使用して作成しています。

無料とは思えないほどのかっこいいデザインと多くの機能が備えられているのでオススメです。

子テーマも用意されています。2018年1月9日に子テーマの修正があったため、それ以前にダウンロードして使用していた方はfunction.phpを差し替える必要があるのでご注意ください。

関連：子テーマとは？カスタマイズに子テーマを使用すべき理由と使い方

LION MEDIAの機能の中に、1つ気になるものがありました。

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

LION MEDIAデモサイトより

「AMP」って何・・・？

分かりませんでしたが、せっかく備わっている機能なので調べて使ってみることにしました。

知らないことだらけだったので、結構時間がかかり大変でした。（最近記事を更新できていなかったのは、これが原因です・・・。）

頑張った甲斐があって、ほとんどのページをAMP対応ページにすることができました。

せっかくなので、AMPについて調べたことと、LION MEDIAの場合の導入方法・主な問題修正方法をまとめておきます。

1 そもそも「AMP（アンプ）」とは？
2 AMP導入によるメリットとデメリット
- 2.1 AMP対応のメリット
- 2.2 AMP対応のデメリット
3 AMP導入手順（LION MEDIAの場合）
4 AMP対応で起こるエラー箇所の確認と主な原因
- 4.1 エラーを起こしている場所の確認方法
- 4.2 AMPエラーの原因と対策
5 今回のまとめ

そもそも「AMP（アンプ）」とは？

私の場合「AMP」が何なのか、なんと読むのかすら知らなかったので、調べるところからスタートしました。

「AMP」は「アンプ」と読むそうです。えーえむぴー、って思いながら検索してました（笑）

AMPの言葉の意味を調べてみると・・・

AMP(Accelerated Mobile Pages)とはGoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。

SEO HACKSより

難しい感じですが、対応するとスマホなどのモバイル端末でページを開いた時に高速で表示される、という機能のようです。

スマホでページを開こうとすると、数秒、長いと10秒以上表示されないことがあり、私の場合、途中で戻るボタンを押してしまうことがあります。せっかく頑張って作ったページが、表示される前に諦められているとしたらもったいないですね・・・。

これがAMP対応だとものすごく早く表示されます。なんと4倍の速度になるそうです。

Googleも推奨しているようなので・・・

これは導入するしかない！

ということで導入してみました。

スマホで検索してみて、稲妻マークがついているとAMP対応になっているページです。

しかし導入前に知っておかなければならない注意点があります。

AMP導入によるメリットとデメリット

AMPに対応するとどういうメリットがあるのかもう少し詳しく見てみます。

逆にAMPに対応したことによってデメリットもあります。

メリットとデメリットを比較してAMPを導入するかどうかを決めていく必要があります。

AMP対応のメリット

まずはAMPを導入した際に受けられるメリットです。

スマホなどのモバイル端末からの表示速度が4倍！

モバイル端末でページを表示した際、AMP非対応のときと比べ表示速度が4倍になります。

AMP最大の特徴ですね。AMPに対応できたこのサイトのページを読み込んでみると、1秒もかからず一瞬で表示されるほど早くなっていました。

最近ではPCよりもスマホでインターネットを使用している人の方が多くなってきているため、サイトの大きな強みになります。

一説によると、3秒以上読み込みに時間がかかると約40％の人がページを離れてしまうそうです。せっかく頑張って書いた記事が読まれる前に離脱されると残念ですよね・・・。

表示が早ければそれだけ読んでもらえるチャンスが増えるということです。

スマホの検索結果のカルーセルパネルにサイトが表示される可能性！

カルーセルパネルとは、横にスライドして動かせる表示方法のことをいいます。

このようにアイキャッチ写真とサイトのアイコン付きで最初に表示されるため目立ちます。

カルーセルには何種類かジャンルがあります。

時事ネタを扱っているサイトの場合、トップニュースのカルーセルに自分のサイトが表示される可能性があります。

その他にも動画のカルーセル、レシピのカルーセルなどもありますので、自分のサイトで扱った記事に合ったジャンルのカルーセルに表示される可能性が出てきます。

また、サイトの構造化がしっかりとできていれば、自分のサイトだけのカルーセルも持てるそうです。

非常に目立つので、クリックしてもらえる可能性が高まりますね。

SEO対策になり検索結果が上位表示されやすくなるかも！

検索したときにどこから見ていくかというと、大体最初に表示された記事から見ていきますよね。

検索順位はいろいろな要因によって決まりますが、具体的にはあまり明かされていません。

AMP対応が直接SEO対策として有効かどうかは今のところ不明ですが、Googleが推奨していることなので、今後は影響してくるのではないかといわれています。

また、表示速度が早いとユーザビリティ―が向上するため、SEO対策に良いといわれています。

AMP対応にするとモバイル端末での表示速度がかなり上昇するため、間接的にはSEO対策になりますね。

すでにPCでの検索よりスマホでインターネットをすることが主流になってきています。

その流れを考えると、今後はよりモバイル端末への対策がSEOに有効になってくると予想できるため、AMP対応できていると強みにできますね。

この3つだけ見ると早くAMPを導入した方が良さそうに感じます。

しかし、AMP対応にすることで起こるデメリットもあったりします。

AMP対応のデメリット

AMP対応化することにより起こるデメリットがあります。

最初に書いておきますが、このデメリットは「LION MEDIA」などAMP対応のテーマを使用していれば解消できるので、私はAMPを導入することに決めました。

サイトデザインが大きく崩れる可能性がある

せっかくデザインを頑張ったサイトでも、AMP用のデザインがされていないとデフォルトの地味なデザインになってしまいます。

色も見出しもフォントも全部違う・・・

画像サイズもサムネイルのものが大きく表示されたりと変な感じになります。

自分でデザインプログラムができればいいのですが、私のような超初心者には難しいです。

もしサイトのテーマがAMP対応ではないものの場合、AMPを導入するのは少し考えた方が良いかもしれません。

ちなみにAMPページのデザインはパソコン上でも確認することができます。

テーマの機能でAMPを有効化したあと、記事URLの後ろに「?amp=1」を追加するとパソコン上でも確認することができます。

テーマがAMP対応でない場合は、AMPプラグインをインストールして有効化します。同じように記事URLの後ろに「?amp=1」を追加することで先ほどの例の地味なAMPデザインを確認することができます。

記事をPC用とAMP用で分けて管理する必要がある

AMP対応のページにするためには、使用できないHTMLタグが数多くあります。

例えば画像を表す＜img＞タグなどの基本的なタグすら使えません。

WordPressではメディアの追加などを使って画像を挿入したりするので、自分でHTMLを入力する機会がほとんどありません。そのため、自分でAMP用にHTMLを変えてもう1つ記事を作成するのは私のような初心者にはハードルが高いです。

上記2つデメリットがあるため、自分でHTML、CSS、PHPなどのプログラムを書ける人でなければAMP対応の綺麗なページを作成することは難しいです。

しかしこれらの問題は、AMP対応のテーマを使うことで解決できます。

AMP対応のテーマの場合、あらかじめAMP用のデザインが用意されていたり、AMP表示の際だけ自動的に記事内のHTMLタグをAMP用に置換してくれたりするようになっています。

LION MEDIAはAMPページのデザインが通常ページとほとんど同じです。この記事のAMPページを例として置いておきます。

例：この記事のAMPページ

私のような初心者には非常にありがたいのです！

このサイトで使用しているテーマ「LION MEDIA」はAMPに対応しているとのことなので、早速導入してみることにしました。

AMP導入手順（LION MEDIAの場合）

自分でAMP対応のページを作ろうとすると、いろんな知識が必要になります。それが難しい場合は、プラグインを導入することで少し簡単になります。

しかし現在使用中のテーマ「LION MEDIA」はAMP対応のテーマのため、プラグインなしでも簡単にAMP対応のサイトにすることができます。

「LION MEDIA」を使用した場合のAMP対応手順を紹介します。

STEP1：AMPを有効化する

まずはAMPを有効化します。

「外観」の「カスタマイズ」の画面を開きます。

LION MEDIAの場合「AMP設定[LION用]」があるのでクリックします。

ここでAMP機能を有効化できます。また、AMP用のロゴ画像は必ず登録とのことなので、設定しましょう。

ロゴ画像は、検索時にカルーセルパネルに表示されると使用されるものです。

ロゴの作成はPowerPointを使用して行いました。

関連：サイトのアイコンをPowerPointで作成する

これで有効化できました！

STEP2：広告の設定をする

次に広告の設定を行います。通常のページの広告とAMPページの広告は違うため、ちゃんと設定しておかないと表示されなくなる可能性があるため注意が必要です。

「広告設定[LION用]」から設定することができます。

記事上と記事下の2か所に広告を表示させることができます。

私はGoogleアドセンスの広告を表示させることにしました。

通常の広告コードとは異なり、以下のコードを使用します。

<amp-ad
 layout="responsive"
 width=300
 height=250
 type="adsense"
 data-ad-client=<span data-mce-style="background-color: #ffff00;">"ca-pub-1234567891234567"</span>
 data-ad-slot=<span data-mce-style="background-color: #ffff00;">"1234567890"</span>>
 </amp-ad>

<amp-ad

layout="responsive"

width=300

height=250

type="adsense"

data-ad-client=<span style="background-color: #ffff00;" data-mce-style="background-color: #ffff00;">"ca-pub-1234567891234567"</span>

data-ad-slot=<span style="background-color: #ffff00;" data-mce-style="background-color: #ffff00;">"1234567890"</span>>

</amp-ad>

黄色の部分は自分のサイトの広告コードのものに変更する必要があります。

詳しくはこちらのGoogleアドセンスのヘルプページに書いてあります。

ヘルプページにはスクリプトを追加することなども書いてありますが、その辺はLION MEDIAがやってくれますので、単純に上記のコードをAMP用広告のところに貼り付けるだけでOKです。

STEP3：アクセス解析の設定をする

Googleアナリティクスを使用してアクセス解析を行っている場合は、その設定を行います。AMPページは通常のページと分けてアクセス解析を行うことが推奨されています。

「アクセス解析設定[LION用]」をクリックします。

GoogleアナリティクスのトラッキングIDを入力します。

不器用な私はトラッキングIDを探すのに地味に手間取ったので、その方法もメモしておきます。

GoogleアナリティクスのトラッキングID確認方法

まずはアナリティクスの自分のサイトのページにログインします。

Googleアナリティクスのログインページ

左のメニューから歯車の「管理」ボタンをクリックします。

真ん中のプロパティの中の「トラッキング情報」から「トラッキングコード」をクリックします。

ここで自分のサイトのトラッキングコードを確認することができます。

トラッキングIDの追加方法

AMPページのトラッキングIDは、通常のページと別のものを設定することが推奨されています。

プロパティを追加することでトラッキングIDを分けることが可能です。

トラッキングIDを確認した手順と同じところから追加できます。

プロパティのプルダウンメニューをクリックすると、「新しいプロパティを作成」があります。

50個までプロパティを追加できます。私は推奨されている通りAMP用のプロパティを新しく作りました。

トラッキングコードはほぼ同じで、最後のハイフンの後だけ変わっていくみたいです。

STEP4：Google Search Consoleに報告

最後にサイトがAMPに対応したことをGoogle Search Consoleに報告します。GoogleのクローラをAMPページに呼び込み、インデックスしてもらうための作業です。

まずはログインして自分のサイトのダッシュボードを開きます。

Google Search Consoleログインページ

次に左のメニュー「検索出の見え方」から「Accelerated Mobile Pages」をクリックします。

すると以下のようになっているはずなので「AMPを使ってみる」ボタンをクリックします。

これで報告完了です。あとはほうっておくだけで勝手にページがインデックスされていきます。

STEP5：AMP対応が有効かの確認

最後にちゃんとAMP対応が有効なページになっているかを確認しましょう。

以下のテストページに、確認したいURLを入力します。

AMP テスト – Google Search Console

URLを入力する際の注意点です。

トップページではなく記事URLを入力する
- トップページはAMP対応にならないからです。
記事URLの後ろに「?amp=1」を追記する
- 通常ページとAMPページのURLの違いです。
- この記事の場合「https://bukidobi.com/amp/?amp=1」になります。

テスト結果が以下の画像のようになっていればOKです。ちなみに私はならなかったので、現段階でなっていなくても大丈夫です。このあと修正していきます。

以上でAMPの導入は終了です。

数日でインデックスされていくので、少し時間が経ったらSTEP4でも確認したGoogle Search Consoleの「Accelerated Mobile Pages」を確認してみましょう。

グラフが表示されているはずです。

現在このサイトは以下の状況になっています。

青い線がインデックス済みのページ、赤い線が重大な問題があるAMPページです。

AMPを導入直後エラー祭り・・・！

エラーが起こっていても普通のページが検索結果に出るだけなので、焦らなくても大丈夫です。

しかし、せっかくAMP対応させたのにほとんどインデックスされなかったら意味がありません。

頑張って対処してなんとか落ち着けることができましたので、行った対処をまとめておきます。

AMP対応で起こるエラー箇所の確認と主な原因

私の場合いっぱいエラーが起こってしまったので、どこに問題があるのか確認する必要があります。

場所の特定ができたら原因を調べ、修正していきます。

エラーを起こしている場所の確認方法

「AMPタグの無効な用法」というところをクリックすると、エラーを起こしているページとのその原因が確認できます。

すると問題があるページのURLが一覧で確認できるので、ページごとにさらに詳しく見たい場合はそのURLをクリックします。試しにどれでもいいのでクリックしてみると、そのページの詳細が表示されます。

下部の詳細の部分にエラー原因が書いてあるのですが、これだけだとどこが悪いのか分かりにくいです。

ページ内のどこに問題があるか確認するためには「ページをテスト」をクリックします。

するとページの分析が始まり、こうなります。

「次の問題を修正してください」の下を見てみるとエラー箇所と数が表示されているので、クリックすることで記事内のどこに問題があるのか見ることができます。

次は、エラーを起こす主な原因と対策をまとめます。

AMPエラーの原因と対策

私がAMPを導入した際に起こったエラーの原因と、対処をまとめておきます。

先に結論だけまとめておくと、子テーマの「テーマのための関数(functions.php)」に以下の内容を入力することで対処しました。

//AMP判別関数
//今回は、?amp=1パラメーターを使用（環境によっては変更する必要があるかも）
function is_amp(){
     //AMPチェック
     $is_amp = false;
     if ( empty($_GET['amp']) ) {
          return false;
     }

     //ampのパラメーターが1かつ投稿ページの
     //かつsingleページのみ$is_ampをtrueにする
     if(is_single() &&
          $_GET['amp'] === '1'
          ){
          $is_amp = true;
     }
     return $is_amp;
}

//AMP用にコンテンツを変換する
function convert_content_to_amp_sample($the_content){
     if ( !is_amp() ) {
          return $the_content;
     } else {
          //borderタグの削除（A8.netリンク用）
          $the_content = preg_replace('/ border="0"/i', '', $the_content);

          //typeタグとallowfullscreenタグの削除（YouTube用）
          $the_content = preg_replace('/ type=\'text\/html\'/i', '', $the_content);
          $the_content = preg_replace('/ allowfullscreen=\'true\'/i', '', $the_content);

          //オーディオタグをAMP用に置換
          $the_content = preg_replace('/<audio/i', '<amp-audio', $the_content);
          $the_content = preg_replace('/preload="none" /i', '', $the_content);
          $pattern = '/<\/audio>/i';
          $append = '</amp-audio>';
          $the_content = preg_replace($pattern, $append, $the_content);

         return $the_content;
         }
}
add_filter('the_content','convert_content_to_amp_sample', 999999999);//なるべく後で行う

//AMP判別関数

//今回は、?amp=1パラメーターを使用（環境によっては変更する必要があるかも）

function is_amp(){

//AMPチェック

$is_amp = false;

if ( empty($_GET['amp']) ) {

return false;

}

//ampのパラメーターが1かつ投稿ページの

//かつsingleページのみ$is_ampをtrueにする

if(is_single() &&

$_GET['amp'] === '1'

){

$is_amp = true;

}

return $is_amp;

}

//AMP用にコンテンツを変換する

function convert_content_to_amp_sample($the_content){

if ( !is_amp() ) {

return $the_content;

} else {

//borderタグの削除（A8.netリンク用）

$the_content = preg_replace('/ border="0"/i', '', $the_content);

//typeタグとallowfullscreenタグの削除（YouTube用）

$the_content = preg_replace('/ type=\'text\/html\'/i', '', $the_content);

$the_content = preg_replace('/ allowfullscreen=\'true\'/i', '', $the_content);

//オーディオタグをAMP用に置換

$the_content = preg_replace('/<audio/i', '<amp-audio', $the_content);

$the_content = preg_replace('/preload="none" /i', '', $the_content);

$pattern = '/<\/audio>/i';

$append = '</amp-audio>';

$the_content = preg_replace($pattern, $append, $the_content);

return $the_content;

}

add_filter('the_content','convert_content_to_amp_sample', 999999999);//なるべく後で行う

「テーマのための関数(functions.php)」の変更は、念のためバックアップを取ってから行いましょう。

関連：＜プラグイン＞UpdraftPlusでサイトのバックアップを取る

そもそも「テーマのための関数(functions.php)」の入力が初めての方は以下の記事をご覧ください。

それでは、先ほどのphpの内容を順番に見ていきます。もしもこちらの説明で分かりにくい場合や上手くいかない場合は、詳しい人に質問してみましょう。

おすすめの質問サイトはteratail（テラテイル）です。プログラム系に特化した質問サイトで、初心者マークを付けて質問すれば親切に教えてもらえます。知恵袋のように意味のない回答や高圧的な人もいないので安心して使えます。メールアドレスのみで簡単に登録できるのもオススメの理由です。

それでは、起こったエラーの内容とその対処方法を個別に見ていきます。

Amazonアソシエイトの商品広告リンク

一番多かった問題がAmazonアソシエイトの商品広告リンクが原因のものでした。

関連：Amazonアソシエイトの特徴と審査に合格するまでの手順

以下の問題が主なものです。

属性「marginheight」はタグ「amp-iframe」で使用できません。

属性「marginwidth」はタグ「amp-iframe」で使用できません。

この2つが並んでいたら、おそらくAmazonの広告リンクが原因だったのではないでしょうか？

私の場合、これはすべて別の広告に置き換えることで対処しました。ちょっと長くなるので、また別記事にまとめたいと思います。~~（まとめ中なので必要な方はしばしお待ちください）~~

＜追記＞

Amazonの広告を置き換えたのは「もしもアフィリエイト」というASPの広告です。

Amazonと楽天の広告を使うのが楽になるアフィリエイトサイトです。

関連：もしもアフィリエイトの良い点・悪い点と登録手順

どうしてもすぐにエラーをなくしたい方は、Amazonの商品広告を全部削除すれば確実です。

A8.netの広告リンク

A8.netの広告リンクでも問題が起きている場所がありました。

関連：A8.netとは？特徴と登録・審査の手順

関連：アフィリエイト広告をブログ記事に表示する方法（A8.net編）

バナー以外にテキストリンクでも発生します。

以下のエラーメッセージはA8.netがほとんどでした。

属性「border」はタグ「amp-img」で使用できません。

これは先ほどのコードのborderタグの削除（A8.net用）のところで対処しています。

//borderタグの削除（A8.netリンク用）
$the_content = preg_replace('/ border="0"/i', '', $the_content);

1 2	//borderタグの削除（A8.netリンク用） $the_content = preg_replace('/ border="0"/i', '', $the_content);

これでA8.netの広告を貼っているページもAMPエラーがなくなります。

YouTubeの動画の埋め込み

これはまず埋め込み方法を再確認する必要があります。

通常、WordPressで作成した記事に動画を埋め込む際は「埋め込み用コード」を使用します。

関連：記事にYouTubeの動画を埋め込む

しかし、テーマが「LION MEDIA」の場合、埋め込みコードではなく動画のURLをそのまま記述するだけで自動で埋め込みコードへと変換してくれます。まずはこの機能を使用してYouTubeの動画を埋め込んでいるかを確認して、埋め込みコードを使用していた場合には修正する必要があります。

LION MEDIAの正しい方法を使用していたとしても以下のエラーが出るかもしれません。

タグ「amp-iframe」の属性「allowfullscreen」に無効な値「true」が設定されています。

属性「type」はタグ「amp-iframe」で使用できません。

これに対処しているのが以下の部分です。

//typeタグとallowfullscreenタグの削除（YouTube用）
$the_content = preg_replace('/ type=\'text\/html\'/i', '', $the_content);
$the_content = preg_replace('/ allowfullscreen=\'true\'/i', '', $the_content);

//typeタグとallowfullscreenタグの削除（YouTube用）

$the_content = preg_replace('/ type=\'text\/html\'/i', '', $the_content);

$the_content = preg_replace('/ allowfullscreen=\'true\'/i', '', $the_content);

これでYouTubeの動画を埋め込んでいるページのエラーはなくなります。

音声データの埋め込み

記事内で音声データを再生できるようにしている場合もエラーを起こします。

関連：「メディア」を使用して音楽などの音声データを記事に挿入する

こちらは以下のメッセージが表示されているはずです。

タグ「audio」はタグ「noscript」の子孫としてのみ使用できます。「amp-audio」ではありませんか？

指示されたとおりにaudioタグをamp-audioに置換しているのが以下のコードです。

//オーディオタグをAMP用に置換
$the_content = preg_replace('/<audio/i', '<amp-audio', $the_content);
$the_content = preg_replace('/preload="none" /i', '', $the_content);
$pattern = '/<\/audio>/i';
$append = '</amp-audio>';
$the_content = preg_replace($pattern, $append, $the_content);

//オーディオタグをAMP用に置換

$the_content = preg_replace('/<audio/i', '<amp-audio', $the_content);

$the_content = preg_replace('/preload="none" /i', '', $the_content);

$pattern = '/<\/audio>/i';

$append = '</amp-audio>';

$the_content = preg_replace($pattern, $append, $the_content);

こうすると今度はエラー内容が以下のものに変わります。

タグ「amp-audio」には拡張機能 JavaScript の「amp-audio」が含まれている必要があります。

ここで私は止まっています。今もエラーが残っているページがあるのはこれが原因です。

検索しても全然情報がないため、詳しい方がいらっしゃいましたら教えていただけると嬉しいです！

以上の部分を修正することで、AMP対応のページにすることができます。

このサイトは現在、音声データを埋め込んでいるページ以外はAMP対応でインデックスされました。スマホで検索すると稲妻マークが表示されます。

音声データの埋め込みがあるページは、修正が出来次第追記します。

今回のまとめ

スマホなどのモバイル端末で表示速度が4倍になるAMPについてまとめました。

AMPに対応しているテーマを使用することで、デザインやAMP用記事の管理をしなくてもほぼ自動でAMPページを作ってくれます。

AMPを導入したての頃は、多少問題が発生するかもしれませんが、1から自分で導入しようとするよりずっと楽に導入できます。

私に至ってはAMP用のページデザインをどこで変えるのかすら分かってないレベルですが、何とかある程度のエラーは修正できました。

「LION MEDIA」ならAMP用のページデザインがほぼ通常のものと同じでオシャレなので、オススメです。

最近はAMPに対応している無料テーマも増えてきているようです。

使用しているテーマがAMPに対応しているなら、せっかくなので導入してみてはいかがでしょうか？

どうしてもエラーが直らない場合や、うまくいかない点がある場合はteratail（テラテイル）で質問してみましょう。あっさり解決できることもありますよ。

ここまでお読みいただき、ありがとうございました。

関連：知識ゼロから自分のサイトに広告を表示する手順まとめ

いちばんやさしい SEO 入門教室

posted with ヨメレバ

ふくだたみこ,株式会社グリーゼソーテック社 2017-12-21