WordPressテーマをCocoonに変更して、いろいろ苦労した備忘録

続いて、Cocoonテーマに変更して一番苦労したGoogleアドセンス広告のタグ貼り付けについて綴っていきます。
中でも自動広告はまだ表示されないところが多いので、未解決部分が多いです。
以下、個人的な推測が多いです。

Googleアドセンス広告の表示チェック

Cocoonの場合、アドセンス広告タグの貼り付けがちょっと特殊です。
基本、自動で広告タグを挿入してくれるのですが、自動広告タグとマニュアル広告を共存させる場合にはいろいろ注意しなければならないのです。
そして、自動広告は表示されないという問題に悩まされました。

広告を表示させることについて持論

広告表示は読者ユーザーの方々にとってはウザいと思います。
ですが、広告収入は私の様な貧乏人には不可欠なのです。
一般的な会社員給与に比べたら、月々数千円という中学生のお小遣い程度の微々たる金額ですが、それでもこのブログの運営費に充てることができるので欠かせません。

ブログを始める前は自分自身も広告ってウザいなと思っていて、可能な限り広告表示をしないようにしていました。
しかし、いざ自分が情報を発信する側になってこのブログを運営してみると、広告収入はその発信者および制作者を少なからず助けてくれるんですね。今となってはとても有難いことです。

著名な研究者がYouTubeで広告収入を得ていたり、無名なアーティストがブログで広告収入を得たりしているのを多々見受けられますが、広告収入があるからこそ発信を続けられて活動資金を得られていると思います。
ですから、最近、私は発信者や制作者を助けるためにも広告表示した方が良いと思うようになりましたね。そういう観点からネットサーフィンすると、広告表示もウザく無くなってくるもんです。

ただ、アクセスを稼ぐためだけに内容の薄い記事を量産するようなサイトはいただけません。
自分の記事もそういう類と思われても仕方ありません。
というのも、もっと沢山稼ぎたいという欲が変な方向へ行ってしまうのもわからないではありません。
生活が苦しいと、少しでも稼ぎたいという思いから、そういう方向へ行ってしまうのもよくわかります。
私も家計は苦しいので、そういう方向へ陥らないように気を付けていきたいです。

さて、前置きはこれくらいにして、Cocoonテーマに変更した時のアドセンス広告の対処を説明していきたいと思います。

Cocoonの広告設定はマニュアル広告のみにするか、または広告を非表示設定にして、独自に広告タグを貼り付けた方が良い

私の場合は自動広告とマニュアル広告を併用したかったので、かなり苦労しました。

まず、Cocoon設定→「広告」→「アドセンス設定」→「アドセンス表示方式」のところで、「アドセンス自動広告のみ利用」を選択しても、固定ページだけ広告が表示されましたが、投稿ページが全く表示されなかったのです。
自動広告だけにしてしまうと、サイトのHTML構造に問題があると一切表示されなくなるし、逆にとんでもないところに表示されたりするので、よろしくありません。

マニュアル広告はサイトの構造に多少問題があっても比較的広告は表示されるし、マニュアル広告がある場所付近には自動広告は表示されないので、私の場合はマニュアル広告と自動広告を併用するようにしています。

併用するには、Cocoon設定→「広告」→「アドセンス設定」→「アドセンス表示方式」のところで「マニュアル広告設定」を選択して、あとはアドセンスサイト側で自動広告をONにすればよいわけです。
あとは、後ほど紹介するように、子テーマのhead-insert.phpに自動広告コードを貼ればOKです。

または、アドセンス広告を全て非表示設定にして、自前でカスタマイズして広告コードを貼り付けても良いと思います。
ただ、その場合は、ウィジェットでショートコードが使えなくなるので要注意です。

また、Cocoonのマニュアル通りの広告表示設定だと、ブラウザでサイトのソースコードを見ると、フッター付近に余分な広告タグが出現していることがあります。
これは関連コンテンツコードの貼り付けが原因だったのですが、後で詳しく述べます。

