基于 NextJS + Vercel + Github Issues 的博客开发（三）

相关链接

1. 基于 NextJS + Vercel + Github Issues 的博客开发（一）
2. 基于 NextJS + Vercel + Github Issues 的博客开发（二）

源码和博客地址

1. 源码
2. 线上地址

让 Google Search 收录网站

Google Search Console

Google Search Console 是 Google 提供的网站收录和管理服务的控制台，在这里可以验证你需要让 Google 收录的网址并管理查看点击率和访问流量等信息

验证网站

以本博客为例子，来操作如何让 Google Search 收录网站。首先在在网址前缀那一边输入要验证的网站的网址

等待验证之后会出现下面的步骤

这里一共有5种验证方式，我用的是第一种文件验证。先把这个 html 文件下载下来，之后丢到本项目下的 📂 public 文件夹即可。然后再点击上图的验证，片刻后会出现验证成功

这时候没有意外的话等待 Google 去爬取下来就行，体感在1天多之后就可以在 Google Search 上搜索到了，在输入框中输入 site:<YOUR SITE> 即可看到出现在搜索结果中

接着可以回到 Google Search Console 中点击左上角的搜索资源，再点击刚验证网站

就可以进入网站管理，如下图

其中比较值得注意的是覆盖率，刚收录的网站一般没那么快记录得到覆盖率，需要过一段时间让 Google Search 完全爬取你的网站后，这里才会显示相关数据。当然在此之前我们可以手动上传 sitemap 地图，增强 Google Search 爬取网站的效率

站点地图

所谓站点地图就是标识了你的网站中能够被爬取到的网站，你需要给你网站的每一个页面提供引荐来源，才能让爬虫顺利进入对应的网页，最简单的做法就是使用 a 标签。例如下图，如果你想让你的这些被圈出来的页面被爬取到，你就需要在这些地方使用 a 标签来处理这些链接

然后我们可以对进行 sitemap 测试，用这个网站，把 url 输入进去等待片刻就能生成你的网站的 sitemap，可以查看到结果，结果列表显示了你的网站里能被正常爬取到的网站，如果没出现在上面，你可能需要对网站作进一步的优化，例如把所有的跳转链接都加上 a 标签

可以看到 sitemap 文件其实是一个 xml 格式的文件，sitemap.xml：

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
    <!--  created with Free Online Sitemap Generator www.xml-sitemaps.com  -->
    <url>
        <loc>https://blog-front-git-dev.hexuhua.now.sh/</loc>
        <lastmod>2020-10-24T16:26:23+00:00</lastmod>
        <priority>1.00</priority>
    </url>
    <url>
        <loc>https://blog-front-git-dev.hexuhua.now.sh/post/list?page=1</loc>
        <lastmod>2020-10-24T16:26:23+00:00</lastmod>
        <priority>0.80</priority>
    </url>
</urlset>

其中 priority 是指这个网页对于网站的重要性，但是事实上这个值完全不会影响 Google Search 的搜索排名，所以不需要管

接着同样把你生成的 sitemap.xml 扔进项目的根目录（本项目为 📂 public 文件夹），然后在 Google Search Console 的站点地图中输入你的站点地图文件即可

项目 SEO 优化

上面提到，想要让 Google Search 爬取到你的每一个网页，那就要使用 a 标签来给你的网页添加引荐来源，所以我只需要把本项目使用 Router.push() 地方改造成用 <Link><a>链接</a></Link> 的形式即可，包括 antd 的分页器的点击事件也要改造成这个形式，幸好 antd 早就预料到此处的 SEO 优化的坑，所以是支持开发者自己重新渲染分页器的组件的，改变 Pagination 组件的 itemRender 即可：

import Link from 'next/link'

const itemRender = (current, type, originalElement) => {
  if (type === `page`) {
    return (
      <Link href={`/post/list?page=${current}`}>
        <a target="_self">{current}</a>
      </Link>
    )
  }
  return originalElement
}

