GatsbyでGoogle AdsenseとOGPを対応

しばらく放置してましたが、対応未了だった２タスクにちょっと詰まったので共有。

注意点としては、gatsby-plugin-google-adsenseとreact-adsenseのいずれも使わないことです。

いずれも長期間更新が途絶えています。

公式リンクから申し込みましょう。指示に従っていくと、審査を受けるための方法が提示されます。

GatsbyJSのhtml.js配置を使って、指示された通りの<head>タグを埋め込みます。環境変数に格納して実装しました。

参考：

埋め込んだブログをデプロイして、審査ページから審査依頼をします。このブログは２日ほどでokがでました。

広告のレイアウトなどを決定します。

作成したスロットのIDなどを反映したコンポーネントを作成し、ブログに貼り付けます。参考ブログ同様に、ブログの記事の一番下にだけ表示するようにしました。

プラグインを使わないため、自前でコンポーネントを作成します。こちらもIDなど環境変数に格納して実装しました。このブログで実装したPR

AdBlockerなど使用していなければ、この記事の最後に広告欄が出ているはずです。

開始一週間で１円の儲けが出ました。一年でうまい棒が５本も手に入ります。

OGP#

SNSでリンクを貼ろうとするときに、勝手に画像やらタイトルやらを取得してくれるやつです。 Twitterをよく使うので反映しておきました。

このブログはgatsby-starter-blogから始めたので、component/seo.jsにmetaタグ関連が入ってます。やるべきだったことは、og:image などのタグの設定。

このブログで修正したPRの該当箇所はこちら

なお、埋め込むべき画像のURLは外部アクセス可能なURLにしなければいけないので、

こちらの記事などを参考にして修正します。

このブログで修正したPRの該当箇所はこちら

実際にシェアしたときにどんなOGPが出るかの確認ができます。 Netlifyだったらプレビューサイトのリンクを貼ってみると確認できるので、少し時間を置いて試します。

下のtwitterボタンを押してみると、画像やタイトルが出てくることでしょう。

そのままシェアしていただいて大丈夫ですよ。