自動広告コードは、子テーマのhead-insert.phpに貼り付けた

ヘッダに貼り付けるアドセンス自動広告コードは、私の場合は子テーマのhead-insert.phpに貼り付けました。

また別の方法としては、Cocoon設定→「アクセス解析・認証」→「その他のアクセス解析・認証コード設定」→「ヘッド用コード」に入力しても良いと思います。

Cocoon設定→「広告」の「広告コード」欄にディスプレイ広告ユニットタグを貼り付けておくこと

先のAMPページの広告の節でも述べましたが、AMPページの自動広告タグを有効にするためには、Cocoonテーマの場合はちょっと特殊なことをします。

Cocoon設定→「広告」のところで、必要なチェックを入れたら、Cocoon設定→「広告」→「アドセンス設定」→「広告コード」の所にアドセンスの通常ディスプレイ広告ユニットタグを貼り付けておかねばなりません。
どうやらそのタグからID等の文字列を抽出して、AMP広告コードのIDに自動入力している様なのです。
広告タグはディスプレイ広告であればどれでも良いので、１つ貼り付けておくというところがミソです。

全画面広告はやっぱりやめた

以前、Googleがかなり積極的に全画面広告を勧めて来て、ユーザーエクスペリエンスにも影響が少ないと言っていたので、私はそれに従って全画面広告を表示させていた時期があります。

でも、私自身、他のサイトの全画面広告を見ていてもあまりにもウザかったので、やめることにしました。
最近はニュースサイトなどのページ分割（ページネーション）で取り入れているところが多いですよね。個人的にはあまり良いものでは無いと思いました。

マニュアル広告設置は特に問題無し

ウィジェットにマニュアルでディスプレイ広告ユニットや関連コンテンツユニットのタグを貼り付けるのは、特に問題無く広告が表示されました。
記事内にショートコードでディスプレイ広告を表示するのも全く問題ありませんでした。

では、自動広告については項目が多いので、次の節で述べます。

アドセンス自動広告が表示されない問題

この１か月間、サイトをかなり修正してはサイトマップを頻繁に送信したりしていたので、Googleクローラ巡回と重なった可能性もあり、自動広告が一気に表示されなくなったり、徐々に一部分だけ表示されたり、コメント投稿欄に表示されたりと、いろいろ謎な動作が多かったのです。

自動広告について個人的雑感

Googleアドセンスの自動広告は、使い方によってはとんでもないところにドーンとドデカい広告が出たり、あまりにもウザい数で表示されたりするので、ユーザーの観点から見て考えると敬遠する人が多いみたいですね。
でも、私なりの見解ではメリットが多いと思いました。

自動広告のメリット

私の様な１ページが長い記事が多い場合、マニュアルで広告タグを設置するのは大変ですし、将来のメンテナンス性にも問題があります。
自動広告ならば、記事内にタグやショートコードを複数入れる必要は無く、適度に広告を自動で挿入してくれるのがメリットです。

また、マニュアル広告と組み合わせると、ある程度表示位置をコントロールできるのです。
例えば、ヘッダ部分にドーンとドデカい広告が出る場合がありますが、サイドバーのウィジェットの最上部にマニュアルでディスプレイ広告を貼っておくとヘッダ部分に広告が表示されなくなりました。

また、アドセンスサイトの自動広告編集のプレビュー画面で、嫌な場所に表示された広告を削除（10件まで）できるし、自動広告の出現数もスライダーで調整もできるので、意外と使い勝手は良いと思います。

そして何よりも自動広告はGoogleがサイトのHTMLやJavaScriptの構造をチェックして、ポリシー違反にならず、最適で効果的な位置に自動配置するので、サイト運営者側は何も気にする必要は無いのです。
次いでにサイトの構造化に不具合があれば警告通知が来るし、広告が一切表示されなくなるので、メンテナンス的に有難い存在だと思います。
少し昔の自動広告はとても使い辛かったのですが、最近は使い勝手がとても良い気がしています。

デメリット

