以前没做过前端开发，最近想做网站才开始学习，由于国内Vue比较火，看起来也比较好学，于是我就直接上手Vue3，并用Vue3开发了一个网站。
在网站申请ICP备案阶段，才想起网站要怎么被搜索引擎发现并收录，搜了一些文章看，才知道SEO这个词，于是看了一些SEO方面的书，也看了一些文章。是真正的从零开始了。
网站初步的SEO优化
- 响应速度优化。毋庸置疑，打开卡半天的网站谁想用呢。速度慢也会影响搜索引擎的收录。
- 让用户信任。这一步刚开始没什么好说的，至少要购买个tls证书，让浏览器不要提示网站不安全的标志，阻止用户访问网站。
- 网页标题和关键词、页面描述。这几个页面元素是非常重要的，介绍你的网站是干什么的，每个页面都提供什么功能。
- 让搜索引擎蜘蛛能爬取到网站的内容最关键，内容都抓取不到，也就不用谈其它的优化了。
- 网页访问统计。
那么关于这几点我是怎么做的呢
响应优化
我的网站是Serverless架构，部署在阿里云的ACK上（Serverless版的K8s）。
由于目前阶段是探索做国内站，而国内网站都要备案，ICP备案需要有虚拟机，所以也买了个2c2g的ECS实例，用这个ECS部署一个网关。后面所有网站的入口都是这个网关，实际访问的网站前端、后端都在背后的K8s集群。
由于前期网站没什么流量，容器基本都是最低规格的0.25c0.5，另外ECS的公网带宽才1Mbps，实际访问感觉到明显卡顿。阿里的全站加速DCDN是按需付费的，于是开通了CDN用来缓存一些图片类的静态文件。
购买证书
不接触不知道，一接触吓一跳，证书好贵。只能找便宜证书用了，阿里提供免费的证书，但只有三个月有效期，没办法，只能三个月更新一次。
证书购买后，由于我用CDN回源，可以一键把证书部署到CDN上，这样网站就可以https访问了。但我选择配置cdn保持https回源，所以下载证书上传到ecs，给网关配置证书，最后配置网关拒绝直接非https的请求，并重定向到https。
网页标题和关键词、页面描述
用Vue3开发的网站，只有一个index.html，只能在index.html配置网站的title和meta标签。但是如果网站有多个页面，且每个页面功能不同的话，还是需要为每个页面单独设置title和meta的，以便被搜索引擎更好的收录和能够被用户搜索到。
Vue应用可以用vue-meta-info这个插件，这样可以在关键页的vue代码文件中重置title和meta标签内容。
需要注意，index.html的title和meta我们还是要保留，一些其它不重要的页面可以使用。但我们需要给index.html的meta标签加上data-vue-meta-info=“true”，这样vue-meta-info插件就会替换现有的名为description和keywords的meta标签，而不是重复添加。
让搜索引擎蜘蛛能爬取到SPA单页应用的内容
SPA是Single-page application的缩写，即单页应用。这种应用的特点是，页面是在浏览器渲染而不是在服务器渲染返回，是通过浏览器执行js渲染的。
搜索引擎蜘蛛爬取链接内容，其实跟我们执行curl命令访问链接一样，页面的js不会被执行，爬虫也就获取不到页面内容。
网上给的解决方案有三种：
- 将页面渲染工作放到服务器渲染。
- 编译构建阶段将主要页面进行预渲染。
- 针对爬虫，将请求转发到一个代理服务，这个代理服务将模拟用浏览器去访问链接，将渲染后的页面内容返回。
前面两种方案要么改动太大，要么就是有缺陷，一开始我的选择是第三种方案。单独针对爬虫，在网关的ECS实例上用Docker部署一个代理服务，用到Chrome。
我是用go语言开发了SEO爬虫代理服务，这个服务只服务于爬虫。
但是上线后发现访问特别的慢，每个请求要十几秒，起初怀疑是网络问题，但是通过升级ECS的公网出口带宽后，浏览器开发者工具查看资源的请求都很快，但是首页的渲染还是有一点卡顿。于是又针对首页渲染卡顿问题做了优化，将首页多个Tab页拆分成多个单独的页面放到多个子菜单上。
原本走SEO爬虫代理服务的请求平均耗时是12秒+，首页优化后，请求平均耗时已经降低到4秒+。所以确实是首页太复杂导致的卡顿。正常浏览器访问首页已经没再出现卡顿。优化到4秒还是太慢，但是首页基本不剩什么了，没什么可优化的了。于是我怀疑是SEO代理服务的CPU性能问题，限额是0.25c0.5g。我将容器的CPU和内存限额升到2c2g后，请求耗时降低到700毫秒+。然后我调低到0.5c1g后，耗时又升到了2秒+。
结论就是使用无头Chrome浏览器渲染页面消耗性能，对CPU有要求，至少需要2核的CPU才能达到用户正常访问页面的效果。也就是-钱能解决的事情。但是只是为了给搜索引擎蜘蛛爬虫访问，启个那么高配置的容器实在是浪费钱。
于是我就研究还有什么办法。。。
我发现，当我搜索一些工具的时候，往往搜索结果是这个工具的文档或者说是官网。我开始明白了，搜索引擎更喜欢内容，我们需要靠内容来让搜索引擎收录，所有我就给工具网站做了一个纯静态的文档官网，让搜索引擎收录这些文档，然后从文档链接到工具首页。并且文档还有一个作用，就是教用户怎么用。
另外，通过实践，我发现Google搜索引擎是支持SPA单页应用的爬取的。Google的SEO文档也有介绍：Google支持抓取单页网站，会执行js代码获取渲染后的页面分析，只是收录会慢一些。 但是必应和百度这两大搜索引擎不支持。
网页访问统计
网站上线后，肯定要统计网站的访问量，以及每个页面的访问量这些信息。有数据才能知道下一步要做什么。
一开始想着自己做，统计的功能也没啥难的，在每个页面执行个js代码，请求服务端的一个页面统计接口。但是自己统计的数据意义不大，也没有可信度。我选择的是Google Analytics，这个是免费的，而且跟Google搜索引擎同一家。接入其实很简单，网上也非常多的教程。