1万円台の激安ロボット掃除機に大満足

ワードプレスのブログをAMP化~Cocoonなら簡単だがアドセンス対応が面倒

blogg

ワードプレスのテーマをCocoonに変更

Simplicity2からCocoonへ

私は昨年の夏からブログをワードプレスで運営しており、テーマはSimplicity2を使ってきました。
無料なのにシンプル、且つとても高機能。
開発・公開して下さったわいひらさんありがとうございました。

そして、そのわいひらさんが後継テーマとなるCocoonを今年公開。
更に高機能なうえ引き続き無料!
重ね重ねになりますが、わいひらさんありがとうございました。

Search Consoleからの警告メールにビビる

Cocoonに変えた翌日、Google Search Consoleから警告メールを受信。
題名は「モバイルユーザビリティの問題が検出されました」です。
何とも物々しい…

Search Consoleからモバイルユーザビリティの問題が検出されましたにビビった
ワードプレスのテーマをCocoonに変更した翌日、サーチコンソールからモバイルユーザビリティの問題検出との物々しいメールを受領しビビった。いくつか対策して二日後には審査に合格し一安心。つまらないことでケチが付かないように今後も気を付けよう!

直ぐに対応し合格したので良かったのですが、Search Consoleからの警告メールにはいつもビビります…

Google Search Consoleで「致命的なマルウエアが検出」の表示にビビった
google search consoleで、「プロパティの健全性に重大な問題が発見されました」の表示を発見。原因を探ると、どうやらワードプレスのプラグイン「BackWPup」のよう。再審査を依頼するとあっさり完了し、力が抜けた...

ブログをAMP対応

AMPとは?

CocoonのAMP対応のページから引用。

AMP(Accelerated Mobile Pages)はGoogleが中心となって立ち上げたモバイルでのウエブサイト閲覧を高速化することを目的とするオープンプロジェクト。

近年はサイト閲覧などがPC経由からモバイル経由に移行しつつあります。
そのモバイルでも高速・快適に閲覧できるようにするプロジェクト。
Googleの検索結果でもモバイル対応が必須でモバイルフレンドリーなサイト運営が求められています。
AMPもその一環。

thunder

対応しているサイトの場合、モバイルでGoogle検索をした際に記事タイトル下のURLの前に、上記の様な稲妻マークがあるので一目瞭然。
なお「AMPはモバイル向けの表示形式」のため、PCでの表示はこれまで通り。

また、AMPは表示を高速化するためかなり厳しい規制があります。
重くて表示を遅くするJavaスクリプトなどがあると、AMPページとして認識されないことがあります。
AMP対応していないプラグインなども。

ブログ村のJavaスクリプトパーツなどは駄目の様です…
Javaスクリプトではないパーツもあり私も貼っていますが、AMPページはキャッシュから読み込むためPVポイントに反映されないかも…
最近、ブログ村のPVポイントが減少してきているのはそのためかも…

AMP対応を決心した理由はサイト表示の高速化

情報収集してみるといろいろと面倒らしいので、当面は回避しようと考えていました。
しかし、Googleによる基準変更によりサイト表示サイトのPageSpeed Insightsのモバイル評点が急激に悪化。
いろいろと対策しても30程度になってしまいました…
PCでは90点台なのですけど…

そこで、やむを得ず急遽対応を決心!

CocoonでのAMP有効化手順

PCやPC言語の知識が乏しいと対応はほぼ不可能ですが、Cocoonでは何と設定画面内にある1か所のチェックボックスにチェックを入れるだけで完了するのです。

マジですか?

Cocoon設定⇒AMP⇒AMPの有効化⇒AMP機能を有効化するのチェックボックスにチェックを入れ保存・更新するだけ。
ホントにこれだけです。
チョー簡単。
なお、CocoonのAMP化機能では投稿ページ・固定ページのみがAMP化されます。

CocoonでのAMP化詳細に関しては、Cocoonの紹介ページをご参照ください。

その他必要な対応

Google Analytics

AMP化すると、サイト解析のAnalyticsを利用するためにGoogleタグマネージャーの設定が必要になります。
トラッキングIDを取得⇒AMP用コンテナを作成したりといろいろと面倒。

但し、やり方はCocoon紹介サイトに詳細に掲載されているので、手順を間違えなければ大丈夫でしょう。

アドセンスのコード修正

私はブログにアドセンス広告を掲載しています。
その際必要なのがアドセンスの広告コードを埋め込むこと。
そして、AMPのページでは通常のアドセンスコードを使用できず、修正したコードと差し替える必要があります。
差し替えなくてもいいですが、その場合AMPページではアドセンス広告が表示されません…

そのため例えば同じ場所に広告を掲載する際には、通常サイト用とAMPサイト用の両方を設置。
更に、私の場合はアドセンス収益等の解析用にPCとモバイルでコードを分けているので、
PC用、通常のモバイル用、モバイルのAMP用
の3種類を設置する必要があり、それぞれ排他利用する形になります。

のPC用はウイジェットの広告(PC用)を使います。
のモバイル用は、同じく広告(モバイル用)。
のモバイルAMP用もと同じ。

hyouji

但し、は排他表示する必要があります。
やり方は上記の図をご参照。
広告ウイジェット下部の「表示設定」を利用します。

の場合、表示設定をクリック後現れる箇所でページを選び、更に最下部にあるAMPページをチェック。
ウイジェットの表示が「チェック・入力したページで非表示」を確認し保存⇒完了。
これで、モバイル表示でもAMPページでは広告は表示されません。
一方、のAMP用は「非表示⇒表示」にすればO.K.

但し、そもそも問題なのはAMP用広告に通常の広告コードを使えないこと。
そのため、コードの修正が必要になります。
コードのひな型や作成方法などはAdSendseヘルプの「AMP対応広告ユニットの作成方法」を参考にします。
リンクユニットや関連コンテンツも同様にコードを修正して設置。
グーグルカスタム検索だけは私のスキルでは難しく、AMPページで非表示にしています…

スポンサーリンク

入力ページをAMP除外

入力フォーマットがあるページをAMP化しようとすると、エラーが出ることがあるらしい…
そこで、問い合わせページ作成画面で「AMPページを生成しない」にチェックを入れておきます。

AMP有効化を確認

結果をGoogleのページで確認。
投稿ページの一つで試してみます。
なお、AMPページは通常のURLに「?amp=1」が追加されます。

ampkakunin

無事にAMP化されました!
時間の経過とともに、Googleの検索結果ページにも稲妻マークがついたAMP化サイトが徐々に掲載されるはず。

私はGoogle任せの自動広告、Cocoon任せの自動広告をやっていないので以上です。
PageSpeed Insightsの数値はAMPページで60台。
まだまだ物足りませんが、30前後からは大きく改善!

悪夢の始まりはSearch Consoleからの警告メール

しかし、これだけでは終わりませんでした。
AMP化したら早速翌日にGoogle Search Consoleから警告メールが…
詳細は次回ご紹介します。

必須属性srcがタグamp-imgに無い~ブログをAMP化したら検索結果から除外
ブログ表示速度評価の急激な悪化を受けAMP化を実施。しかし、数日後サーチコンソールから警告メール受信。対策を実施するも、今度はガイドライン違反と検索結果掲載対象外とのメール受信。AMPは色々と制約が厳しいのですぐに移行しなくてもいいかも。