自動広告の短所は、今回のようにWodpressテーマを変更したり、サイトに大幅な変更を加えたことによって構造化エラーが生じると、広告が全く表示されなくなることです。
しかも、一旦表示されなくなると、Googleクローラがサイトを全てチェックし終わるまでの数週間は表示されなくなることがあります。
その場合はマニュアル広告で凌ぐしかありません。

それに、読者にとっては多少はウザくなるのは仕方ないところです。

アドセンスの自動広告コードタグが変わっていた問題(2021/4/16～5/5あたり)

従来、アドセンスサイトから取得する自動広告コードは以下のコードだったはずです。

<script data-ad-client="ca-pub-xxxxxxxxxx" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

それが、2021/4/16にタグを確認すると、いつの間にか以下に変わっていました。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxx"
       crossorigin="anonymous"></script>

client IDをURLのクエリでリクエストするようになっているのと、crossorigin="anonymous"というクロスオリジン属性が加わっていました。
クロスオリジン属性は以前、こちらの記事で扱ったことがあるのですが、取得するソースの存在場所は不問みたいな意味合いだったと思います。個人的に推測すると、広告データがセキュリティで弾かれるのを防ぐためかな？　と思いました。
でも、このタグに変えても依然として自動広告は表示されませんでした。
また、ブラウザChromeのデベロッパーツールでは赤文字のエラーが出ていました。（これについては後で述べています）

そして、いろいろ試行錯誤しているうち、2021/5/5頃、再度アドセンスサイトから自動広告コードを取得したら、今度は以前のコードに戻っていました。

<script data-ad-client="ca-pub-xxxxxxxxxx" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

はて？
これはどういうことでしょうか？
先日のコードは不具合が多かったのでしょうか？

自動広告が表示されなかったのはこれのせいかな？　と思って最新のコードに再び換えてみました。
しかし、結局、自動広告が表示されないのは変わりありませんでした。
一体何が原因でしょうか？
謎のままです。

一部分のページには自動広告が表示され始めた

いろいろ試行錯誤しているうちに、一部分のページの記事内に自動広告が表示され始めました。
それは、以下の場合です。

ディスクトップPC端末の投稿ページのたった１つの記事
それは、以下の記事です。
ESP32 ( ESP-WROOM-32 , M5Stack )自分的トラブルシューティングまとめ
ディスクトップPC端末の固定ページの全記事
モバイル端末のAMPページ（ディスクトップPCは非表示）

このように、ディスクトップPC端末では通常ページは表示されてもAMPページでは表示されなかったり、モバイル端末のAMPページでは表示されてもディスクトップページでは表示されなかったり、いろいろ謎な現象です。

ブラウザでHTMLソースコードを見てみて、自動広告が表示されるページのソースコードと、表示されないページのソースコードを見比べてみても、ほとんど変化がありませんでした。とにかく謎です。

サイドバーの広告を減らしてみてもあまり変化が見られませんでした。

自動広告が記事内に表示されないと思っていたら、なんと、コメント投稿欄に表示されていた！

いつまでも通常投稿ページの本文中に自動広告が表示されないなと思っていてスクロールしていたら、ある日、なんと！　コメント投稿一覧に出現していたことを発見しました。

なんじゃこりゃ？

しかも、いやらしい位置に、あたかもコメント投稿と間違えそうな形態でアイコンまで同じ大きさでした。
これはさすがにあまりよろしくないと思いましたね。
それと同時に広告業界というものの戦略は抜け目ないなと思いました。

広告とハッキリわかる形態なら良かったのですが、やはりこれはちょっとエグかったので、アドセンスサイトの自動広告編集プレビューで、コメント投稿欄の目立つ広告は削除しました。

でも、プレビュー画面での削除はトータル10件までなので、他の部分の削除も合わせると、一部分しか削除できませんでした。

でも、なぜ本文ではなくコメント投稿なのか？
Googleクローラがコメント投稿欄を本文と解釈してしまったのだろうか？
未だに謎です。

AMPエラーを修正した翌日、自動広告が消えた？

