ワードプレスのテーマをCocoonに変更
Simplicity2からCocoonへ
私は昨年の夏からブログをワードプレスで運営しており、テーマはSimplicity2を使ってきました。
無料なのにシンプル、且つとても高機能。
開発・公開して下さったわいひらさんありがとうございました。
そのわいひらさんが後継テーマとなるCocoonを今年公開。
更に高機能なうえ引き続き無料！
重ね重ねになりますが、わいひらさんありがとうございました。
Search Consoleからの警告メールにビビる
Cocoonに変えた翌日、Google Search Consoleから警告メールを受信。
題名は「モバイルユーザビリティの問題が検出されました」です。
何とも物々しい…
直ぐに対応し合格したので良かったのですが、Search Consoleからの警告メールにはいつもビビります…
ブログをAMP対応
AMPとは？
CocoonのAMP対応のページから引用。
AMP(Accelerated Mobile Pages)はGoogleが中心となって立ち上げたモバイルでのウエブサイト閲覧を高速化することを目的とするオープンプロジェクト。
近年はサイト閲覧などがPC経由からモバイル経由に移行しつつあります。
そのモバイルでも高速・快適に閲覧できるようにするプロジェクト。
Googleの検索結果でもモバイル対応が必須でモバイルフレンドリーなサイト運営が求められています。
AMPもその一環。
対応しているサイトの場合、モバイルで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用も②と同じ。
但し②と③は排他表示する必要があります。
やり方は上記の図をご参照。
広告ウイジェット下部の「表示設定」を利用します。
②の場合、表示設定をクリック後現れる箇所でページを選び、更に最下部にあるAMPページをチェック。
ウイジェットの表示が「チェック・入力したページで非表示」を確認し保存⇒完了。
これでモバイル表示でもAMPページでは広告は表示されません。
一方で③のAMP用は「非表示⇒表示」にすればO.K.
但しそもそも問題なのはAMP用広告に通常の広告コードを使えないこと。
そのためコードの修正が必要になります。
コードのひな型や作成方法などはAdSendseヘルプの「AMP対応広告ユニットの作成方法」を参考にします。
リンクユニットや関連コンテンツも同様にコードを修正して設置。
グーグルカスタム検索だけは私のスキルでは難しく、AMPページで非表示にしています…
入力ページをAMP除外
入力フォーマットがあるページをAMP化しようとすると、エラーが出ることがあるらしい…
そこで問い合わせページ作成画面で「AMPページを生成しない」にチェックを入れておきます。
AMP有効化を確認
結果をGoogleのページで確認。
投稿ページの一つで試してみます。
なおAMPページは通常のURLに「?amp=1」が追加されます。
無事にAMP化されました！
時間の経過とともに、Googleの検索結果ページにも稲妻マークがついたAMP化サイトが徐々に掲載されるはず。
私はGoogle任せの自動広告、Cocoon任せの自動広告をやっていないので以上です。
PageSpeed Insightsの数値はAMPページで60台。
まだまだ物足りませんが30前後からは大きく改善！
悪夢の始まりはSearch Consoleからの警告メール
しかしこれだけでは終わりませんでした。
AMP化したら早速翌日にGoogle Search Consoleから警告メールが…
詳細は次回ご紹介します。
