GatsbyでGoogle AdsenseとOGPを対応


Published on August 15, 2021

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

Google Adsense

やること

  1. Adsenseの申し込み
  2. Adsense用jsファイルの設置
  3. Googleの審査を受けてパスする
  4. Adsenseのスロットを作成
  5. Adsense用コンポーネントを配置

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

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

Adsenseの申し込み

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

Adsense用jsファイルの設置

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

参考:

Googleの審査を受けてパスする

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

Adsenseスロットの作成

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

Adsense用コンポーネントを配置

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

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

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

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


OGP

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

やること

  1. SEOコンポーネントなど、Metaタグコンポーネントの設定
  2. OGP確認ツールでの確認

SEOコンポーネントなど、Metaタグコンポーネントの設定

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

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

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

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

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

OGP確認ツールでの確認

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

https://ogp.buta3.net/

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

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


© 2021

mihirat
, All Rights Reserved.

Built with Gatsby