最爱午后红茶

基于 Next.js 搭建的网站接入 Google Adsense(谷歌广告联盟)

日期图标
2024-09-23
Next.js 接入谷歌广告联盟

谷歌广告联盟是谷歌的广告联盟计划,也被称为 Google AdSense。这是一个广告发布计划,允许网站发布者在其网站上显示谷歌广告,并从中获得收益。广告内容是根据网站内容和访问者的兴趣进行定位和展示的,这样有助于提高广告的相关性和点击率。谷歌广告联盟为网站所有者提供了一种简单而有效的方式来赚取额外的收入,同时也为广告主提供了一个广告投放的平台。


个人网站要接入 Google AdSense 需要具备一些基本条件:

  • 网站要有一定数量的文章被谷歌搜索引擎收录
  • 网站需要有一定数量的原创文字内容

向搜索引擎提交网站信息

要想网站的页面被谷歌搜索引擎收录,需要主动向谷歌搜索引擎提交网站的收录信息,提交入口:Google Search Console

附:

Google Search Console 里面关联了自己的网站之后,需要提交什么信息呢?最主要的就是网站的 站点地图。简单来说站点地图里面应该包含网站的所有页面链接,比如本网站的站点地图为:https://blackteahouse.com/sitemap-0.xml

你每次在自己的网站上创建一个新页面的时候,需要同时更新自己的站点地图,谷歌搜索引擎会不定期爬取站点地图的信息,如果觉得有价值,就会收录该页面。Next.js 项目可以通过 next-sitemap 插件维护网站的站点地图,在构建项目的时候让它工作,它可以获取你网站的所有链接并生成 xml 格式的站点地图,站点地图通常直接放在网站的 public 目录,以便搜索引擎的爬虫能够爬取。


让网站被搜索引擎收录

提交了站点地图只是让谷歌知道了你的网站有哪些网页,但是否收录则取决于它对页面内容的分析结果。那么怎样提高网页被搜索引擎收录的概率呢?主要就是让网站结构尽可能遵循 谷歌 SEO 规范。然后就是保持一定原创文章的更新频率。

怎样检查网站的页面是否被搜索引擎收录?

  1. 直接从 Google Search Console 查看
  2. 在搜索引擎里面输入:site:xxxxx.com
  3. 直接在搜索引擎输入网页文章的关键字

左滑:

网站收录1
网站收录2
网站收录3

有一些之前被收录的页面后面也可能会被驳回,有时按照收录平台给的提示修改后仍没有重新收录,没有做进一步的调查。
谷歌收录网站主页很快,可能 2、3 天就收录了,但是其他页面则可能需要要好几周或几个月。bing 收录也很快,具体没怎么看,感觉是比谷歌还要快。百度目前还只收录了主页,我也没太指望它。


申请接入谷歌广告联盟(Google AdSense)

当谷歌收录达到一定数量之后,就可以尝试申请 Google AdSense 了。

申请 Google AdSense 的流程很简单,大概只有两个步骤:

  1. 准备 Ads.txtGoogle AdSense 官网有具体流程
  2. 按要求把一小段广告脚本代码贴到网站每一个页面的 head 标签内

注:目前申请 Google AdSense 并不需要对网站进行备案。

Next.js 项目可以把广告脚本代码贴到 _app.js 文件的 Head 组件里面,MyApp 会对每一个页面进行同样布局的包装,因此只需要添加一份广告脚本代码即可(当然也有其他不同的植入方式,这只是其中一种)。

function MyApp({ Component, pageProps }) {
  ...
  return (
    <>
      <Head>
        <script
          async
          src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx"
          crossorigin="anonymous"
        ></script>
        ...
      </Head>
      ...
    </>
  );
}

export default MyApp;

做好这两件事情后就可以提交审核了,然后就是等待审核结果,据说是 机器 + 人工审核,快的话可能几天,慢的话可能一个多月。

审核结果会通过注册 Google AdSense 的邮箱进行通知(当然也可以在 Google AdSense 后台直接查看),如果审核不通过,则会收到类似下面这样的邮件:

谷歌广告审核失败

它会告诉你网站没有完全合规,需要纠正一些问题,但不会告诉你哪里有问题,需要自己去查。我一般不查,过一段时间更新了几篇文章后继续提交审核,结果看见了好几次上面这个满脸微笑的大叔。

审核期间我有时会去逛下 Google AdSense 帮助社区,我没有在上面提过问题,但是在那里可以发现各种各样奇奇怪怪的网站:)

当你收到这样的邮件时,就表示审核通过了:

谷歌广告审核通过

Google AdSense 后台如下:

谷歌广告审核通过

本来我没报太大希望,因为我的网站类型比较杂,还有不少视频或者图片。从目前结果来看,Google AdSense 还是比较包容的。

广告类型

审核通过后,会自动开启 自动广告,可以在后台配置自动广告的类型:

  • 页内广告Google AdSense 会在网页中找到自己认为合适的地方放置广告
  • 锚定广告固定在网页最上面或最下面,提供按钮可以缩进隐藏广告
  • 穿插广告在各个站内链接之间跳转的时候会弹出

每种类型里面还有具体的细分就不展开了,我开启了 页内广告锚定广告,在 PC 端显示如下(左滑):

PC 页内广告
PC 锚定广告

在移动端显示如下:

移动端页内广告
移动端锚定广告

Google AdSense 可能会分析网页内容来决定是否显示广告,所以并不是点开每一个页面都会显示广告,后台也可以自己配置广告展示的频率。另外,广告展示好像还跟网络环境有关,我自己实测如果开启了科学上网,广告就不展示了,可能被 Google AdSense 判断为虚假 ip 了,关掉科学上网后再刷新下页面又能重新展示广告。

看起来自动广告好像不是那么好用,它有时会出现在非预期的位置。因此可以考虑关闭自动广告,选择更为灵活的 单元广告

单元广告具体操作就是先在 Google AdSense 创建单元广告(可以创建多个),创建完后它会提供一段单元广告代码,把它贴到你需要显示广告的地方,那么它就只会在那个地方展示广告。

但是 Next.js 项目里面添加单元广告会有一些需要注意的问题,最主要的一个问题是 Next.js 的页面跳转通常是使用它提供的 Link 组件。Link 组件跟普通 a 标签有一个很重要的区别,就是 Link 组件有 预加载 的功能,也就是当你点开一个页面的时候,它不仅仅加载当前页面的内容,还有可能预加载该页面通过 Link 组件链接的其他页面的内容(详细内容可以访问 Link)。这样做有一个很大的优点是站内跳转非常快,但这也导致了在页面间跳转的时候不会重新执行单元广告的脚本,可能会导致广告显示不出来(我猜是这个原因)。网上有各种解决方案:

  1. How to add Google AdSense in Next JS
  2. How to use google adsense in Next Js
  3. How to Add Google Ad Sense in Next.js 13 With App Router, Auto Ads and Unit Ads

照着测试下来好像也没那么好使,有时候显示还是有问题,需要刷新一下页面才能出来,单元广告先搁置一下,后面花时间搞清楚了再试试。本来是想着每篇文章底部贴一个单元广告的,现在看来先使用一段时间自动广告好了,页内广告好像恰好把广告插在文章底部~

它具体会显示什么广告我也不知道,但是后台可以配置广告内容的类型,比如可以限制一些色情、政治敏感类型广告的投放。同时网站要一直保持遵循谷歌广告合作规范,否则可能会被限制广告投放甚至停用账号。

如果是英文网站的话,好好做内容更新应该会有一些收益,但是中文网站的话~,很难,就当是了解一下整个流程是怎样去完成的。

* 未经同意不得转载。