2021/5/29頃、突然ディスクトップの自動広告が全て表示されなくなっていました。
Adsenseのレポートを見て発覚しました。

前日に何かしたと言えば、Google Search ConsoleでAMPエラー通知が来たので修正して、Search Consoleで再審査を要請したくらいです。
WP-appboxプラグインのアプリリンクカードで吐き出すスクリプトで、onmouse関連のものが、AMPで非対応ということでした。
よって、WP-appboxプラグインのアプリリンクカードをやめて、通常のテキストリンクに変更しただけです。
もしかしたら、AMP修正再審査で自動広告が消えるのでしょうか？
でも、スマホのAMPページでは自動広告が表示されていました。
結局何も分かりません。
謎です。

キャッシュを削除すると自動広告が消えた？

Cocoonテーマに変えてから、頻繁にタグやスクリプトを修正し、サーバーキャッシュおよびブラウザキャッシュを削除して表示を確かめていました。
そして、ある程度良きところでSearch Consoleでサイトマップを送信して、クローラ巡回するよう促していました。

ある時、そんなに大きな修正をしていない状態でサーバーキャッシュとブラウザキャッシュを削除し、AMPキャッシュも削除したら、今まで自動広告が表示されていたページで表示されなくなったのです。

もしかしたら原因はこれか？
と、思って、以後はキャッシュを極力削除せずに様子をみることにしました。

３日くらい経過して改めてサイトを見てみると、再び自動広告が表示されるようになりました。

ということは、キャッシュ削除が原因かもと思いましたが、その間、先ほど述べたようにアドセンスサイト側から提供されている広告タグが変更になったこともあり、キャッシュが原因とは断定できません。
現に、キャッシュ削除しない今でも自動広告が一向に表示されないのです。

結局、自動広告が表示されない原因は？

以上の症状が出て、かれこれ１か月くらいになりますが、旧テーマで表示されていたページの自動広告は未だに表示されていません。
さすがにGoogleのクローラ巡回が終わったと思われてもこの状態です。

そんなわけで、自動広告が表示されない原因を個人的に推測してみました。

１記事中に貼ってある広告タグが多すぎたのかもしれません。
ですが、旧テーマの時は問題無く表示されていましたし、PC版のこちらの記事では表示されていますし、固定ページではほぼ全記事で表示されていますので、この推測も的外れかもしれません。
因みに、サイドバーの広告を減らしても、結局記事中に広告は表示されませんでした。
もしかしたら、Googleのサイト解析アルゴリズムが変わって、私がテーマを変える時期と重なってしまい、価値のあるサイトだけ本文中に自動広告を表示するようになったのかも知れません。
でも、固定ページのうち価値が確実に低いと思われるページでも自動広告が表示されているので、これも的外れかもしれません。
Cocoonテーマの構造が原因なのかもしれません。
でも、１記事だけ投稿ページに表示されるのと、固定ページに表示される意味が分かりません。
別サーバーのテスト用サイトで同じように実験していますが、ほとんど同じ症状です。
もしかしたら、コメント投稿欄とか、ページ送り欄に広告が表示されることから、ウィジェットの細分化が問題なのかもしれません。
もしかしたら、１か月経った現在でもまだGoogleクローラのサイト解析が終えていないのかもしれません。
あまりにも頻繁にスクリプトやHTMLを変えすぎたため、Google側に怪しいと思われ、広告表示制限がかかったのかもしれません。

以上、私個人が推測できたのはこんなところでしょうか。
ディスクトップPCで表示されなくても、モバイルで表示されていることもあるし、また、タブレットで表示されていなくても、スマホで表示されていることもあります。
逆にタブレットで表示されていてもPCで表示されていなかったりと、あまりにも謎が多いのです。
結局は、自動広告のアルゴリズムおよびAIによる判定は、私の様な一個人では解析不可能ということだと思いました。

また、ネットやSNSでいろいろ情報を集めて、同じような症状の解決方法を全て試しましたが、全て的外れでした。
結局、原因はまったくわかりませんので、しばらく放置することにしました。