关于服务端渲染

而这里其实我遇到了另一个坑，涉及到服务端渲染的

NextJS 的特性是可以在初始化页面时在服务端完成数据的获取，直接把渲染完成后的页面丢到浏览器，这跟目前主流的 Ajax 页面的渲染局部——再获取数据——再渲染剩下的部分的做法不一样。当然 NextJS 项目在浏览器以后其渲染行为也是采用 Ajax 的方式的，区别在于第一次渲染是服务端渲染而已

实现这一点用到了 NextJS 的 getInitialProps 方法

Home.getInitialProps = async props => {
  const { isServer, store } = props.ctx
  if (isServer) { // 可以根据这个值判断 process 是否处在服务端，是的话请求数据并渲染，不然的话说明处在客户端，此时交给 React 的生命周期组件来实现请求数据的逻辑
    // fetch data
  }
  return { isServer }
}

而坑点就出在了 props.ctx 上，这个对象可以获得当前页面的 url 和 search 等属性或者 redux 的 store 状态方法等，但是偏偏不能获得当前页面的 hash 值。所以就跟上一篇提到的用 hash 值来获取当前页数的做法就失效了，这时候就相当于无法在服务端得知当前列表页的页数，就失去了客户端渲染的意义了，无法得到正确页面数据，也就失去 SEO 优化的意义

其实解决办法也很简单，虽然无法获取 hash 值，但是 props.ctx 中依然能正确获得网址的 search 值，也就是网址上 ? 参数后的值，所以根据上一篇的内容，只需要稍作修改，把 hashChangeComplete 改成 routeChangeComplete ，然后把路由字符串中用到了#的地方换成 ? 即可

关于 SEO 的一些想法

在我把 sitemap 完成并上传后，理论上 Google Search 就会去爬取我的网页，但是事实上并不是所有的网页都被收录了，在覆盖率那里可以看到，我的有效网页只有首页和列表页，我的所有文章详情页都标识为已排除，实际搜索中也只有首页和列表页出现在了搜索结果中

这是很奇怪的事情，而且当我在控制台上方输入某个文章详情页的地址进行检查的时候，他会显示尚未收录，但是也没有提示是什么原因

后来我找了一些资料，发现了以下内容

根据 “SEO 学” 学家 Brian Dean 的说法（来自 Google Search Console）：

“Crawled – currently not indexed” Hmmm…

These are pages that Google has crawled, but (for some reason) are not indexed.

Google doesn’t give you the exact reason they won’t index the page.

But from my experience, this error means: the page isn’t good enough to warrant a spot in the search results.

So, what should you do to fix this?

My advice: work on improving the quality of any pages listed.

For example, if it’s a category page, add some content that describes that category. If the page has lots of duplicate content, make it unique. If the page doesn’t have much content on it, beef it up.

Basically, make the page worthy of Google’s index.

翻译一下：

“已抓取，尚未收录”
嗯...
有些页面会被 Google 抓取，但因为某些原因没有被收录
Google 并没有给出明确的说明为何他们不收录这些页面
但是根据我的经验，问题可能出在了：这些页面的质量不足以在搜索结果中占有一席之地
所以，改怎么解决这个问题呢？
我的建议是：致力于提高你的这些网页的质量
例如，如果有一个目录页面，你可以添加一些内容来描述这个目录；如果一个页面有大量的重复内容，你可以删掉重复的部分；如果页面的内容不够丰富，那就丰富他
结论就是，让你的页面有足以让 Google 去收录的价值

结合我那几个被收录和没被收录的来看一下吧：

1. 被收录的页面：/、/post/list
2. 未被收录的页面：/post/6、/post/7、/about

我不是很确定为什么主页面和列表页这种目录索引页也能收录进去，但是剩下那三个页面确实是没什么质量的页面，不收录也是情理之中

结语

所以以上就是我本次博客开发的所有体验，收获还是不少的，希望也能给正在浏览的同学提供一点帮助