アドセンスのページを毎日チェックするのですが、そのたびに目につく最適化のススメ。最近記事を書くこともあまりないし、試しにやってみようかなぁと思いました。
何をすればいいのかネットを検索したものの、わからない事もあり試行錯誤。
違うサイトで設定するときのために、忘れないように書いておこうと思います。
CocoonサイトAMP化の概要は目次の通り。それでは順番に書いていきます。
目次
１．AdsenseでAMP化対応の広告を作成
私は、ブログに記事内広告を使っていました。今回、AMP対応のディスプレイ広告に作り直します。
GoogleAdsenseサイトの「広告」⇒「サマリー」をクリック
「広告ユニットごと」のタブをクリック
記事内に表示するので「スクエア」を選びました。ここはお好みで。
広告サイズは「レスポンシブ」を選びました。 サイズを自動調整してくれるので便利です。 あとは「広告ユニットの名前を入力」に広告名をつけて右下の「作成」ボタンを押す。
コードが表示されます。このコードをCocoonの設定欄に貼り付けていきます。
AMP化は「HTML」タブのコード、「AMP」のコードの両方を貼り付けます。
①HTMLのコード
②AMPのコード
２．Cocoonの広告コード設定に貼り付け
ショートコードを入れた時の広告表示などに使う広告コードを設定していきます。
Cocoon設定⇒「広告」のタブをクリック。
先ほどAdsenseで作った広告コードを貼り付けます。
おさらいですが、①と②は先ほど作成した以下のコードです。①がすでに貼り付けてある場合は、②を追加してはりつけるだけでOKです。
①のHTMLコード
②のAMPコード
３．ウィジェットのコード設定に貼り付け
先ほどやった、Cocoon設定の「広告」の設定と同じ要領で、ウィジェットに設定した広告コードも置き換えていきます。
ダッシュボードの「外観」⇒「ウィジェット」を選択。
こんな感じで、広告コードが入っているウィジェットの内容を書き換えます。
またまたおさらいですが、①と②は先ほどAdsenseで作成した以下のコードです。
①のHTMLコード
②のAMPコード
注意！カスタムHTMLを使うと広告がカラムをはみ出してしまう！
「カスタムHTML」にAMPの広告コードを貼り付けると、PCでAMPページ見るとこんな風に広告がはみ出てしまいます。そんなときは「[C]広告」のウィジェットに変えましょう。カラム内に収まります。
４．CocoonのAMP機能を有効化
Cocoon設定の「AMP」タブをクリック。AMP設定画面で「AMP機能を有効にする」にチェックを入れて設定を保存します。
５．問い合わせフォームをAMPページにしない設定
SearchConsoleを見てみると、ブログのAMP生成に一件NGがあると表示されていました。
私は、問い合わせに Contact Form 7 というプラグインで作成したフォームをつかっています。そのページがだめっぽい。
ダッシュボードの「固定ページ」から問い合わせフォームページの設定をひらく。
以下の通りチェックを入れます。
以上で設定終わりです。
これで、AMPのページとして見れるようになりました。もしかしたら無駄な設定しているかもしれませんが、とりあえずちゃんと見られるしいいか！
AMPのページを見るには ”通常のURL/?amp=1″ で見られます。
コメント