Next.js SEO相关知识总结

写在前面

首先，我得坦诚，之前从未做过SEO相关的研究，也可以说我之前想当然的以为我写出来的上线页面应该被搜索引擎检索到😄。直到最近，因为比较沉迷Next.js，并且众所周知，作为一个SSR框架，主打的就是首屏渲染和SEO，然后在和很多小伙伴的交流过程中，一些人就会问，应该如何用Next.js做SEO呢？

最近两天我仔细思考了一下，确实是一个好问题，我在用Next.js写项目，然后Next.js优势之一是SEO，但是SEO又不是天生而来的，也就是需要我们开发人员利用好Next.js来做好网站的SEO。嗯，所以，这篇文章就出现了，我接下来给大家总结一下我的研究成果，和大家一起学习一下～

最后成果就是可以被检索出来～使用的是Next-Antd-Scaffold_seo分支这里只做了Google的优化，Baidu的没有去做，另外因为使用的是now部署，所以存在一些小问题，下面详细说。

SEO是什么

这里我就不甩名词了，我说了，在写这篇文章之前我也没怎么好好研究过。简而言之就是，SEO（Search Engine Optimization）—— 搜索引擎优化，目的是帮助我们的网站在Google或者Baidu搜索的时候排名会提升靠前，嗯，这么解释的话其实还是能感觉到很重要的。

并且，还了解到居然还有个岗位是SEO优化工程师，专门做网站的SEO也就是提升排名的工作的

如何做SEO

上面粗浅的了解了一下SEO，并且还出现了SEO优化工程师这个名词，感觉一下就高大上了，那是不是门槛很高，需要一定的学习时间啊。答案来了，作为前端工程师的我们，就有着得天独厚的优势，我们不需要做到优化工程师的级别，我们只需要做好几个方面，就能完成一个网站80%左右的SEO优化工作了～因为我研究下来发现SEO针对点大部分都是前端基础～

HTML标签

我们能被搜索引擎检索出来或者说我们想被搜索引擎检索出来，那是因为搜索引擎（爬虫）提前爬取了我们网站的html代码，然后对html标签进行过滤等等操作，做好SEO的第一步就是要了解HTML标签并且使用好它们。

不同的html标签在SEO方面有着自己的权重，有很多很多，我大致整理了一些重要的：

HTML标签	含义	SEO权重
`<title>`	标题	10分
`<a>`	内部链接文字	10分
`< h1 >/< h2 >`	标题，其实是H1 ~ H6，不过H1和H2是最重要的，一般一个页面最好一个，不要过多使用	5分
`<p>`	每段首句	5分
`<p>`	每句开头	1.5分
`<b>/<strong>`	加粗	1分
`<a title='' />`	title属性	1分
`<img alt=''>`	img alt标记	0.5分
`<meta description=''>`	meta标签的网站description	0.5分
`<meta keywords=''>`	meta标签的网站keywords	0.05分

除了上面几个之外，还有个比较重要的7分权重，是域名，不过这个就不在标签范畴，就不列出来了。

域名的重要性从文章首图就可以看得出，github和掘金的域名明显就要高很多，哈哈，检索出来就排在前面～

SEO优化

看完了上面的html标签权重，我们就知道了，SEO优化的重点就在这里了（当然，还有其他方面）。我总结了下面几点：

网站首页 —— 静态页

这里值得讨论一下，如果大家用的是CRA之类的SPA非SSR渲染的脚手架，那么可能对SEO不是很友好，但是呢又希望网站首页可以被搜索引擎检索到，那么最好的办法就是写一个静态的HTML首页，然后通过登录的方式跳转到系统home页，毕竟静态页才是SEO的王道真理～并且很多案例也都是这样的

我公司这边有几个也是这样的，一个直出的HTML静态页是首页，然后登录跳转入系统～

标题 + 内部链接

上面可以看到，标题和内链两个权重10分以及H1～H6的5分。所以我们在每个页面内要写好标题。具体如下：
- 每个页面对应的title
- 同一网站所有页面都有内链可以指向首页
- 每一个页面有且只有一个H1，H1不能过多，否则不能达到效果
Meta标签优化

虽然对于搜索引擎来说，Meta标签的权重越来越低了，但是还是不可忽略的，毕竟这也算是对我们网站的介绍，写的详细一些总是有好处的。主要是Meta description、Meta keywords的设置。
文本标记和img
- 文本标记类，比如<b>和<strong>加粗文本的标签，搜素引擎会注意到它们，如果你有想特别说明的地方，可以使用它们。
- img标签的alt属性很重要，当图片出现问题不能显示，可以给搜索引擎一个可访问的内容
针对搜索引擎做优化（sitemap.xml/robots.txt/favicon.ico）

一般搜索引擎来爬我们的网站会优先去网站根目录找这三个东西，sitemap.xml也就是站点地图；robots.txt里面包括一些设置，你允许爬虫爬哪些内容，不允许哪些被爬，还有就是允许哪些搜索引擎去爬等等；favicon.ico可能没那么重要，但是也是网站必不可少的一部分～

这一段内容放在下面Next SEO部分详细说一下

