【 本記事のターゲット 】
- ブログをAMP化したい
- AMP化後はブログが崩れる？選定テーマやAdsense広告表示などが気になる
- SEO効果はある？PV数の変動を知りたい
先週の土曜・日曜日の全てと今週の月・火曜日の夜の時間をこのために費やしたといっても過言ではないくらい...
ついに当ブログをAMP化してしました。AMPとは「Accelerated Mobile Pages」の略ですね。モバイル端末でWebページを高速表示するため仕組みです。
このAMP、おそらくGoogle Adsenseをされている方は一度は目にした事があるかと思います。
Googleからしつこく「サイトをAMP化しましょう♪」みたいなメッセージが何度も管理画面に出てくるので...
しかしこのAMP化、そんなに手軽にできるものでもありません。
そして4日間経過した今でも正常に表示出来ていない部分多数...まぁ致命的な部分はなんとか解消出来た...
という事で、ブログをAMP化した際にどんな事が発生するのか、これからAMP化を検討している方向けに諸々ご紹介してみたいと思います。
目次
そもそもAMPとは何か？
GoogleやTwitterが推奨しているオープンソースプロジェクト
AMP（Accelerated Mobile Pages）ですが、Google・Twitterが共同開発しているモバイル端末・スマホでWebページを高速表示するためのPJ、
スマホでGoogle検索している時に、URLの前に雷マークが表示されているページを見た事があるかと思います。
そのサイトがAMP化しているWebページとなり、通常と比べて圧倒的な速さで表示する事が可能となります。
ちなみにPCで検索した際には通常のURLが表示されます。
強引に/ampを入れる事で見る事はできますが、あくまでもスマホ・モバイル向けに高速表示するための仕組みになります。
2018年7月にモバイル表示速度がSEO要素に加わる（スピードアップデート）
少し話がずれますが、先日Google が検索のランキング要素としてスピードアップデートを提供しました。
もともとGoogleは、アクセスしたウェブページが低速であると多くのユーザーはそのページの閲覧をやめてしまうというデータを保持しています。
多くの閲覧者がページ表示が遅いと離脱し、高速で表示できることは制作側にとっても有益という目線から提供されたSEO要素になります。
以前までデスクトップ検索エンジンにはランキングシグナルとして提供されていましたが、今回はモバイル向けに提供開始となった模様。
とはいえ、「ユーザーに本当に遅い体験を提供しているようなページについてのみ影響し、ごくわずかな割合のクエリにしか影響しません。」と記載があるように、現時点では一部のページ表記が遅いウェブのみが影響を受けるとの事。
2018年8月、PV数が急激に減少...これはそろそろAMP化か？
そして先日Googleがコアアップデートが提供されました。なんだか当ブログでもPV数の影響を結構受けており、だいたい20%以上いつもよりPV数をロスしているような...
AMP化はそんなに関係ないとは思いますが、モバイル表示の高速化はいずれどこかでしなければいけない＆結局表示速度という観点からいうとSEOにも関わってくると思っていたので、丁度いいきっかけという事で2018年8月にAMP化してみる事に。
AMP化する前にブログテーマが対応しているかどうか調査すべし
STINGER 8を利用、AMP for WPプラグインをインストールし、AMP化してみると...
当ブログは2017年1月から開始、WordPressでテーマはSTINGER 8を利用していました。
それから約1年半...おそらく今回のAMP化は今まででブログをやってきて一番大きい変化だったかと思います。
AMPするだけであればめちゃくちゃ簡単です。WordPressのプラグインにある「AMP for WP」というプラグインをインストールしてAMP化を有効にするだけです。
が...これをするには必ずサイトのバックアップを取得してから実施するようにしましょう。
当ブログをAMP化したあとは...それはもう悲惨な状態に..どんな状態になったか後ほど記載してみたいと思います。
AMP化は慎重に...まずは利用中のテーマがAMPに対応しているかどうか調査
最初に言っておきますが、いきなりブログをAMP化するなんて危険な行動は絶対にしないようにしましょう。
とはいってもmog自身は多分なんとかなるだろうと思ってAMP化してしましたたが...
最低限今利用しているテーマがAMPに対応しているかどうかくらいは調べておきましょう。
実際STINGER 8はAMPに対応しておらず...そのままの状態でプラグインを使ってAMP化したところ、あまりにも悲惨な状態になったので一旦AMP非対応に設定を戻し、プラグインも削除...
そしてなんだかPV数がガタ落ち...同じような思いをする事になりますよ。
という事で、下記にAMP化した際に発生した問題点をピックアップしてみたいと思います。
これに耐え切れる＆対応できるという自身がある方は是非AMP化を実施してみましょう。
AMP化後の問題点その1：デザイン総崩れ
H2見出しはなぜか白フォントで見えず...フォントや段落もおかしい
AMP化した後、まずはAMPサイトとしてちゃんと見えるかどうか確認。
パーマリンクの最後に「/amp」を追加してスマホでみてみましょう。この記事のURLをベースにすると下記のような感じ
- AMP非対応URL：https://inakadaisuki.com/blog_amp/
- AMP対応URL：https://inakadaisuki.com/blog_amp/amp
がしかし...AMP対応URLは直ぐに開けたのですが、それはもう見るも無残...
今でも思い出したくないデザイン・レイアウトとなっていました...本当に頭が真っ白（汗）。
ブログがぶっ飛んだかと思いました。
AMP対応テーマ「AFFINGER 5」に変更
なぜそうなったか...というところを直ぐに調べていたところ...
先ほども記載しましたが、そもそも今利用していたWordPressテーマ「STINGER 8」がAMP対応していないという事が判明...
急遽AMP対応しているテーマを調査。
他にも色々いいものがあったと思いますが、STINGER をベースとした有料テーマ「AFFINGER 5」がAMPに標準で対応している＆作りはSTINGERとほぼ一緒という事で、移行する際に多少なりともリスクを減らせるかなと思い...
少々高かったですがサクッと14800円ポチッとして有料テーマを導入♪
とりあえず文章のメインは問題なく表示されるようになりました。
AMP化後の問題点その2：目次が表示されない
Table of Contents Plusプラグインを利用していたが、AMPサイトはなぜか非表示
ブログ投稿記事の最初に目次を表示する人が多いかと。
そしてそれを実現するために「Table of Contents Plus」を使っている人多数いらっしゃいますよね。mog自身もそうでした。
が、AMP化した後のサイトには一切表示されない...コードが飛んだ？ampのテーマ編集が必要なのかな。
少し調べて見ると、基本表示だけならされるらしいですのですが、当ブログの場合はAMPサイトではなぜか非表示...プラグインの再インストールで表示されるのかな...
CSSの読み込み非対応、コード記載する事で対応出来そうだが...
と色々思ったのですが、そもそもTable of Contents PlusのCSSには対応しておらず、表示出来ても装飾などは全て剥がれた状態になります。
Table of Contents PlusのCSS読み込みはページ表示速度にも影響があるので、今回せっかくAMP化したので現時点では非表示のまま進める事に。
あった方が便利だとは思いますが、ページ表示を最優先にします。
AMP化後の問題点その3：Googleマップが表示されない
AMPではJavaScriptを利用出来ない＝Google マップの地図の埋め込みは非対応
こちらは結構有名な話で、AMPではJavaScriptが利用出来ません。
当サイトはキャンプや旅行といった記事が多く、どこに行ったかという話をするときにGoogle マップの地図の埋め込みを掲載していたのですが、当然全て非掲載となりました...
Google Maps Embed APIのAPI Keyを使って表示出来そうだが...AMPの本来の主旨を考える
Google マップに関しては、JavaScriptを利用する以外に諸々対応策はあるようですが...
こちらも今回のAMP化の主旨を考えて、Google マップは非掲載＆住所とクリックすればGoogle マップに遷移するように設定変更。
そもそもページに来てくれた方全員Google マップが必要だとは考えづらいし、埋め込んでグリグリ動かす＝ページ速度が落ちるという事に繋がるのはいやだったので...
AMP化後の問題点その4：Google Adsenseが表示されない....
今まで掲載していたGoogle Adsenseの広告は全て非表示...
まぁこれはある程度想定していたのですが、当ブログでもメインで利用しているGoogle Adsenseの広告が全てぶっ飛びました...泣。
AMP自動広告（<head>タグ内と<body>直下）の設定など試して見たのですが、二日経った今でも全く反応なし...設定箇所間違っているのかな...
ヘッダー、記事中、記事下のAdsense掲載はOK♪
さすがにこれはAMP化したからといって諦める事は出来ず...諸々頑張りました。
主に土日二日間これに費やしたといっても過言ではないです（汗）。
mog個人的には、従来通り記事が始まる一番上（タイトル下）と記事文面中、そして記事下にAdsenseの広告を配置したかったので、「記事上」と「記事下」には自動配置できるようにテーマを編集、記事中は既存の記事内広告の絡みもあるので、面倒ですが手動で設定...
通常のレスポンシブタイプ、記事内広告、関連コンテンツ、リンクユニットなどは全てOKです。設定方法は長くなるので、下記別記事にまとめましたので良ければ参照してみてください。
AMP化後の問題点その5：アナリティクスのPV数カウントがカウントされない
AMP化後はモバイル検索時URLの語尾に「/amp」が追加される
これは1日たった後に気づきました...Google Analyticsをみていると、1時間置きに明らかにPV数が減っている...泣。
あぁ、当ブログもこれまでか...と思っていたら、どうもampサイトがカウントされていないという事に気づきました。
それはそうです、amp化すると、URLも語尾に「/amp」とついて別カウントになりますので...
AFFINGER 5の場合は設定メニューから、ダブルカウントに気をつけよう
という事で、これはAFFINGER 5の場合ですが、下記「AFFINGER 5 管理」の中にある「Google 連携に関する設定」からアナリティクスのトラッキングIDを入れる事が可能です。
がここで注意。上記はすでに設定してしまっているので表示されていないですが、設定前は
- アナリティクスコード
- ampのアナリティクスコード
と2箇所設定する箇所があります。
これ、両方トラッキングIDを入れてしまうと...今カウントしている通常のURL分まで再度カウントしてしまう事になり、アナリティクスで急激にPV数が増えるといった自体に陥ります。
mog自身がそうなったので...完全にぬか喜びでしたが...苦笑。
なので通常のURLトラッキングはみなさん設定されていると思うので、今回はamp部分のトラッキングのみ設定するようにしましょう。
その他、AMP化後に気になった点を少し紹介
AMP化後1日でかなりの数の記事がAMPとして検索エンジンに登録・表示
AMP化後どのくらいでGoogle の検索エンジン（もちろんYahooやBingなども...）に登録されるのか...という部分も気になるところかと。
当ブログの場合、2018年8月4日にAMP化したのですが、本記事を記載している2018年8月7日時点でかなりの数のURLが/ampからのアクセスとなっています。
ほぼAMPサイトとして登録は完了したんじゃないかなと...
なので問題なければ2日・3日というところでしょうか。こちらからインデックス登録などは一切行なっていません。自動で登録されます。
検索エンジンに掲載されない → AMPテストでエラーになっているか確認
が、中には登録されていないURLがあるのも確かです。下記Googleが提供しているAMPサイトに適応しているかどうかテストができるURLになるのですが...
こちらのサイトに自身のブログのURL（もちろん/ampとして）を入れて調査実施してみると...
上記のようなエラー表示が出た場合、AMPサイトとして検索エンジンに登録されない場合などがあるようです。
ソースコードを元に、どの部分が適していないのかを見る事ができるので、それを見ながら対応する感じになります...
ちなみに、当ブログはまだ結構このエラーが残っていて、順次対応中...数が多すぎて一気に対応は無理です（汗）。
その他動画・YouTube・Amazonアフィリエイトなど色々問題点山積み...
という事で、現時点も日々AMPエラーと奮闘している最中です。
動画やYouTubeの埋め込み、Google Adsense以外のアフィ（Amazonとか）など諸々エラー発生中です。
まずはGoogle マップとGoogle Adsenseを修正するだけで手一杯...500記事以上あるので...まぁ1ヶ月くらい時間かけて順次修正していきたいと思います。
気になるPV数は...うーん、まだ1週間たっていないのでなんとも...気持ち増えたような気もします。
が誤差の範囲のような気もする（苦笑）。他のブログ等でPV数が増えた！！とかありますが、当ブログはほとんど変わらずです。
まぁGoogleも告知している通り、現時点ではそこまでSEOシグナルとしては現時点では有効ではないみたいですね。
ただ「ページ表示が遅い際に離脱する閲覧者の数を減らす＝結果ブログを見てもらう人を増やす」という目線であれば効果はあるはずなので、しばらくこの状態で様子を見ていきたいと思います。
TIPS：YouTubeでもブログノウハウを解説しています。良ければ合わせて見てみて下さい（内容が良いと思ったら、是非チャンネル登録もお願いします♪）
最後に
今回はブログをAMP化したらどんな問題が発生するか...といった部分を、当ブログの体験を元にご紹介しました。
いやほんと、気軽にAMP化はしちゃダメですよ...AMP化後に自分のブログを見ると愕然としてやる気・モチベーションも一気にダウンします。
が、Google が推奨している以上、どこかで対応していた方がよさそうです。基本はテキスト＆画像でブログを構成できるくらいシンプルに持って行って、高速でモバイル表示する...というのが良いのかと。
もちろん、コテコテのブログ・Webも必要ですよ。mog自身もFlashで動くゲームサイト「アイズメイズとか...」とか好きですし♪
あくまでモバイルの高速表示を目指す＆機能限定版に特化しても問題ないサイトの場合はAMP化を検討してみてもいいんじゃないでしょうか。