将Hexo博客提交Google并配置Google Analysis

最初的想法是将博客打造成个人图书馆或者日记本,所以起初并不在意网站的Search Engine Optimization(SEO)的状况。但是当发现自己的网站甚至没有被搜索引擎收录时,还是不免失落。当生理需求被满足后,更高层次的被同类认可的需求提上了日程。这篇文章将会介绍如何将网站提交到Google并如何配置Google_Analysis服务。尤其是针对Hexo+Github Page用户。

测试站点是否被Google收录

在 Google 搜索中直接搜索 site:yourDomaiName,如果没有任何结果,说明尚未收录。举个例子:在Google搜索框中输入 site:lizhening.github.io

如果可以搜索到内容,那么恭喜你,说明你的文章价值比较明显,可以直接跳转到SEO和SEM部分,查看优化方案。

如果没有搜索结果,那请接着耐心向下看。

配置Google Analysis

按照逻辑,如果搜索引擎没有收录网站,首先做的应该是向搜索引擎提交网站。但是在向搜索引擎提交网站时,搜索引擎会验证你对于提交的网站具有控制权。如果你的网站配置Google Analysis服务,可以直接通过验证。如果你想要使用其他验证方式,可以跳过本段,参考向Google提交网站地图

Google Analysis是一款免费的网站统计分析工具,可以实时监测跟踪网站的表现,包括流量情况和用户访问情况。工具不仅会统计网站的整体流量情况,还会给出这些流量的具体组成结构,以及展示网站访问者的活动流程,让你可以清楚地了解网站的细节表现。对于一般的个人博客有明显的功能溢出。对于个人博客这种小网站,还有其他小巧便捷的分析管理工具,比如umami.is和plausible。对umami.is感兴趣的同学可以参考少数派作者“huhuhang”的文章个人网站 / 博客必备,零成本、低门槛创建专属数据分析工具:umami.is

配置Google Analysis大致分为三步,分别是监测账户配置、博客设置修改和测试。这里给大家提供一个非常详细、靠谱的教程,博客作者“brook1711”的文章Hexo fluid 中关联 Google Anlytics 的具体方法,这也是我的参考教程。必须要提醒大家,所有的教程编辑出来时已经过时了。但是,教程的思路和配置仍然可以参考。

监测账户配置

进入Google Analysis的官网进行登录并分析(Sign in to Analytics)。进入配置页面之后,按顺序进行以下操作。

创建分析账户。创建账户按钮位置如下。创建账户时,网站会弹出一个表单。表单中共有三类信息需要完善,分别是“账号设置”、“媒体资源设置”和“关于您的企业”。其中,最重要的是“媒体资源设置”,一定要点开“隐藏高级选项”,并打开“Universal Analytics”功能。

创建分析账户

打开“Universal Analytics”功能

开启“Universal Analytics”功能时需要补充博客网站,并建议选择“同时创建 Google Analytics(分析)4 和 Universal Analytics 媒体资源”选项。其余信息,根据自身情况和兴趣补充即可。

在新的页面中,选择“数据流”选项卡,并进入“网站数据流详情”页面查看ID。
进入“网站数据流详情”页面查看

在“网站数据流详情”页面需要着重关注三个信息.

  1. 衡量 ID(MEASUREMENT ID),这是gtag标识,稍后会用到。
  2. gtag.js代码。点开后会发现一段js代码,之后会将其插入到文件中。
  3. 已关联网站代码。点开后会发现一个以“UA”开头的“已关联的代码”(Connected tags)。这是tracking ID。

关键信息

博客设置修改

首先修改配置文件。在_config.fluid.yml中更改以下设置:

  1. 打开网页访问统计功能。
  2. 填写Tracking ID,也就是以“UA”开头的那段ID。
  3. 填写EASUREMENT_ID,也就是以“G”开头的那段ID。

如果有疑问,可以参考fluid主题官方文档

然后将gtag.js插入网页。直接将“网站数据流详情”页面复制的gtag.js代码添加到head.ejs内。一般来说,路径是.\themes\fluid\layout\_partial\head.ejs其中,二级目录fluid是我使用的主题,如果你使用其他的主题,二级目录以及最后的ejs文件名称可能会有些许差异。但是,只要保证两点即可:

  • 插入到主题的HTML代码中,因为主题HTML优先级比较高,大概率会最终保留下来。如果插入到其他地方,可能由于渲染冲突被覆盖掉。
  • 紧邻<head>标签,不管哪个ejs文件,只要紧接着<head>标签就对了。
  • 尽量不要同时开多个网页分析。我同时开启百度和Google分析时,百度分析的代码自动出现在Google代码上方,会导致Google代码失效,原因不是很清楚。

