GatsbyでGoogle AdsenseとOGPを対応
Published on August 15, 2021
しばらく放置してましたが、対応未了だった２タスクにちょっと詰まったので共有。
Google Adsense
やること
- Adsenseの申し込み
- Adsense用jsファイルの設置
- Googleの審査を受けてパスする
- Adsenseのスロットを作成
- Adsense用コンポーネントを配置
注意点としては、gatsby-plugin-google-adsenseとreact-adsenseのいずれも使わないことです。
いずれも長期間更新が途絶えています。
Adsenseの申し込み
公式リンクから申し込みましょう。指示に従っていくと、審査を受けるための方法が提示されます。
Adsense用jsファイルの設置
GatsbyJSのhtml.js配置を使って、指示された通りの<head>タグを埋め込みます。
環境変数に格納して実装しました。
参考：
Googleの審査を受けてパスする
埋め込んだブログをデプロイして、審査ページから審査依頼をします。 このブログは２日ほどでokがでました。
Adsenseスロットの作成
広告のレイアウトなどを決定します。
Adsense用コンポーネントを配置
作成したスロットのIDなどを反映したコンポーネントを作成し、ブログに貼り付けます。 参考ブログ同様に、ブログの記事の一番下にだけ表示するようにしました。
プラグインを使わないため、自前でコンポーネントを作成します。 こちらもIDなど環境変数に格納して実装しました。 このブログで実装したPR
AdBlockerなど使用していなければ、この記事の最後に広告欄が出ているはずです。
開始一週間で１円の儲けが出ました。一年でうまい棒が５本も手に入ります。
OGP
SNSでリンクを貼ろうとするときに、勝手に画像やらタイトルやらを取得してくれるやつです。 Twitterをよく使うので反映しておきました。
やること
- SEOコンポーネントなど、Metaタグコンポーネントの設定
- OGP確認ツールでの確認
SEOコンポーネントなど、Metaタグコンポーネントの設定
このブログはgatsby-starter-blogから始めたので、component/seo.jsにmetaタグ関連が入ってます。
やるべきだったことは、og:image などのタグの設定。
このブログで修正したPRの該当箇所はこちら
なお、埋め込むべき画像のURLは外部アクセス可能なURLにしなければいけないので、
こちらの記事などを参考にして修正します。
このブログで修正したPRの該当箇所はこちら
OGP確認ツールでの確認
実際にシェアしたときにどんなOGPが出るかの確認ができます。 Netlifyだったらプレビューサイトのリンクを貼ってみると確認できるので、少し時間を置いて試します。
下のtwitterボタンを押してみると、画像やタイトルが出てくることでしょう。
そのままシェアしていただいて大丈夫ですよ。