【プレミアム】AMPは効果があるのか?実際の事例と導入方法は?(4) FavoriteLoadingあとで読む

: 事務局
AMP導入について迷っている人へ。AMPについての導入基準をお伝えしています。4回目はWordPressでのAMP導入についてまとめています。

AMP

画像:Pixabay

目次

WordPressを用いたAMP導入

WordPressなどのCMSを使っている人は、AMP用のテンプレートを自作するとサイト全体のAMP対応が素早く完了します。

テンプレートを自作できない人も、WordPressにはAMP対応のプラグインが存在しています。AMP対応プラグインを導入すると、全ページのAMP対応ページが自動で作成されますので、このプラグインでAMP対応しているサイトも多いです。

しかし本連載でさんざんお伝えしていますが、サイト全体のAMP化は危険でもあります。
なぜならAMPページにすると、仮にアクセスが増えたとしても、ページが簡素化するため一般的に成約率は落ちるからです。

AMP対応プラグインで作成されるページは、初期状態ではとても簡素なため、より成約率が落ちやすいです。
したがって、AMPページからどれだけ成約率を高められるか、つまり、AMP対応プラグインを使っていかにカスタマイズできるかはとても重要です。

プラグインを導入するならカスタマイズは必須

WordPressプラグインのカスタマイズにはPHPの知識が必要なため、もしPHPの知識がないという人は、プラグインを使ったAMP化にはより慎重になってください。
以下、カスタマイズを行う前提でWordPressのAMPプラグインでAMP導入する手順をお伝えします。

AMPプラグインの導入

WordPressには「AMPプラグイン」という名のプラグインがあります。WordPressを生み出したAutomattic社が開発したものです。

▼AMP — WordPress Plugins
ja.wordpress.org/plugins/amp/

AMPプラグインの使い方

AMPプラグインをインストールして有効化します。

次に[設定]―[パーマリンク設定]へ進んで、[変更を保存]ボタンを押します。すると以下のような状態になります。

  • 投稿ページのURL/amp/の配下にAMPファイルが作成される。
    • ※固定ページやアーカイブページ、カスタムポストタイプなどは対象外
  • 非常にシンプルなAMPページレイアウトが作成される。構造化データもJSON-LDで実装済み。
  • ショートコードにも対応済み(js部分は除く)
  • 既存ページからAMPページへのリンクが張られGoogleインデックス可能な状態となる。

つまりAMPページの最低限としては対応完了という状態になります。
しかしお伝えしたように以下の部分は未対応なので、そのままAMPプラグインのテンプレートを使っただけではおそらく成約率は落ちます。

  • アナリティクスタグの挿入
  • 構造化データの最適化(サイトロゴを登録していないとエラーなど)
  • OGP, Twitterカードの挿入
  • ソーシャルシェアボタンの挿入
  • 記事下に適切な誘導リンク(メニュー)
  • 広告の挿入
  • レイアウト・cssの修正

なお、この中でも特に重要なのが下記2つだと思います。

  • アナリティクスタグの挿入
  • 広告の挿入

これらの対応に関しては、鈴木謙一さんのブログにWordpressを即時AMP対応させる3つのプラグインが紹介されています。

▼WordPressブログをプラグインを使って30分でAMP化する方法 -海外SEO情報ブログ
www.suzukikenichi.com/blog/how-to-make-your-wordpress-blog-amp-ready/

しかしAMPプラグインの対応は日進月歩で、導入してもうまくアクセス解析できないということもあるので、プラグインに頼るのは極力避けたほうが無難です。

もしプラグインを頼ったときに表示されるAMPページで、エラーに対応できない場合には「AMP化したことでむしろ成約率は落ちる可能性がある」と考えておいた方がよいです。
実際にすべてのプラグインを試してみたところ、Facebook Instant Articles & Google AMP Pages by PageFrogは稼働が不安定で危険だと思います。

したがって、あまり簡単な内容は鵜呑みにせず、ぜひ下記の手法で自力でカスタマイズに挑戦しましょう。

AMPプラグインのテンプレートカスタマイズ方法

AMPプラグインを初期状態で導入すると、すぐにAMP対応テンプレートが作成され既存サイトとのヒモ付もされます。

AMPページのURLは、既存投稿URLのお尻に/amp/をつけたものになります。
例) /service/myservice/というページの場合、AMPページは/service/myservice/amp/になります。

テンプレートのカスタマイズ方法

AMPプラグインをインストールすると、プラグインフォルダの中にAMP用のテンプレートファイルが作成されます。

しかしそのテンプレートファイルを直接カスタマイズすると、AMPプラグインをバージョンアップしたときにテンプレートファイルが上書きされてしまい、また1からカスタマイズをやり直さなくてはいけません。
この問題を避けるために、オリジナルをコピーして修正していく方法を使います。