ブラウザのデベロッパーツール（開発者ツール）のエラー対策

ブログを修正したら、念のためブラウザのデベロッパーツール（開発者ツール）でチェックしました。
以下のエラーに遭遇しました。

No slot size、TagError

テーマを変更して、初期に出たエラーは以下です。

VM8020 adsbygoogle.js:220 Uncaught P {message: "adsbygoogle.push() error: No slot size for availableWidth=0", name: "TagError", pbr: true, stack: "TagError: adsbygoogle.push() error: No slot size f…esyndication.com/pagead/js/adsbygoogle.js:75:107)"}

ウィジェットで広告(PC用) と広告(モバイル用) を分けて使用していた場合、モバイルでは横方向のスライドウィジェットに広告が表示されなくなりますが、実際は広告コードをCSSでdisplay:noneにして非表示にしているだけで、ソースコード上には広告コードが出力されていることが原因のようです。

この対策は、functions.phpにモバイルの時には広告コードを出力しないようなショートコード関数を作ってウィジェットに貼り付けました。
そうしたらエラーは消えました。

functions.phpでは、wp_is_mobile() を使ってif文で分岐しました。
wp_is_mobile()関数は、タブレットとスマホの場合はtrueを返します。
もし、スマホだけにしたい場合は、is_mobile()関数を使えば良いです。

Microsoft Edgeで、Unchecked runtime.lastError

Google Chromeで全ての赤字エラーを解消したのに、なぜかMicrosoft Edgeで以下のエラーが出ていました。

Unchecked runtime.lastError: The message port closed before a response was received.

この原因は、Edgeの拡張機能との相性でエラーが出ているらしいです。
全ての拡張機能をOFFにするのは面倒だったので、Edgeのprivateウィンドウで開いてみました。
すると、エラーは出ませんでした。

Edgeの基本エンジンはChrominiumですし、普段、私はGoogle Chromeしか使わないので、このまま放置しておくことにしました。

昼にデベロッパーツールで広告エラーが出ていたページで、夕方にはエラーが出なくなっていた

たぶん、クローラの解析が終わるまで待てということだろうと思われます。
アドセンス審査を初めて行う時の様に３～７日待てということかも知れません。

また、自動広告が出ていたページでも、翌日には自動広告が出なくなったりしました。
おそらく、AMPページのエラーを修正して、Search Consoleで再検査申請したことにより、クローラ解析が再度始まったのだろうと思われます。

Only one AdSense head tag supported per page、TagError

以下のエラーが出たことがありました。

P {message: "adsbygoogle.push() error: Only one AdSense head tag supported per page. The second tag is ignored.", name: "TagError", pbr: true, stack: "TagError: adsbygoogle.push() error: Only one AdSen…sbygoogle.js?client=ca-pub-xxxxxxxxxx:235:4"}

Google翻訳で訳すと、

adsbygoogle.push() エラーです。AdSense のヘッドタグは 1 ページにつき 1 つしかサポートされていません。2つ目のタグは無視されます。

つまり、以下の広告スクリプトタグが１ページ中で重複しているという事です。

<script async src=https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxx
       crossorigin="anonymous"></script>

このアドセンス広告のタグは、先ほどこちらで述べたように2021/4/16～5/5あたりにアドセンスサイトで提供された広告タグですが、これはページ内に複数あるとエラーが出るようですね。
実際のマニュアル広告表示では問題ありませんでしたが、自動広告では問題あったのかも知れません。
このタグは現在では提供されていませんので、新しいタグに変えたらエラーが出なくなりました。

以上がデベロッパーツールで遭遇したエラーです。

Norton Safe Web のサイト評価が「未評価」になっていた問題

私はセキュリティアプリとして、ブラウザの拡張機能にNorton Safe Webを入れていますが、これが意外と便利で、特にChromeでGoogle検索すると、検索結果のサイトが安全か危険かをアイコンで知らせてくれるんです。
そして、ブラウザの上部のツールバーアイコンでも知らせてくれます。

