【WordPress】プラグインなしでAMPに対応する方法

WordPress2016年9月2日

何かと昨今話題になっているAMPについてとりあえずプラグインで対応しようかなと思ったのですが、エラーに対応できなかったりデザインを自由に行えないなどプラグインでの対応はデメリットのほうが大きいと感じたため、WordPressにてプラグインなしでの対応を試みたところ、意外とできることがわかりました。自分用のメモも兼ねて対応方法をまとめてみました。

AMPとは

AMP（Accelerated Mobile Pages Project）はモバイルウェブ高速化を目的としたGoogleが推進しているプロジェクトです。2016年9月現在、既にGoogleの検索結果にも反映されています。
「AMP HTML」と呼ばれる独自のテンプレートに沿ってWebページを作成すると、Google検索結果から記事の表示までを拘束で実現する事が可能です。
AMPはモバイルのUX向上が目的とされているため、AMPは基本的にモバイル端末で閲覧することが想定されたものになります。

ちなみに本記事もAMP対応しています。以下のURLで確認することができます。

AMP対応したページ

AMP対応の基本的ルール

DOCTYPE宣言直下の<html>タグは<html amp>
link rel="amphtml"にてAMPページのURLを通常ページに記述
link rel="canonical"にて正規化URLをAMPページに記述
viewportの振り分け
wp_head()・wp_footer()はAMPページでは使用しない
AMP用jsライブラリを読み込む
amp-boilerplateを読み込む
schema.orgを設定する
CSSの記述は<style amp-custom>～</style>でhtmlソースに直接記述
CSSの総容量は50KBまで
画像を<amp-img>～</amp-img>に置換

AMP対応の際の禁止事項

javascript（AMP用ライブラリを除く）
<link>タグでのcss読み込み及びインラインスタイル
cssの!important
<form>タグ

WordPressでAMP対応する手順

①phpコードで通常ページ／AMPページの振り分け機能を追加

条件分岐をしたいWordPressのテンプレートphpの最上部に以下のコードを記述します。
$myAmpという変数を用意し、ampのパラメーターが1かつsingleページで<script>タグが入っていない記事のみ$myAmpをtrueにする処理となります。

<?php $myAmp = false; $string = $post->post_content;if($_GET['amp'] === '1' && strpos($string,'<script>') === false && is_single()){$myAmp = true;}?>

WordPressのテンプレートphpで実際に通常ページ用/AMP用でソースを振り分ける際、if文で以下のように使用します。

<?php if($myAmp): // AMP対応ページの場合 ?>
AMPページ用のソース
<?php endif;?>

<?php if(!$myAmp): // 通常ページの場合 ?>
通常ページ用のソース
<?php endif;?>

<?php if($myAmp): // AMP対応ページの場合 ?>
AMPページ用のソース
<?php else: // 通常ページの場合 ?>
通常ページ用のソース
<?php endif;?>

②head／metaタグを振り分け

<?php if($myAmp):?>
<html amp>
<head>
<?php else:?>
<html lang="ja">
<head>
<?php endif;?>

AMPページでは<html>タグは<html amp>とします。「amp」ではなく稲妻の絵文字でもよいです。
ちなみに文字コード宣言のmeta charset=「utf-8」は「UTF-8」だとエラー扱いとなるので注意です。
（これに気付かず2時間くらいハマりました。。。）

③canonicalタグを設定

AMPページを作成するという事は、同じ内容のページを別URLで作成することになり、特に何も対処しないとGoogleから重複コンテンツとみなされてしまいます。そのためAMPページではcanonicalタグにてURLの正規化（本来のページを示す）を行う必要があります。

<?php if($myAmp):?>
<?php $canonical_url = get_permalink(); ?>
<link rel="canonical" href="<?php echo $canonical_url; ?>">
<?php endif;?>

get_permalink();でパーマリンクを変数&canonical_urlに格納し、canonicalの値に代入しています。

④amphtmlを設定

<?php if(!$myAmp): ?>
<link rel="amphtml" href="<?php echo(empty($_SERVER['HTTPS']) ? 'http://' : 'https://').$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>?amp=1">
<?php endif; ?>

通常ページにてlink rel"amphtml"タグでAMPページが存在していることを明示します。これによりGoogleにAMPページが存在することを伝えることができます。phpコードで取得した現在値URLの末尾に?amp=1を追加しています。

参考

【WordPress】現在値のフルパスURLを1行のphpコードで取得

⑤viewportの設定

レスポンシブWebデザインなど、スマートフォン対応する際に必ず必要になるviewportの記述ですが、AMPのガイドラインに沿った記述でないとエラーになります。

<?php if($myAmp): ?>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<?php else: ?>
<meta name="viewport" content="width=device-width,initial-scale=1">
<?php endif; ?>

⑥AMP用JSライブラリの読み込み

AMPページにて以下のjsファイルを読み込みます。

