AMPをワードプレスにプラグイン無しで設定する方法

2月より Google が AMP（Accelerated Mobile Pages）のインデックスを始めるようで、SEO 界隈ではそれなりの盛り上がりをみせています。

AMP というのは簡単に言うと「スマホ高速表示技術」のようなものです。

wordpress-amp

AMPとは

モバイルで閲覧する人が PC で閲覧する人数を超え、スマホで見れるのは当たり前という時代。Google はさらなるモバイル用の閲覧環境を高速化するため AMP プロジェクトを立ち上げました。表示 HTML に制限を加える事でより高速にモバイル用のページを表示させます。

HTML にかなりの制限があるため、モバイルフレンドリー対策以上にしなくてはいけない項目が多く、その対策を適当にしてしまうと AMP でのインデックスがされないため何の意味もなくなってしまい、モバイル対策以上に深刻です。

ワードプレスは AMP 対策のため、プラグインを開発中でワードプレスを利用しているのであればプラグインを入れてもらえれば対策は可能です。現状はまだベータ版であるため完全ではないようですが。

ただ、プラグインを使うとプラグイン利用者の AMP ページが全員同じ表示になるという残念な仕様になりそうです。AMP は CSS にも制限があり、使っていけない CSS プロパティなんかもあります。ですので、下手にプラグインの HTML ファイルを何の知識もなく改変すると AMP 規則に違反してしまいプラグインを使う意味自体なくなってしまいます。

AMP の HTML については以下の Github を参考にしてください。英語が嫌だという場合は「AMP HTML Google」等で検索してもらえると数は多くないのですが AMP HTML の説明を書いてくれている記事が見つかります。

参考：AMP HTML | Github

ワードプレスの AMP プラグインについては、以下を参考にしてみてください。

参考：WordPressのプラグインでブログをAMP対応にしてみた | 海外SEO情報ブログ

ワードプレスプラグインを使わず AMP に

当記事ではプラグインを使うこと無く、ワードプレスを AMP に対応させてみたいと思います。現状この記事も AMP HTML が作成されていて、URL に「?amp=1」を付与することにより、AMP ページが表示されます。

当記事の AMP ページ：https://q-az.net/amp-wordpress-without-plugin/?amp=1

ワードプレスの AMP プラグインとは違い、ページデザインがほぼ変わってないことが確認できます。一部 AMP の制限により表示できない要素があるので、それを AMP HTML では消しています。

ただし、この方法は「当ブログだから出来た」という点もかなりあり、ワードプレスを利用しているブログ全てに適用できるものではありません。あくまでも「参考程度」に考えていただければありがたいです。今から紹介する方法は、Google のページ速度計測ツール「Page Speed Insight」でかなりの高得点を出せる状態になっているブログであれば可能かもしれません。当ブログは 99/100 であるため実現できたポイントもあります。

また、AMP は本来静的ページのための技術です。ワードプレスはそもそも動的にページを作っていて、なおかつ、今から紹介する方法も動的に AMP HTML を作成しています。ですので、もしかしたら将来的に AMP と認定されなくなる可能性もあります。その点をご了承の上でご覧ください。

前置きが長くなってしまいましたが、以下 ワードプレスの AMP 化です。

header.php

手順1　htmlタグ headタグ

<!DOCTYPE html>
<html lang="ja">
    <head prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#">

書き換え HTML
<!DOCTYPE html>
 
//AMPチェック
<?php
$myAmp = false;
$string = $post->post_content;
if($_GET['amp'] === '1' && strpos($string,'<script>') === false && is_single()){
    $myAmp = true;
}
?>
 
<?php if($myAmp): ?>
<html ⚡>
    <head>
<?php else: ?>
<html lang="ja">
    <head prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#">
<?php endif; ?>

通常版の HTML は人によって異なりますので、あくまでも例です。

AMP HTML は詳しくは前述の Github を確認して欲しいのですが、<html>と<head> に決まりがあります。

AMP チェックの部分で「パラメータに『amp=1』があり、記事本文中に <script> がなく、記事表示ページのとき、変数 $myAmp を true にする、それ以外は false」を行っています。

AMP は記事の高速表示であるため、記事ページのみでよく、JavaScript の利用は Google が指定したものを1種類を除き禁止されています。ですので、記事本文中に script タグがある場合は AMP HTML を作成しません。

AMP 対応の基本形

<?php if($myAmp): ?>
 
//AMP ページの HTML
 
<?php else: ?>
 
//通常ページの HTML
 