ただ、テーマをCocoonに変更したことで構造が変化したせいか、なぜかこのブログの評価が「未評価」に変わっていました。
よって、Norton Safe Web内のフルセーフウェブレポートから再評価を申請しましたが、まったく連絡が来ませんでした。

しばらくして、一旦「安全」評価に変わったと思って一安心していたのですが、ブラウザを再起動したら再び「未評価」に戻っていることが何度もありました。

そんなとき、Twitterで何気に不満をつぶやいていると、Nortonサポート側からダイレクトで連絡が来ました。
へぇ～！　やるなぁ～Norton！
と思いました。
ちょっと感心したので、そこで再評価を依頼させていただきました。
そうしたら、約１週間ほどで「安全」評価にしたとサポート側から連絡がありました。
これで、Chrome, FireFox, Edgeでも「安全」と評価され、ブラウザを再起動しても変わらないことが確認できました。
ちょっと時間はかかりましたが、Nortonサポートは正直言って素晴らしいなと思いましたね。

Cocoonのウィジェット細分化はとても勉強になった

Cocoonを使ってみて最も感心したのは、ウィジェットが細分化されていたところです。
ウィジェットの一部分ですが、下図を見てください。

Cocoonウィジェットの細分化

ウィジェットって、こんなに細かく分類していいんだと思いましたね。
まぁ、私が使っていた旧テーマのTwenty-Fifteenの場合では、ウィジェットが１～２個くらいしか使っていなかったので、少なすぎたのかも知れません。
有料のWordPressテーマは使ったことないのですが、もしかしたら有料のテーマ場合はウィジェットを細分化するのが当たり前なのかもしれませんね。
確かにこの場合は、メニューや広告タグをドラッグアンドドロップで気軽にレイアウト変更できるのでとても便利ですね。

そして素晴らしいのが、ウィジェット内の各モジュールで表示・非表示を細かく設定できることです。
例えば、固定ページで非表示にしたり、AMPページで非表示したり、あとは投稿ページのID番号で非表示したりできることです。これはほんと便利です。

そして、一番感動したのは、サイドバーのスクロール追従ウィジェットがあったことです。
これは、旧テーマの時、自前でJavaScriptやCSSを組んでいました。
スクロール追従は、サイドバーをウィジェットで分割して初めてスクロール追従が機能するのですが、CSSのブロックの高さを取得する必要があり、いろいろと面倒なコーディングでした。

実は、旧テーマのTwenty-Fifteenが登場した当初は、何も手を加えなくてもjQueryでサイドバーがスクロール追従していたのです。
ですが、WordPressがバージョンアップしたり、いろいろ修正を加えているうちに追従が機能しなくなったので、自前で実装したという経緯があります。
そうすると、それは今後のWordPress更新で機能しなくなることも考えられ、メンテナンス的に問題があったのです。
そんなわけで、予めスクロール追従ウィジェットが標準でセットされているというのは有難いことですね。
Cocoonにはブロガーが欲しいものが殆ど備わっていたという感じです。
とにかく、素晴らしいテーマです。
勉強になりました！

まとめ

以上、テーマをCocoonに変更して苦労した点も含めて備忘録的に記事を書いてみました。
こんなにダラダラ長くなってしまいましたが、また数年後テーマを変更する時が来た時に自分自身の参考になれば良いと思っています。

結局、Cocoonにしたことにより、旧テーマよりもサイトが確実に最適化され、Search Consoleの評価は爆上がりし、検索表示回数が増えたので、個人的にはとても良かったと思います。
何よりは、メンテナンスに費やす時間が将来的に大幅に減ることを考えると、断然有利かと思います。
それに日本語のフォーラムが充実していて、作者によるアップデートも頻繁なので、安心感が大きいですね。
これで無料なのは本当にスゴイことです。

ただ一つ気がかりなのが、自動広告が表示されない原因が未だ謎というところです。
今後、判明したらこのブログでお知らせしたいと思います。

ということで、今回はここまでです。
ではまた・・・。