测试

包括两部分,本地测试和Google Analysis测试。

本地测试需要观察文件是否能够正常编译,以及gtag.js代码能否正常显示。
使用hexo g命令编译文件,使用hexo s命令打开本地服务。在http://localhost:4000中预览效果。使用F12键查看网页HTML代码,检查<head>标签之后的gtag.js代码是否正常显示。
本地检查

当本地测试无误后,使用hexo d命令同步上传。在Google Analysis中依次选择“报告”、“实时”。使用另一个浏览器打开你的博客,观察分析结果。如果能够检测到数据,那么完事大吉。否则只能求助于搜索引擎和Google Analysis的帮助文件了。
Google Analysis测试

向Google提交网站地图

关于Google的收录规则,推荐大家阅读Google搜索中心的文档。如果在操作过程中遇到大多数问题基本可以在本页面中找到解决方案。

根据Google搜索中心官方的新手入门指南,只需要两部就可以向Google提交网站。分别是:

  1. 注册 Search Console。
  2. 添加网站并验证您对该网站的所有权。

由于我们已经配置过Google Analysis,可以使用相同的账号信息,无需另行注册Search Console。在验证网站所有权时,建议选择“网址前缀”模式。虽然“网域”模式能够覆盖更多情景,但是只能通过DNS进行验证,对于Github托管的博客不太友好。
网页验证
在弹出的验证所有权界面选择“Google Analysis”方式进行验证。等待完成即可。
选择Google Analysis验证

如果之前没有配置过Google Analysis,可以直接按照Google推荐的方式进行验证,下载验证文件,放到主题下面的source目录themes/fluid/source,其中,二级目录fluid是我使用的主题,如果你使用其他的主题,二级目录名称会不同。为什么放到主题的source下而不直接放在站点source下面呢?根据简书博主“gee1k”的解释:

因为站点source下面的html文件都会被按照主题样式重新渲染,最后html文件的内容会被改变,百度验证就不能识别。
虽然可以更改html文件让主题不去重新渲染此html文件,但我认为直接放到source下面不去更改文件内容更方便

为了方便搜索引擎对于博客的了解,可以选择向其提交站点地图(sitemap)。生成并提交站点题图的方式如下。

生成并提交站点地图(sitemap)

Google的官方文档在“高级SEO”中介绍了站点地图的用途和使用情景,推荐大家阅读。站点地图更适合大型、复杂的网站,个人博客可以按需选择。同时在官方文档中,Google也介绍了生成站点地图的主流方案。

但是,对于Hexo博客来说有更加简单的方案。在Hexo官方插件平台中检索生成站点地图的插件。我用的是hexo-generator-sitemap。可以直接使用npm进行安装,安装语句在插件的GitHub主页中也有介绍。
npm install hexo-generator-sitemap --save
同时注意在配置文件_config.yml中增添对应参数参数。

1
2
3
4
5
6
sitemap:
path: sitemap.xml
template: ./sitemap_template.xml
rel: false
tags: true
categories: true

在这时需要注意,“template”参数,这个参数指定了生成站点地图的模板及其储存位置。如果和一样之前对于站点地图没有了解,直接用插件提供的模板吧。需要检查在“template”指定的位置是否有对应的文件,如果没有,直接把插件提供的模板复制到_config.yml下,并命名为sitemap_template.xml即可。否则可能出现无法生成站点地图的情况。

完成修改之后,将文件编译同步到GitHub。在主页地址之后添加/sitemap.xml检查是否能够查看到网站地图。比如我的博客主页地址为https://lizhening.github.io,那么可以在https://lizhening.github.io/sitemap.xml上查看网页地图。
网站地图

打开Google Search Console控制台,在“站点地图”中输入网址/sitemap.xml,并提交即可。如图所见,我的站点地图仍然没有收录,我也会不断找寻原因。

提交站点地图

SEO和SEM

当网站被搜索引擎收录之后,下一份KPI应该就是排名了,对应的技术就是SEO和SEM。但是因为我对此也是一知半解,为了不误导大家,推荐各位去看少数派作者“tony4927”的文章7000 字告诉初学者 2022 Google SEO 怎么玩。这篇从理论和应用两个层次介绍了具有哪些特质的网站会被搜索引擎青睐。

参考

在博客配置和文章写作过程中,也参考以下文章。
Hexo fluid 中关联 Google Anlytics 的具体方法
Google搜索中心的文档
7000 字告诉初学者 2022 Google SEO 怎么玩
Hexo系列:(四)Hexo博客提交百度和Google收录
Hexo博客配置Google Analytics过程及心得
Hexo的Next主题中配置Google Analytics之后不生效的问题