一、前言
还记得之前职级晋升被问到你的网站在SEO上面做了什么？我很淡定的讲：就最常见的meta标签、语义化标签、图片alt属性等处理下，我想很多人应该和我一样。
最近一段时间因为业务的需要，在SEO上做了一些努力，今天整理下
一般官网是需要做SEO的，特别是国外的网站，很多都是各自营销的，就更需要借助SEO来推广。以前我们常用前后端不分离的方式，通过后端渲染HTML后，返回给浏览器，这样就能保证文章或关键字被搜索引擎抓取。
随着前端的发展，出现了前后端分离的开发模式，流行的SPA模式直接废了SEO，但SEO还是需要的，所以出现了很多帮助网站提高SEO效果的框架。
这些框架实现原理主要包括下面两种方式：
服务端渲染，指的是页面在服务器上根据逻辑生成html页面，输出给浏览器。
1、Next.js（React）
2、Nuxt.js（Vue）
适合动态站点，包括电商、页面更新频繁的业务，大型应用。
没有后端经验的小伙伴，在理解SSR上总是不得其法，要知道SSR是需要服务端配合的，对于前端生态来说，你的代码是跑在Node环境下的，所以一般需要配合Node服务，当然也可以跑在Docker中。
预渲染，指的是直接将数据和页面提前构建成静态资源给浏览器使用。
1、Gatsby
2、静态站点生成（直接构建成html资源）
适合小站点，和后端数据交互较少的业务。
二、SEO优化点
框架一般是来生成html展现给浏览器，让爬虫可以获取页面的数据，所以首先你的前端架构就要支持SEO的能力。
在处理了这个问题后，还有没有其他的SEO方法，来帮助站点提高排名？
下面是找到资料，关于谷歌搜索引擎的规则，只有掌握了规则，才能利用规则来放大SEO的效果。总结下来就是用心做好你的网站，输出有价值的内容。
这张图应该怎么理解呢？每一个方块都是一条SEO的建议，每个颜色表示一个大类。这里分为：内容、网站结构、html、站点影响力、外链、用户行为和市场行为
小方块的内容：
+3: 表示这样做可以达到的效果+1->+5，效果依次增强，如果是负数，表示这样做会降低搜索引擎的排名Ex: SEO的标识项，就是简写的唯一标识EXAMPLE: 名称DESCRIPTION: 描述这一项具体该怎样做CATEGORY: SEO大类
下面我们具体来说明下上面图中展示的SEO方法
1、站点内容
| 指标 | 权重 | 具体内容 |
|---|---|---|
| 内容质量 | +5 | 页面内容必须写得好，有实质性的质量 |
| 关键词 | +4 | 找到发现人们可能用来找到你的内容的关键字，并嵌入页面 |
| 搜索引擎显示 | +4 | 创建可以在SERP中转化为答案的内容。即搜索问题时，站点更好的命中答案 |
| 内容深度 | +4 | 追求内容的实质，而不是只注重表面的东西 |
| 持续更新 | +3 | 定时更新你的站点，下掉无法访问的页面 |
| 多媒体资源 | +3 | 给你的站点添加音视频 |
内容为王，如果你的内容可以帮助持续产生价值，并让用户反复访问，无疑代表你的站点内容价值较高，这是内功，只有修炼好内功才能走的更远。
2、网站结构
| 指标 | 权重 | 具体内容 |
|---|---|---|
| 容易爬取 | +5 | 搜索引擎必须能够轻松抓取您的页面 |
| 兼容平板和手机 | +4 | 针对智能手机和平板电脑进行优化，站点都能打开正常 |
| 页面结构 | +4 | 页面使用语义化标签，确保人和机器更容易理解 |
| 一致性 | +4 | 确保手机端和PC端页面保持一致 |
| 页面地址 | +3 | 页面地址中可以加入关键词 |
| 重复地址 | +3 | 重复地址规范重定向 |
| 访问速度 | +2 | 你的站点应该在任何设备上都能快速打开，为用户交互做好准备 |
| 安全 | +1 | 确保使用https保证安全性 |
这部分我们可以通过一些工具来分析：pagespeed.web.dev/ 比如下面我们分析站点，就会给我们反馈哪些方面存在问题，进行优化即可
3、HTML代码优化
这部分是我们最容易想到和处理的。
| 指标 | 权重 | 具体内容 |
|---|---|---|
| 站点标题 | +5 | 在页面标题中加入关键词 |
| 数据规范 | +4 | 结构化数据可以增加展示 |
| 文章标题和副标题 | +3 | 加入关键词 |
| 内容位置 | +2 | 在网页加载时，页面上发生的内容位移应该尽量减小，以改善用户体验 |
| Meta标签 | +2 | Meta标签描述信息 |
| 图片的alt属性 | +1 | 图像的Alt文本提高了可访问性和图像SEO |
将整理的关键词和用户常搜索的词条写入站点，可以更好的匹配用户搜索的内容。
4、站点权威性和影响力
| 指标 | 权重 | 具体内容 |
|---|---|---|
| 专业能力 | +5 | 企业应该提供专业文章来作为某个问题或行业的领导者 |
| 权威 | +5 | 权威就是一切，像垂直链接、分享和其他的指标 |
| 信任 | +4 | 运营多年的老站点，保持行业一致 |
当你的站点有了一定的影响力或者是行业头部，那么自然会带来更多的流量
5、外链质量
| 指标 | 权重 | 具体内容 |
|---|---|---|
| 链接质量 | +5 | 链接站点的权重 |
| 外链内容 | +4 | 行业相关的 |
| 外链数量 | +2 | 更多高质量的外链 |
这部分也是我们很容易做到的，通过关联其他相同的站点来引流。
6、用户行为
| 指标 | 权重 | 具体内容 |
|---|---|---|
| 回头客 | +4 | 更好的用户体验，用户重复访问 |
| 用户搜索意图 | +4 | 根据意图匹配关键字 |
| 用户的位置 | +3 | 国家、城市和地理位置，加入Google My Business列表 |
| 停留时间 | +2 | 提供更吸引人的内容，鼓励用户在站点停留 |
总的来说，谷歌浏览器需要你提供更优质的内容。 正的权重会增加网站的排名
7、其他
- +5: 免费加入Google My Business列表，相当于在谷歌录入站点的公司的信息，更容易展示给附近的用户
- +4: 优化站点，蹭相关的热点信息
- +4: 为用户订阅个性化的新闻
- +3: 内容存档
- +3: 每页都必须包含至少一张图片。如果高度为800像素，则图像宽度至少为1200像素
- +5: 内容应该是容易理解的
- +4: 直观的产品介绍，让买家更容易获得他们需要的东西
三、SEO减分点
以下都是不应该做的，如果被发现会收到惩罚
| 指标 | 权重 | 具体内容 |
|---|---|---|
| 站点内容 | -5 | 站点内容和用户搜索不一致，或具有欺骗性 |
| 不道德 | -4 | 购买链接，垃圾博客等等都是会让你受到惩罚的策略 |
| 内容问题 | -4 | 谷歌惩罚自动/生成内容、抓取内容和门户页面 |
| 恶意的行为 | -4 | 网络钓鱼、木马、恶意软件和黑客会把你踢出索引 |
| 过量的关键词 | -4 | 这是在网页上过度使用关键词，以试图提高在搜索引擎中的排名。过度使用关键词使内容不自然，影响用户体验，而且搜索引擎通常会对其进行惩罚 |
| 盗版 | -2 | 托管盗版内容可能导致您被标记或受到警告或惩罚 |
| 大量广告 | -2 | 大量广告内容、侵入式插页广告都不是好主意 |
四、实际实践部分
其实中间有很多内容是无法处理的，这就产生了SEO和运营的工作。
作为研发，在此次处理过程中主要做了以下参考，如果有类似需要的小伙伴可以参考下：
1、Meta信息
页面title和description信息
2、提高加载速度
通过提取公共包、CDN等手段，提高网站访问速度包括PC和移动端，并用测速工具检查分析问题。
3、产品文档
调整产品部署在二级目录，根据谷歌搜索引擎规则，二级域名和主域名是完全分开的两个站点。
比如主站点是：https://example.com，如果产品文档域名是https://docs.example.com，那就把产品文档的SEO效果大大减少了，建议部署在https://example.com/docs下。
4、外链建设的原则（建设中）
外链相当于其他站点对于我们站点的投票，票数越多排名越靠前。具体可以做如下操作：
- Github项目推荐，技术博客推荐，企业官网推荐、技术论坛帖子推荐
- 外链并不是越多越好，质量大于数量
- 开启社会媒体渠道，绑定自己的网站
- 到各大博客论坛回复问题，分享自己网站的链接
5、新增robots.tx和sitemap文件
相当于直接将网站的站点地图提交给搜索引擎，可以借助工具自动生成。
6、建设自己的博客（建设中）
找到和业务相关的话题，开通自己的博客站点，然后来发布相关文章，满足用户的搜索需求。
因为自行搭建博客比较费时间，所以这里通过调研整理了几个常见博客的工具，各有优缺点。
- 1、wordpress部署安装简单，老而全，几乎支持你能想到的配置，各种主题还可以通过拖拽生成页面，配置较为复杂，包括后台管理系统。
- 2、halo 包括后台管理系统，比较强大的博客，主题也很丰富，但不支持二级目录下部署。
- 3、hexo markdown语法静态文件，生成html文件，没有后台管理系统，静态资源方便部署，插件系统强大，需要配置，可以支持自行开发主题。
- 4、blogger、wix类站点直接注册集成，自定义域名需要付费，且一般不支持二级子目录
五、总结
以上技巧都是辅助，可以帮助更好的做站点推广，但是要切记，在内容质量前，一切都是浮云，为用户提供自己站点的价值，才能让网站走的更远，而不是投机取巧，昙花一现。