web系のブログなのに、技術的なアウトプットが減っているので、とりあえず最近勉強していた「AMP」についてまとめます。
そもそもＡＭＰって？
googleが推奨し始めた新しいサイト表示の技術で、きちんと作れば表示速度が爆速になるというものです。
スマホでgoogle検索すると、検索結果にカミナリみたいなマークが付いてるページがあると思いますが、それがAMPで作られているページ。
SEOにも強いらしいという話もあり、導入しているサイトも多いですね。
当ブログは2018年12月から「ＡＭＰ」を導入
仕事でAMP対応をする必要があり、とはいえまだまだ途上の技術なので、自分のブログでも実験的に導入してみました。
記事ページの末尾に「/amp」と入れると、AMPでの表示になるようになっています。
また、Twitterアプリの場合、ツイートされたリンクでAMPページがあるとそちらを表示するようになっているみたいです。
WordPressのＡＭＰ対応でするべきこと
WordPressでAMP対応する場合、プラグインを使用することで対応が可能です。
当ブログも「AMP」プラグインを使用しています。
しかし、プラグインを有効化するだけでは完了しません。色々とやらなければいけないのです。
サイト画像は設定必須！
特にやらなければいけないのが、サイト画像の設定。
そのままだと構造化データのエラーが出ます。
使用しているテーマのfunctions.phpに以下を追加すると、サイト画像を設定できます。
この画像にもサイズが決まっていて、高さ60px（推奨）、幅600px以内で作る必要があります。
参考）AMPロゴガイドライン
アナリティクスのタグ、忘れてない？
調べていて一番多かったのは、アナリティクスタグの設定。
「AMPにしたらアクセス減った！」と言っている人は、たいがいAMP用ページにアナリティクスタグを仕込むのを忘れています。
Twitterなどの埋め込みは置き換え処理を
AMPで特徴的なのは、スクリプトやiframeタグが動かないこと。
そのため、本文にTwitterやInstagramの埋め込みがあっても、表示されません。
表示したい場合は、AMP用のタグがあるので、置き換える処理が必要です。
ここはプラグインで自動化してくれてもいいのになぁって思うんですが、どうなんでしょうね？
広告入れてる人はＡＭＰ用に設定を
デフォルトのテンプレートだと、当たり前ですが広告がない状態なので、テンプレートをカスタムして広告を入れるようにしましょう。
また、通常の広告タグはAMPページでは動きません。AMP用の広告タグにしてから入れるようにしましょう。
「ＡＭＰ」用のテンプレートは修正した方がいい
プラグインを有効化すると、AMPページでは専用のテンプレートが適用されます。
デフォルトテンプレートは、プラグイン内にあるので、ampフォルダからコピーして、使用しているテーマに入れると、そちらが適用されるようになります。
そのままでも問題はありませんが、テーマをオリジナルで作っている人はAMP用テーマもカスタムした方がいいと思います。
テンプレートをPC版とスマホ版で分けてる人は、それぞれのテーマ内にａｍｐフォルダを
AMP用のテンプレートファイルは、使用してるテーマ内に入れる必要があります。
ユーザーエージェントでテーマの振り分けをしている場合は、それぞれのテーマ内に入れないと、PCではちゃんと表示されるのに、スマホでAMP用テンプレートが表示されない！なんてことが起きます。
とりあえずこんな感じでしょうか。
AMPのカスタマイズで参考にしたのは、以下のサイトです。ありがとうございます。
wordpress AMP Pluginは入れただけではダメ。functions.phpにフィルター追記を忘れずに | pictron web planning ピクトロン・ウェブプランニング
WordPress AMPプラグインをいろいろ改造してみる – ねんでぶろぐ
「ＡＭＰ」ページ運用で分かったこと
「ＡＭＰ」の自動広告タグはすぐ表示されない
Googleアドセンスが推奨しているAMP用自動広告タグですが、広告が表示されるまでかなり時間がかかります。
当ブログの場合、2018年12月24日に設置して、表示されるようになったのは2019年1月4日。約2週間もかかりました。
これでは収益減少も仕方ないですね。
「ＡＭＰ」化してすぐはアクセス減だが、画像サイズを変えると変化が
AMP化してすぐはアクセスが減少します。
そしてサーチコンソールでは「構造化データエラー」がでるように。
構造化データとは、サーチエンジン側にどんな内容が書かれているのかを明確にしてあげるものだと思ってください。
Googleでは構造化データでそのページに使われている画像を確認しています。
そしてその画像サイズにも制限があるのです。
幅1200px以上で、アスペクト比は16：9、4：3、1：1のどれかで、解像度画像は80万以上。
サイズでいうと、1200×675、1200×900、1200×1200ですね。
これ以上でないと構造化データエラーとなります。
参考）AMP警告「推奨サイズより大きい画像を指定してください」が出たので対応する | カオスボーイ・トーキョー
アイキャッチの画像サイズを適切なものに変えたらそれなりに上がってきました。
アクセスは増えてきたが、アドセンス広告収入は減少ぎみ…原因は？
アクセス自体は少しではありますが、増加傾向になりました。
しかし、アドセンス収入自体はかなりの減少傾向に。
AMP用のアドセンスタグを設置し、元ページと変わらないレベルの広告量になっているのにもかかわらず、です。
調べてみたところ、AMPでの本文表示が速すぎて、広告そのものの表示が間に合っていない、というのが原因のようです。
実際にページを観ていると、本文は表示されてるけど、広告が表示されるらしい場所は空白。
本文は表示されてますから、そのままスクロールしてもユーザーに問題はなく、結果広告を見てもらえていない、というわけです。
2019年４月半ばくらいからは少し回復しはじめています。もう少し様子をみてみたいと思います。
見出しのＡＭＰが全角なのは、目次用プラグインがバグるのを防ぐため
当サイトではSEOにも有利だと言われている目次用プラグイン「Table of Contents Plus（TOC+）」を導入しています。
本文の冒頭に目次ができる奴ですね。
これは見出しの文言に合わせてアンカータグを自動生成してくれるのですが、見出しに英数字があるとそのままアンカータグに使用されてしまいます。
なにも考えずに見出しにAMPと入れてしまうと、i-amp といったアンカー用IDが追加されてしまいます。
AMPページではampと入るタグで使えるものが決まっており、不適切なタグがあるとエラーになってしまいます。
CSSでも、amp-imgに対して指定するということができません。これもエラーになります。
「ＡＭＰ」の運用は慎重に
表示速度が上がるのでとてもいいなと思うのですが、現段階では収益増加を期待して入れると、本末転倒のような気がしています。
先日行われた「AMP Conf 2019」ではGoogle Adsの12%がAmpHTMLになっているということも話されていて、今後は広告のほうも追いついてくるのかなぁという印象です。
ライブ配信でちょこちょこ聴いていたのですが、amp-scriptやamp-storyなど、面白そうなものも準備しているようなので、情報として追っていこうと思います。
仕事のほうではAMPを辞めるという決定に至ったのですが、個人的にはこのサイトのAMPはこのままにしておこうと思います。
