【2019年秋・最新】初心者向け：コピペでWordpreeにAMP導入してみよう

# AMPとは
AMPとはAccerated Mobile Pageview のことであり、Googleが提供する、モバイルページを爆速にする手段です。
どのような仕掛けで早くなっているかについては<a href="https://amp.dev/documentation/guides-and-tutorials/contribute/translations/">公式ドキュメント（英語）</a>がもっとも信頼性の高いものですが、手っ取り早く日本語で理解したいという方には<a href="https://digitalidentity.co.jp/blog/seo/amp/what-is-amp.html">こちら</a>などが良いかもしれません。

ものすごく簡単に説明すると、諸々の読み込みを後回しにして、とりあえずユーザーが操作できる状態にしてしまおう！という感じです。
兎にも角にも表示速度が引くほど速くなり、離脱率等の低下、UX強化が期待できますし、Googleの推奨する高速化ツールを使用するという点で、SEO順位のアップにも貢献しているものと思われます


また、最近では<a href="https://ics.media/entry/18237/">（今の時代、ウェブページは一瞬で表示するべき！）</a>のような記事の影響もあり、
Wordpressサイト管理者の皆様におかれましては、上層部やオペレーションサイドから高速化の施策としてAMP導入を求められることもあると思います。

一方で
「AMP PV落ちる」「AMP　デメリット」などと検索すると、AMP導入に失敗した方の記事などがヒットし、AMPのデメリットというようなことが書かれています。
挙げられている問題点としては
・PVが落ちる
・トラッキングができない
・サーチコンソールのエラーが治らないために、検索順位が下がる

といったものです。
結論から言うと、2019年現在このようなトラブルは全て回避することができます。

実際に私もAMPを、弊サイト<a href="https://shale-inc.com">SHALE</a>に導入して上のようなトラブルに見舞われ、かなり焦りました。
また、上のような内容の記事を読んでAMPを一回停止しようかとも思いましたが、なんとか切り抜けることができたので、今回はそのまとめとして
本記事を書かせていただきます

網羅的に書きましたので、各自の需要に合わせて必要なパートを読んでくださればと思います。また、ご意見や、より良い方法などありましたらぜひ教えてください。

