GatsbyにGoogleの自動広告を表示したければLINKタグを使うなという話

※2024/11/25追記 広告表示について訂正、Cloudflareのボットファイトモードについて追記

まえがき

先に断っておきますが、自動広告のうちオーバーレイ広告は、何もしなくても表示できます。

Googleアドセンスの審査には通ったが、オーバーレイ以外自動表示できず…というのが以前の記事の結論です。

その後調べたら、一応回避策はありました。

この件に関して扱ってる記事があまり無いようなので、雑記として投稿します。

ちょっと足搔いてみた

結論だけ書きます。

Gatsbyでオーバーレイ広告の表示に成功している場合、

全ページのLINKタグをaタグに書き換えれば、多分オーバーレイ以外の自動広告も表示できます。

ヒントになったのは以下のサイトです。

これはNext.jsでの話ですが、Gatsbyもいけるのではと思って試したら無事通りました。

これによりインテント重視のフォーマット、ページ内フォーマットの二つもとりあえずGatsbyで使えるようになります。 F5などでページ更新した際は元から普通に表示されていたので、aタグによって通常のページ遷移とすればいい話だったようです。 でもなんか表示おかしい気はします。

なんか思ってる表示とちゃう

自動広告全般の表示はできるようになりましたが、それでもメインがJavascript故か、設定どおりの自動表示は難しいようです。なんなら素材配布ページのほうは自動表示できてません。多分ページのつくりの問題です。

私はド素人なので詳しく知りませんが、googleアドセンス自体SPA, SSGでの利用に難が付き物で、プレーンHTMLかSSR、具体的に言うとWordpressを使うべきらしいです。 Gatsbyは表示する手があるだけまだマシなのでしょう。

と思っていたが、そんなことは無かった。

以前のプレビューと表示がまるで違うのでそう思っていましたが、再度確認したら現状で正しかったです。アドセンス側で変更があったのでしょう。

見た目を細かくコントロールしたければ、手動で広告コンポーネントを追加するしか無いようです。

aタグ使うならSSGじゃなくてよくね？

まあ…そっすね…

この辺が情報少ない理由の気はします。 閲覧時の軽快さがSSGの良さの一つなのに、完璧に潰れてるので…

ただしSSG＆Cloudflare pagesなら基本的にドメイン代以外の手出しは発生しないので、全くの無意味というわけではありません。趣味で細々やるにはうってつけです。 サーバー代余裕で稼げるなら多分Wordpressでいい。

あと私事ですがaタグに変えたことによって、お手製リンクカードの表示不具合が治りました。 descriptionが3行以上ならカットされるようcssを調整していたのですが、LINKタグによる読み込みだとすべて表示しようとすることがありました。 ページ遷移に変更したことによって解消した模様。

プレビュー時は要ボットファイトモードオフ？

前述の広告表示の件なんか変じゃねと思い、Googleアドセンスから確認しようとしました。

なんでや！

以前の記事投稿時は広告設定のプレビューが機能していたのに、なぜか見れなくなりました。

調べて見つかったのは「www.をつけて正しいURLにしろ」ぐらいなものでしたが、そもそも当サイトのURLにそれは付いていません。 あとはJavascriptが多すぎるとダメらしいですが、前回記事作成以降に何か追加するようなことはしていません。 シークレットモードもダメ

最終的に、Cloudflareからボットファイトモードをオフにすることで、広告設定のプレビューが表示できるようになりました。

これでもう一度プレビューからURLを開くと、正常に機能します。

上部に1個のページ内広告となっているので、現在はこの表示で正しいようです。

ただ、前回アドセンスに関する記事を書いた時点で、ボットファイトモードは既にオンだったような気がします。 GoogleとCloudflareどちらかの変更でこうなってしまったのか、そもそもオンにしていた気がするだけでオフだったのか…

ともかくCloudflare利用時にGoogleの広告プレビューが表示できず、URLの例にも該当していない方は、一度上記を試してみるといいかもしれません。 セキュリティ対策の設定なので、確認後はオンに戻したほうがいいでしょう。オンでもアドセンスそのものは利用できています。

使い方のまとめ

GatsbyでGoogleアドセンスの自動広告を、とりあえず一通り使えるようにするなら、

gatsby-ssr.jsをこうして…（gatsby-starter-blog準拠）

/**
 * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
 *
 * See: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-ssr/
 */

/**
 * @type {import('gatsby').GatsbySSR['onRenderBody']}
 */
const React = require("react");

const isProduction = process.env.NODE_ENV === "production";

const gads = (
  <script 
    async 
    src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5632764258714244"
    crossOrigin="anonymous">
  </script>
);

exports.onRenderBody = ({ setHtmlAttributes, setHeadComponents }) => {
  setHtmlAttributes({ lang: `en` });
  if (isProduction) {
    setHeadComponents([ gads ]);
  }
}

ページスクリプトのLINKタグを全部aタグによるリンクに変える。

以上。

なお以前触れたアナリティクスの件は、プラグインの導入が必須のようです。

あとがき

いざ記事作ったらあんまり書くこと無かった。

雑記っていうかチラ裏感。

表示多分おかしいけどずっとモヤモヤしてたの解消できたのでﾖｼ! なおレスポンスの悪化…