看完这些，说实话，我回头看了几个以前写的项目，确实对SEO不是很友好啊😄。所以我觉得以后的项目一定要做好这些，因为其实真的很简单，只要我们在项目初始化的时候用心写十分钟，然后开发过程中养成好习惯，就可以了～鼓励看完的小伙伴从今以后都养成好习惯，这样我们以后如果去面试，面试官问我们做过SEO吗？你可以骄傲地说：我写的代码一直都是SEO Friendly 😄

Next.js的SEO方案

言归正传，本篇的主要目的就是Next.js的SEO方案，Next.js作为SSR框架，SEO是很擅长的，为什么这么说？先来一个例子：我们来看看魅族官网：

Google搜索魅族，第一条映入眼帘，接下来看看网站代码：

标准的Next.js应用，但是，如果小伙伴使用一下就会发现，魅族只是用Next.js写了个首页，其他的地方都是跳转的，也就是除了首页之外都不是Next.js写的，给人一种杀鸡焉用宰牛刀的感觉，个人觉得写一个静态HTML首页可能也能达到相同效果吧😄。不过也侧面反应了Next.js确实是非常适合SEO的，接下来我们就来尝试一下。

善于利用Next Head

首先，我们知道，Nextjs并没有CRA那样，public文件夹下面给我们一个index.html文件，但是却给我们提供了Head组件帮助我们修改页面的head结构，比如下面的代码就是我得_app.js的部分代码。

  import Head from 'next/head';
  ...
  <Head>
    <meta name='viewport' content='width=device-width, initial-scale=1' />
    <meta charSet='utf-8' />
    <title>Next-Antd-Scaffold - A better scaffold of Next.js</title>
    <meta name='keywords' content='next.js,antd,scaffold' />
    <meta name='description' content='🏠 A simple scaffold based on Next.js for quick use with ant-design, redux, redux-saga, fetch and pm2.' />
    <link rel='shortcut icon' href='/static/favicon.ico' type='image/ico'/>
  </Head>
  ...

除了Next自带的Head组件，社区还有很多开源项目，比如next-seo，应该也是基于Head封装的，只不过里面包含了很多更高级的用法，感兴趣的朋友可以自行去研究。

Next.js针对搜索引擎优化

上面提到过了，针对搜索引擎优化主要是sitemap.xml和robots.txt。那么我们就来写一下：

这两个我也不是很懂，所以就是简单的抛砖引玉，大家想更详细的了解去网上自己研究研究。

sitemap.xml

这个部分我就是直接从Google的sitemap生成工具生成的，也很简单，填写我们的网站链接就可以了，大家可以详细的去看一看。

// sitemap.xml
<!-- This file content should be replaced with the sitemap file content of your own site -->
<?xml version="1.0" encoding="UTF-8"?>
<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://next-antd-scaffold.luffyzh.now.sh/</loc>
  <lastmod>2019-08-05T11:04:12+00:00</lastmod>
</url>
</urlset>

robots.txt

这个就更随意了，这个是配置网站允许搜索引擎访问的和不允许访问的以及很多其他相关的配置，很多很多，这里我就非常简单的写两个：

// 允许所有搜索引擎检索到
User-agent: *
// 网站的sitemap地址
Sitemap: http://example.com/your_sitemap.xml
// 不允许被访问的页面，路径等
Disallow:

配置相关

最后，说过了，搜索引擎访问的是根目录下的/favicon.ico、/sitemap.xml和/robots.txt，因此我们需要在server.js进行配置。

// server.js

/**
 * Deal SEO
 **/
server.get('/robots.txt', (req, res) => (
  res.status(200).sendFile('robots.txt', {
    root: __dirname + '/static/',
    headers: {
      'Content-Type': 'text/plain;charset=UTF-8',
    }
  })
));

server.get('/sitemap.xml', (req, res) => (
  res.status(200).sendFile('sitemap.xml', {
    root: __dirname + '/static/',
    headers: {
      'Content-Type': 'text/xml;charset=UTF-8',
    }
  })
));

server.get('/favicon.ico', (req, res) =>
  res.status(200).sendFile(path.join(__dirname, 'static', 'favicon.ico'))
);

上面提到了，我现在部署的网站有一点瑕疵，是通过now部署的serverless服务，并不能通过/sitemap.xml来进行访问，依然要通过/static/sitemap.xml来进行访问，所以我网站更新了内容，又希搜索引擎重新爬取怎么办？Google为我们提供了解决方案

如下图，我们可以通过在浏览器携带参数的形式来发送我们的网站站点地图，然后我在浏览器发送了我的站点地图之后的反馈如下：

如图所示，Google收到了我的请求，改动应该会在下次爬取过后生效吧，不过查了一下，从提交到最后显示到搜索列表可能需要几天的时间，～期待中😄

文章开头图所示的检索内容，我得网站Title写错了，我更新了一次，然后发送了sitemap.xml，到目前为止（小半天未发生什么变化）。等变化生效了应该就可以了～如果生效了，我会第一时间在下方评论，花费了几天时间～

总结

好了，到这里文章就结束了，希望能帮助大家（不了解SEO的同学和应该怎么用Next.js写好SEO的同学）有那么一点帮助吧。

最后的最后，代码和脚手架在这里，点🌟不迷路～哈哈Next-Antd-Scaffold