##基本的な導入の前に
ここはサイトによって色々と難しいこともあると思います。最近はamp-scriptなどというものもあり<a href="https://amp.dev/ja/documentation/components/amp-script/?format=websites">（詳細はこちら）</a>javascriptを実行できる環境も整いつつあるようですが、基本的にAMPページにおいてはJSを効かせることはできません。
ですから、Javascriptを多用しているテーマ、サイトの場合は導入が難しいかと思われます(実は少し頑張れば攻略できるので、攻略法は後述します）

##いざ導入
今回はWordpressのAMPプラグインを使用しました。プラグインなしで導入する方法もありますが、初心者ならば大人しくプラグインでしょう。

<img width="2344" alt="Screen Shot 2019-08-05 at 7.34.07 PM.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477302/e309bfe4-3118-3477-ee59-2f50c912e004.png">

有効化すると管理画面にAMPというところが現れ、クリックするとこのような画面にたどり着きます。Standard,Transitional,Readerの3つのうち、<strong>Transition</strong>を選択します。
すると...

実はこれだけでもうAMPサイトができています。

元のリンク　www.~~~.com　に　/?amp をつけると、AMPページを見ることができます。(この時、<strong>必ずモバイルで確認してください</strong>。)
モバイルとPCで同じリンクでも見た目が全く変わってしまいますし、AMPはモバイルのためのものなので、PCで開いたものはユーザーの目には触れません！


この「すぐできてしまう」ところがAMPサイトの怖いところで、知らぬ間にユーザーの目に不完全な形で届いてしまったり、アナリティクスに記録されない状態で配信してしまったりすることがあるわけです。

##問題点1  Javascriptが効かない
まあ、これはAMPの性質上わかってはいたことなのですが、実際のところ、テーマでJSで用意されていたものが全く動かなくなります
例えば、ハンバーガーメニューや、画像のスライダーなどを設置していると困りますね。このような問題点の根本的な解決策としては、CSSで作り変えられるものは、CSSで作る、といったところなのですが

そんなこと急に言われても... と、なってしまいますよね。

これが最初の壁で、ここでAMP開発を諦めてしまうかたも多いかと思います。

さて、この問題を攻略するために必要なのが条件分岐です。通常のページで表示されているコンテンツを[AMP以外のページ]で表示し、AMPの時だけ別のものを置いたり、AMPの時だけ表示しないようにすれば、元のページに大きな変更を加えずに乗り切ることができます！

具体的にはfunctions.phpに

```php:functions.php
if ( !function_exists( 'is_amp' ) ):
	function is_amp() {
		$is_amp = false;
if($_GET['amp'] === '1'||$_GET['amp'] === ''){
			$is_amp = true;}
		return $is_amp;
	}endif;

add_action('init', function() {
	add_rewrite_tag('%amp%', '([^&]+)');
	add_rewrite_rule('(.+?)(?:/([0-9]+))?/amp', 'index.php?name=$matches[1]&amp=1', 'top');
}, 10, 0);
```

詳細は割愛しますが、これによりあらゆるampページに対する条件分岐、すなわち

```php:single.php
if (is_amp()):
{//ampページでの処理}
elseif(wp_is_mobile()):
{//非ampのモバイルページでの処理}
else:
{//そのほかPC等での処理}
endif;
```
というような分岐を書くことで、自由自在にAMPで非表示にしたり、逆にAMPのみで表示することができるようになります。AMP枝にのみクラスを適用させて、CSSをいじることもできますね！


##問題点2 広告が出なくなる
Google Adsenseでは、普通の広告はAMPページでは出ません。AMP専用の広告コードをAdsenseの管理画面から作成できますので、それを準備したうえで、以下を行います。

これはAMP広告を作成しようとすると確認されることですが、まず<strong>AMPサイトのHTMLファイル</strong>に
```<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>```
を記述する必要があります。

<strong>AMPサイトのHTMLファイル</strong>へは、
WordPress管理画面>プラグイン>プラグインエディター>編集するプラグイン　でAMPを選択し、
フォルダツリーの中から　temprate>html-start.php　を選択　で入ることができます

ここで、```</head>```のすぐ上に先ほどのコードを貼り付けます

実際に広告を設置するには、上述のamp分岐関数を使います

```php:single.php
if (is_amp()):
{//amp広告コード}
else:
{//今まで設置していた広告}
endif;
```

このようにせず、ただ単にAMP用広告コードを置いてしまうと、もともとあった広告のスペースに何も表示されず、デッドスペースが生まれてしまうので注意です。

##問題点3 PVが激減する
これは、どちらかというと、本当にPVが減少しているわけではなくトラッキングがうまくいっていないのが原因です。
###Google Analyticsへの送信方法
WordPress管理画面からAMPの管理画面に入ると"Analytics"というところがあり

```json:analytics.json
{
	"vars": {
		"account": "UA-XXXXX-Y"
	},
	"triggers": {
		"trackPageview": {
			"on": "visible",
			"request": "pageview"
		}
	}
}
```

これを書きなさい！というようなことが書いてあります。素直に直下のボックス
<img width="752" alt="Screen Shot 2019-08-05 at 8.26.44 PM.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477302/0d868520-b4fb-ce4e-9454-59ac13d52070.png">
にこれを書いてSaveして解決！と思いきや...

###このコード、もう一箇所書かなくてはいけないらしい。
そのもう一箇所というのが、先ほども登場した<strong>AMPサイトのHTMLファイル</strong>になります。

まず、先ほどと同じように
WordPress管理画面>プラグイン>プラグインエディター>編集するプラグイン　でAMPを選択し、
フォルダツリーの中から　temprate>html-start.php　を選択し...
先ほど広告のためのコードを書いた行と```</head>```の間に
```<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>```
を記述します

そして、```<body>```のすぐ下に

```php:html-start.php
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">

{
    "vars": {
        "account": "UA-XXXXXX-Y"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview"
        }
    }
}

</script>
</amp-analytics>
```

を記述します。今後、少しこの箇所に変更を加えていきますが、その際も
・プラグインの管理画面
・AMPページのHTML
の両方に変更を反映させていきます

自分でampページにアクセスしてみて、Google Analyticsのリアルタイム欄に表示されれば、トラッキングできているということです！


##晴れてトラッキング成功、しかし完全ではなく...

晴れてGAの導入にも成功し、枕を高くして眠れるかと思いきや、一日経って昨日の記録をみた私の目に飛び込んできたのは<strong>激減したページ/セッション</strong>でした。
高速化して閲覧が減っていてはひとたまりもありません、

なぜこんなことが起きたのかというと...(次のセクションでコピペ用コードを紹介するので、とりあえず実装したいという方は読み飛ばしてください)


###AMPを導入することで、3種類のページを扱うことになる
AMPを導入することで、今までのページに加えて、お尻に/?ampがついたページが誕生しましたが、実際にはもう１種類のページが誕生しています。それが<strong>Google Cache</strong>です。これは、Googleがサイトの情報を取得して、サイトのサーバーにアクセスすることなく、Googleからユーザーにコンテンツが送られるというものです。<a href="https://developers.google.com/amp/cache/?hl=ja">詳しくはこちら</a>

このおかげで、ただでさえ速いAMPが、恐ろしい速さで表示されるようになります。

しかし、この3つのページ、何もしないと<strong>全て別のページ</strong>と認識されてしまい、ユーザーが移動するとセッションが切れてしまいます。
例：
AMP Cacheページに検索流入>自サーバーのampページへ>非ampのモバイルページへ
という経路を辿った場合、セッションあたりのPVは3ですが、1,1,1と別々のセッションと認識されてしまいます。

ということで、

###コピペコード

まず、
・プラグインの管理画面　のAnalyticsページのコードを

```json:analytics.json
{
    "vars": {
        "account": "UA-XXXXXXX-Y"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview"
        }
    },
    "linker": {
        "domains": [
            "ここにサイトのリンク(www.~~~.com)を記入"
        ],
        "enabled": true
    }
}
```

というように書き換え、同じように
・AMPページのHTML
も書き換えます。変なところに全角スペースなど入らないように注意しましょう

そして、次に、Google Analyticsのトラッキングのためにもともと書いてあった```analytics.js```を探します。おそらく```head.php```もしくは```header.php```に書かれている

```javascript:analytics.js
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'GA_TRACKING_ID', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
```
こんなところを見つけて、ここを

```javascript:analytics.js
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'GA_TRACKING_ID(ここにトラッキングID:UA-XXXXXXX-Yを記入)', 'auto', {'allowLinker': true},{'useAmpClientId': true});
ga('require', 'linker');
ga('linker:autoLink', ['ここにサイトのリンク(www.~~~.com)を記入'] );
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
```

というように置き換えます。　

これで、PVやPV/セッションが正確に測定できているかと思います
検証方法などの載っているリンクを貼りますので、ぜひご確認ください
参考:
<a href ="https://support.google.com/analytics/answer/7486764?hl=ja">AMP 用に Google アナリティクス セッション統合の初期設定を行う</a>
<a href="https://www.suzukikenichi.com/blog/google-analytics-lets-you-opt-in-amp-client-id-api/">AMP キャッシュへのアクセスとオリジナルのページ（AMP含む）へのアクセスを同一認識できない問題を解決する手段</a>

##Search Consoleで起きうるエラー
SearchConsoleを利用してサイトの検索パフォーマンスを測定されている方も多いかと思います。AMPを導入するとしばし起きるのが”必須の構造化データ”があるとかないとかいうものです。
実際のところ警告なので無視しても致命的ではないのですが、せっかくなので導入してみましょう

footer.phpの```</footer>```というところの直後に

```php:footer.php
 <?php
     $thumbnail_id = get_post_thumbnail_id($post);
     $imageobject = wp_get_attachment_image_src( $thumbnail_id, 'full' );
  ?>
  <script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "BlogPosting",
    "mainEntityOfPage":{
      "@type":"WebPage",
      "@id":"<?php the_permalink(); ?>"
    },
    "headline":"<?php the_title(); ?>",
    "image": [
      "<?php echo $imageobject[0]; ?>"
    ],
    "datePublished": "<?php echo get_date_from_gmt(get_post_time('c', true), 'c');?>",
    "dateModified": "<?php echo get_date_from_gmt(get_post_modified_time('c', true), 'c');?>",
    "author": {
      "@type": "Person",
      "name": "<?php the_author(); ?>"
    },
    "publisher": {
      "@type": "Organization",
      "name": "サイト名",
      "logo": {
        "@type": "ImageObject",
        "url": "ここにサイトのロゴの画像リンクを挿入"
      }
    },
    "description": "<?php echo get_the_excerpt(); ?>"
  }
  </script>
```
こいつをコピペでどん。以上。


##以上でWordPressへのAMP導入完了！
以上で、諸所の記事にある、AMP導入が引き起こすトラブルを解決できます。

冒頭にも書きましたが、アイテムやコーディネートを、こだわりを重視した解説でご紹介するメンズ向けの
ファッションメディア"SHALE"を運営しております。多くの方の来訪お待ちしております。

https://shale-inc.com