<?php endif; ?>

の形で AMP HTML と通常 HTML を併記していくことで、対応していきます。$myAmp が true だった場合は上の HTML、false だった場合は下の HTML を読み込む仕組みです。

AMP HTML は
<html ⚡>
    <head>

としなくてはいけません。
head のタグ内に余計な記述があるとエラーとなります。

手順2　meta タグ

<meta charset="utf-8">
<?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; ?>

<meta charset="utf-8"> は必ず <head> の真下になければなりません。間に他の meta タグや title タグが入らないようにしましょう。

また、AMP の viewport は <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> で固定です。AMP の時はこちらを読みこむようにします。

他の meta タグに関しては一部を除いて、あっても無くても良いということになっているので、特に手を加えないことにします。

手順3　canonical

<link rel="canonical" href="http://example.jp/article/2016/" />

AMP に対応するためには canonical の設定をしなくてはいけません。必要な要素です。これは AMP とは関係なく head 内に入れたほうが良い要素でもあるので、もう既に入っている場合もあるかもしれません。もし設定していない場合は設定しましょう。AMP 用に特別な canonical である必要はなく、通常の重複コンテンツ防止のための設定をすれば大丈夫です。設定の仕方については「ワードプレス canonical」で検索してもらえれば出てきます。

もし、AMP のためだけに取り敢えず canonical を設定する場合は、以下のコードでOKです。

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

$canonical_url は手順8でも使う URL なので変数に格納しておきます。

手順4　link タグ

<?php if(!$myAmp): ?>
    <link ～～ />
    <link ～～ />
    <link ～～ />
<?php endif; ?>

AMP HTML は link タグが先ほどの canonical 以外は使えないものが多いです。rel の値が stylesheet、preconnect、prerender、prefectch が禁止されているようです。ですので、

<?php if(!$myAmp): ?>
 
//通常ページの HTML
 
<?php endif; ?>

と !$myAmp で否定の if 文にして AMP では読まないようにします。link タグはいろいろな用途に本来用いますが、CSS のための link タグ（stylesheet）も禁止されているので注意してください。CSS の外部読み込みが禁止とかなり厳しい制約ですが、きまりなので仕方がありません。CSS に関しては style タグで設定することとなります。

手順5　script タグ

<?php if(!$myAmp): ?>
    <script ～～ </script>
    <script ～～ </script>
    <script ～～ </script>
<?php endif; ?>

script タグは手順6で出てくる script を除き禁止です。JavaScript は基本使えないと考えましょう。

手順6

<?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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
<?php endif; ?>

今度は AMP 専用の style タグと script タグを加えます。これを入れないと AMP として認識されないので注意しましょう。許されている JavaScript のための script タグはこれのみです。

追記：AMP 専用の style タグ（boilerplate）が変更になったので、修正しました。

手順7　schema.org の設定

<?php if($myAmp): ?>
<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "BlogPosting",
    "headline": "<?php the_title(); ?> ",
    "image": {
        "@type": "ImageObject",
        "url": "<?php echo $ampimg; ?>",
        "height": 430,
        "width": 770
    },
    "datePublished": "<?php echo get_the_date('c'); ?>",
    "dateModified": "<?php echo get_the_modified_date('c'); ?>",
    "author": {
        "@type": "Person",
        "name": "名前"
    },
    "publisher": {
        "@type": "Organization",
        "name": "サイト名",
        "logo": {
        "@type": "ImageObject",
            "url": "https://example/logo.png",
            "width": 67,
            "height": 60
        }
    },
    "description": "<?php echo $ssge; ?>"
}
</script>
<?php endif; ?>

AMP は schema.org を設定しなくてはいけません。

詳しくは下記ページを参考にしてもらえればと思います。英語が嫌だという場合は「AMP schema org」あたりで検索してください。

参考：Enabling Rich Snippets for Articles

アイキャッチ画像やロゴ画像が必須となります。こちらもかなり面倒くさいですね。大きさや高さに制限があります。アイキャッチの画像は人により色々な設定があると思うので書けないのですが、当ブログではアイキャッチ画像の大きさは固定で、$ampimg に 画像 URL が入るようにしているため上記のような設定となってます。アイキャッチの大きさが固定でない場合はサイズを図って動的に大きさを入れる必要があります。$ampimg については個人個人で設定してください。

$ssge には meta の description が当ブログでは入っています。これも各々設定してください。

また、記事投稿時間と記事更新時間を書く必要があるので

