アドセンスのページを毎日チェックするのですが、そのたびに目につく最適化のススメ。最近記事を書くこともあまりないし、試しにやってみようかなぁと思いました。
何をすればいいのかネットを検索したものの、わからない事もあり試行錯誤。
違うサイトで設定するときのために、忘れないように書いておこうと思います。
CocoonサイトAMP化の概要は目次の通り。それでは順番に書いていきます。
目次
1.AdsenseでAMP化対応の広告を作成
私は、ブログに記事内広告を使っていました。今回、AMP対応のディスプレイ広告に作り直します。

GoogleAdsenseサイトの「広告」⇒「サマリー」をクリック

「広告ユニットごと」のタブをクリック

記事内に表示するので「スクエア」を選びました。ここはお好みで。
広告サイズは「レスポンシブ」を選びました。 サイズを自動調整してくれるので便利です。 あとは「広告ユニットの名前を入力」に広告名をつけて右下の「作成」ボタンを押す。

コードが表示されます。このコードをCocoonの設定欄に貼り付けていきます。
AMP化は「HTML」タブのコード、「AMP」のコードの両方を貼り付けます。
①HTMLのコード

②AMPのコード

2.Cocoonの広告コード設定に貼り付け
ショートコードを入れた時の広告表示などに使う広告コードを設定していきます。
Cocoon設定⇒「広告」のタブをクリック。


先ほどAdsenseで作った広告コードを貼り付けます。

おさらいですが、①と②は先ほど作成した以下のコードです。①がすでに貼り付けてある場合は、②を追加してはりつけるだけでOKです。
①のHTMLコード

②のAMPコード

3.ウィジェットのコード設定に貼り付け
先ほどやった、Cocoon設定の「広告」の設定と同じ要領で、ウィジェットに設定した広告コードも置き換えていきます。
ダッシュボードの「外観」⇒「ウィジェット」を選択。

こんな感じで、広告コードが入っているウィジェットの内容を書き換えます。

またまたおさらいですが、①と②は先ほどAdsenseで作成した以下のコードです。
①のHTMLコード

②のAMPコード

注意!カスタムHTMLを使うと広告がカラムをはみ出してしまう!
「カスタムHTML」にAMPの広告コードを貼り付けると、PCでAMPページ見るとこんな風に広告がはみ出てしまいます。そんなときは「[C]広告」のウィジェットに変えましょう。カラム内に収まります。

4.CocoonのAMP機能を有効化
Cocoon設定の「AMP」タブをクリック。AMP設定画面で「AMP機能を有効にする」にチェックを入れて設定を保存します。


5.問い合わせフォームをAMPページにしない設定
SearchConsoleを見てみると、ブログのAMP生成に一件NGがあると表示されていました。
私は、問い合わせに Contact Form 7 というプラグインで作成したフォームをつかっています。そのページがだめっぽい。
ダッシュボードの「固定ページ」から問い合わせフォームページの設定をひらく。
以下の通りチェックを入れます。

以上で設定終わりです。
これで、AMPのページとして見れるようになりました。もしかしたら無駄な設定しているかもしれませんが、とりあえずちゃんと見られるしいいか!
AMPのページを見るには ”通常のURL/?amp=1″ で見られます。
コメント