CocoonブログでAMP化対応設定のためにやったこと

アドセンスのページを毎日チェックするのですが、そのたびに目につく最適化のススメ。最近記事を書くこともあまりないし、試しにやってみようかなぁと思いました。

何をすればいいのかネットを検索したものの、わからない事もあり試行錯誤。

違うサイトで設定するときのために、忘れないように書いておこうと思います。

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″ で見られます。

コメント

タイトルとURLをコピーしました