<?php if($myAmp): ?>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<?php endif; ?>

⑦schema.orgの設定

検索結果に対応させるために、以下の記述をheadに追加します。

<?php if($myAmp):?>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Article",
"mainEntityOfPage":{
"@type":"WebPage",
"@id":"<?php the_permalink(); ?>"
},
"headline": "<?php the_title();?>",
"image": {
"@type": "ImageObject",
"url": "検索結果用サムネイル画像のパスを記述",
"height": 任意のサイズを記述,
"width": 800
},
"datePublished": "<?php the_time('c') ;?>",
"dateModified": "<?php echo max( get_the_modified_time('c'), get_the_time('c') ); ?>",
"author": {
"@type": "Person",
"name": "任意のユーザ名を記述"
},
"publisher": {
"@type": "Organization",
"name": "サイト名を記述",
"logo": {
"@type": "ImageObject",
"url": "サイトロゴへのパスを記述",
"width": 任意のサイズを記述,
"height": 任意のサイズを記述
}
},
"description": "任意の説明文を記述"
}
</script>
<?php endif;?>

※サムネイルの画像サイズは幅696px以上が推奨ですが、800pxでないとエラーとして扱われてしまうようです
※サイトロゴのパスは通常ページで使っているものと同じで良いと思います

⑧CSSの設定

AMPページではcssファイルを別ファイルとしてlinkタグで読み込むことはできません。htmlソースのhead内に直書きする必要があります。
WordPressでは別テンプレートにcssを記述して読み込めばよいので、管理上別ファイルにすることで扱いやすくなります。
また、AMPページのスタイルは以下のフォーマットで記述す必要があります。

<style amp-custom>～</style>

※!importantを使用しているとエラーとして扱われますので要注意です

⑨amp-boilerplateの読み込み

以下のソースコードをhead内で読み込みます。

※「amp-custom」ではなく「amp-boilerplate」で記述

<?php if($myAmp): ?>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<?php endif; ?>

imgタグをamp-imgタグに置換

imgタグもそのままではAMPページではエラーとなります。
以下のphpコードをのsingle.php内<?php the_content(); ?>の手前に記述します。

<?php
$content = apply_filters( 'the_content', get_the_content() );
$content = str_replace( ']]>', ']]&gt;', $content );
$pattern = '/<img/i';
preg_match($pattern,$content,$matches);
$append = $matches[0];
$append = '<amp-img layout="responsive"';
$result = preg_replace($pattern, $append, $content);
echo $result;
?>

※投稿記事内のwidthとheightの値を設定しておかないとエラーとして扱われるので要注意

AMPページが正しく実装されているか確認するには

いくつかのツールでAMPページが正しく実装されているか確認することが可能です。

The AMP Validator

以下のバリデータツールにフルパスで入力して[VALIDATE]をクリックするとAMPページにエラーがある場合結果を示してくれます。
全て英語となりますが内容は理解できないものではないです。エラーなく実装されていると「Validation Status: PASS」と表示されます。

The AMP Validator

ブラウザのコンソール

Chromeの開発者ツールもしくはFireFoxのアドオン[Firebug]のコンソールでデバッグすることができます。

Chromeの開発者ツール

[F12]で開発者ツールを開き、[console]タブを表示します。AMPページのURL末尾に「#development=1」を付与したURLにアクセスするとデバッグ結果が表示されます。
エラーがなければ「AMP validation successful.」と表示されます。
エラーが出た場合は。。。全て英語なので一つ一つ翻訳して理解したうえで修正するしかありません。参考としてGitHubのURLもご紹介させていただきます。

AMP HTML

FireFoxのアドオン[Firebug]

Firebugをインストール後、[F12]でFirebugのウインドウを表示します。[コンソール]タブを表示してAMPページのURL末尾に「#development=1」を付与したURLにアクセスするとデバッグ結果が表示されます。
エラーがなければ「AMP validation successful.」と表示されます。

構造化データテストツール

Googleの構造化データテストツールでは、schema.orgが正しく設定されているか確認することができます。
以下のURLにアクセスしてAMPページのURLを入力し[テストを実行]をクリックすると結果が表示されます。「エラーなし」「警告なし」と表示されればOKです。

構造化データテストツール

schema.orgが正しく設定されていないと、検索結果に表示されるAMP用カルーセルに表示されない可能性があります。schema.orgのデバッグは必ず行っておきましょう。

まとめ

WordPressの投稿記事だけの対応であれば意外と対応できることがわかりました。
既に公開済みの記事内に掲載している個別画像のwidthとheightの値は記述していなかったため、それだけ対応の手間がかかりましたが、WordPressであれば条件分岐で今後も自動的にAMPページを生成することができます。

将来的にAMPページの有無が検索結果に影響する可能性もゼロではないので、今後も動向を注意していきたいと思います。

この記事を読んでいる方にオススメの記事

「WordPress」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。