これは、以下に説明する若干トリッキーな方法を使って実現します。(既に子テーマを使っている人は3から開始してください)

  1. 既存テンプレートの子テーマ(*)を作成する
  2. 既存テンプレートで子テーマ(*)を有効化する
  3. 子テーマの中にfunction.phpを用意する
    ※6の手順でこのfunction.phpを活用し、これから用意するファイルをWordPressに認識させます。
  4. 子テーマの中にampという名前のフォルダを作成する
  5. 作成したampフォルダの中に、プラグインフォルダの中にある修正したいファイルをコピーしてくる
  6. 3で用意したfunction.phpに、読み込むファイルを入れる

1.既存テンプレートの子テーマ(*)を作成する〜3.子テーマの中にfunction.phpを用意する

(*)子テーマとは?1〜3の進め方

子テーマとは、AMPに関係のないWordPress自体の機能です。
現在適用している親テーマの一部だけを変えたいときなどに重宝する機能です。

子テーマを作成するには、以下3つの作業が必要です。
上記手順の1.子テーマの作成、2.子テーマの有功化の作業になります。

  • wp-content/theme/ディレクトリの中に子テーマ名のフォルダを作成する
    例)/wp-content/theme/mychiledtheme/
  • 上記で作ったフォルダの中にstyle.cssとfunction.phpを作成する
  • style.cssの中に下記を記載する
    /*
    Template:親のテーマ名
    Theme Name:今回の子テーマ名
    Theme URI:任意のURI
    Description:任意の説明
    Author:任意
    Version:任意
    */

上記を作成してアップロードすると、管理画面の外観→テーマから作成した子テーマが選べますので有効可します。

4.子テーマの中にampという名前のフォルダを作成する

先ほど作成した子テーマフォルダの中に、ampというフォルダを作成しましょう。

5.作成したampフォルダの中に、プラグインフォルダの中にある修正したいファイルをコピーしてくる

4で作成したampフォルダの中に、ampプラグインフォルダの中にあるテンプレートファイル(plugins/amp/templates/)をコピーしてきます。これは、修正したいテンプレートファイルだけで良いです(singleやfooterなど)。

6.3で用意したfunction.phpに、読み込むファイルを入れる

3で用意した子テーマの中のfunction.phpをカスタマイズしていきます。

function.phpの書き方

下記のように記載します。内容は、変更したいテンプレートファイルを子テーマから1つずつ持ってきて親テーマを置き換えています。


<?php
//記事ページの変更
add_filter( 'amp_post_template_file', 'single_amp_set_custom_template', 10, 3 );
function single_amp_set_custom_template( $file, $type, $post ) {
if ( 'single' === $type ) {
$file = dirname( __FILE__ ) . '/amp/single.php';
}
return $file;
}
//フッターの変更
add_filter( 'amp_post_template_file', 'footer_amp_set_custom_template', 10, 3 );
function footer_amp_set_custom_template( $file, $type, $post ) {
if ( 'footer' === $type ) {
$file = dirname( __FILE__ ) . '/amp/footer.php';
}
return $file;
}
//cssの変更
add_filter( 'amp_post_template_file', 'css_amp_set_custom_template', 10, 3 );
function css_amp_set_custom_template( $file, $type, $post ) {
if ( 'style' === $type ) {
$file = dirname( __FILE__ ) . '/amp/style.php';
}
return $file;
}

子テーマでカスタマイズしたいところ

footerからワードプレスなどを抜く
AMPプラグインは初期状態ではフッターに「Powered by WordPress」と入っています。こちらはフッターのカスタマイズで変更可能です。
サイトロゴをテンプレートに登録する
AMPプラグインで作成されたテンプレートをAMPテストツールにかけてみると、ロゴ関連の構造化データのエラーがでることがあります。その場合は、サイトロゴを子テンプレートに登録しましょう。
外観→テンプレートよりテンプレートを選択し、「サイトの基本情報」→「ロゴを選択」でサイトロゴを登録します。

その他カスタマイズの方法はAMPテンプレートの公式マニュアルが詳しいです。

▼amp-wp/readme.md at master ・ Automattic/amp-wp ・ GitHub

github.com/Automattic/amp-wp/blob/master/readme.md

AMP導入作業のまとめ

今回連載3回目、4回目でAMP導入における設定や作業内容についてまとめました。

「WordPressのAMPプラグインを使えばAMP化は簡単」と言われますが、実際には細かいところでうまく動作しなかったり問題が生じたりすることがあります。技術力がある人がいれば作業自体には問題はありませんが、導入作業にかける時間と労力、それに対する効果を考えると、やはりAMP化はよく考えた方がよいと思います。

次回はいよいよ最終回です。最終回はAMPを導入したあとの運用についてまとめます。

事務局
この記事を書いた人: 事務局

「ムダな情報で頭脳を消耗することなく考える時間を確保する」
ウェブのノウハウだけに限らず、広告やマーケティング全般の知識、時には組織論や時事に至るまで、最先端や未来予測などみなさんにとって本当に必要な情報だけをお届けします。