"datePublished": "<?php echo get_the_date('c'); ?>",
"dateModified": "<?php echo get_the_modified_date('c'); ?>",

とワードプレスの関数を用いて設定します。

引数を「c」 と設定することでワードプレスでは ISO 標準の時間を排出してくれるので、それを使いましょう。
また、この JSON-LD は head 内に設定します。head 内以外ではエラーが出ます。

手順8　amphtml

<?php if(!$myAmp): ?>
    <link rel="amphtml" href="<?php echo $canonical_url.'?amp=1'; ?>">
<?php endif; ?>

通常版の HTML に amphtml の link タグを設定します。この link タグがないとインデックスされないのでしっかりと設定します。

当ブログでは $canonical_url に 手順3の canonical 用の URL が入るようになってます。この URL に ?amp=1 を付与した URL が AMP HTML の URL となるため上記のように設定します。$canonical_url は個人個人で設定しなくてはいけませんので注意してください。

手順9　CSSの設定

<?php if($myAmp): ?>
<style amp-custom>.widget p{text-align:center}
 
・・・
 
</style>
<?php endif; ?>

CSS は <style amp-custom> と amp-custom が必要です。ただの <style> だけではエラーとなるので気をつけます。

CSS について禁止とされているものもいくつかあります。

● !important 禁止
● animation、transition は GPU 関連のみ

が主なものとなります。GPU 関連の animation については以下のページを参考にしてください。

参考：スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ！

CPU が動くアニメーションは AMP では禁止になるということですね。

また CSS に関しては

<span style="color:red">あか</span>

のように、インライン属性の style は AMP で禁止されています。記事本文などでも使っているとエラーとなるので、使っている場合は class などで書き換えます。

single.php

手順10　記事の画像書き換え

<?php if($myAmp): ?>
<?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;
?>
<?php else: ?>
    <?php the_content(); ?>
<?php endif;?>

次は記事部分の自動書き換えです。

AMP は画像 img タグも独自の書き方にしなければいけないため、上記のコードで書き換えます。書き換えに関しては以下のページを参考にしました。

参考：テンプレートタグ/the content

単純な get_the_content だとフィルターを一切通さないため、フィルターを通るようにしています。

記事内の <img を <amp-img layout="responsive に書き換えるコードです。AMP では画像は amp-img で指定し、画像をレスポンシブに対応させるために layout="responsive を付与します。これで自動対応してくれます。

また AMP は画像の大きさ（width 値と height 値）を明記しなくてはなりません。img の属性に width、height を入れるようにします。

手順11　コメント関係

<?php if(!$myAmp): ?>
    <?php comments_template(); ?>
<?php endif; ?>

AMP では form 関連は button を除いて禁止です。ですので、コメント用の input タグも禁止となるので AMP ではコメント欄ごと表示させないようにします。

その他

手順12　ブログ内検索

<?php if(!$myAmp): ?>
    <form method="get" id="searchform" action="/">
        <input type="text" placeholder="Search" name="s" id="s">
    </form>
<?php endif; ?>

ブログ内検索も input タグを利用しているため AMP では表示しないようにします。

手順13　Google アナリティクス

<?php if($myAmp): ?>
    <amp-pixel src="https://ssl.google-analytics.com/collect?v=1&amp;tid=UA-12345678-1&amp;t=pageview&amp;cid=$RANDOM&amp;dt=$TITLE&amp;dl=$CANONICAL_URL&amp;z=$RANDOM"></amp-pixel>
<?php endif; ?>

Google アナリティクスも JavaScript であるためそのままでは使えません。

参考：google-analytics.amp.html

UA- 以降を自分用の個別番号に変更します。当タグは body の下の方に入れれば大丈夫なようです。

手順14

その他、細かく規則を適用します。先ほど書いたものも含めて

● img を amp-img に変更。
● amp では表示しなくても良い要素は <?php if(!$myAmp): ?> <?php endif; ?>を使い書き換え。
● 属性 style は禁止されているので、class 等で書き換え。

また、wp_head() と wp_footer() も AMP では読み込まないほうがよいと思われます。勝手に script や link タグを挿入してしまうため、AMP では都合が悪いです。
 
<?php if(!$myAmp): ?>
    wp_head();
<?php endif; ?>
 
<?php if(!$myAmp): ?>
    wp_footer();
<?php endif; ?>

まとめ

ほぼ自分用の備忘録のような形になってしまいましたが、このようにコードを書き換える事によって当ブログは AMP に対応しました。参考になる部分があるかわかりませんが、もし参考になれば嬉しいです。