本文字数：2585字
预计阅读时间：8分钟
背景
近期团队开发的新产品的官网上线了，随之而来的问题就是如何让网站更快更好的传播出去。当然SEO就是最常见的手段之一，对官网的SEO工作有利于产品的网络传播和分享。
有的团队会有专人负责SEO的工作，那么作为离网站页面“最近”的前端工程师，可以为SEO做哪些工作呢？
为了更好的沉淀SEO相关内容，为后续web产品提供优化指南，本文就以前端工程师的角度，通过调研沉淀出了前端通用SEO技术优化指南。
优化方向
SEO常见的技术优化手段通常是针对于搜索引擎爬虫的，通过建立一系列约定的规则或手段来使得搜索引擎更好地抓取到网站的信息。
我们可以通过两种方式来提供搜索引擎想要的信息，一种是提供必要的信息在自身的网站服务上被动等待搜索引擎获取，我们可以命名为：“被动式SEO”。
还有一种是通过搜索引擎服务商提供的后台管理功能，直接把信息提供给搜索引擎服务商，我们可以命名为：“主动式SEO”。
被动式SEO是常规地针对所有搜索引擎都开放的优化方式，涉及范围广，使用标准规范。而主动式SEO是针对特定的搜索引擎服务商的优化，涉及范围窄但更有针对性，使用标准规范和特制规范。
被动式SEO
以下为常见的技术优化SEO的方式：
网站优化方向：
1、优化网站结构
设计简单易用：增加用户体验和爬虫体验，有助于搜索排名
突出用户引导 ：突出用户留存的关键步骤（例如注册、下载、登录、快速开始等）
移动端优先：适配移动端更易获取更多的流量和用户留存
简单清晰的导航（内链）：利于用户寻址、利于爬虫爬取
尽量减少使用js来渲染内容：搜索引擎对JS生成内容的爬取处理不佳，前端应用一般使用服务端渲染（SSR）来解决这类问题，避免使用纯客户端渲染（CSR）
打印优化：针对有打印需求的客户，增加用户体验
2、优化网站内容（内容是SEO的重中之重）
meta-tags
* 以下标签，可能由于搜索引擎服务商不同而又不同处理
（1）Meta title：标题
最佳实践：
一个页面使用一个不重复的标题
简单精准，避免通用模糊
使用短句或短语
突出搜索意图
内容不要过长，少于60个字符
编码：
<head><title>这里填写标题</title> </head>搜索引擎的关联展示
（2）Meta description：描述
最佳实践：
一个页面使用一个独立的描述
精准地总结页面内容，避免通用模糊的描述
使用句子
突出搜索意图
控制内容长度，少于160个字符
编码：
<head><meta name="description" content="这里填写描述"> </head>搜索引擎的关联展示：如上图
（3）Meta robots：搜索引擎告知
编码：
<head><meta name=”robots” content="${content}"> </head> <!-- content可选：index | noindex | follow | nofollow index: 告诉搜索引擎收录我 noindex：告诉搜索引擎不要收录我 follow：告诉搜索引擎爬取页面的links nofollow：告诉搜索引擎不要爬取页面的links 如果不设置此标签，等同于content="index, follow" -->
（4）Meta charset：字符集
编码：
<head><meta charset="UTF-8"> </head> <!-- 使用UTF-8 Unicode -->
（5）Meta keywords：关键词
警告：搜索引擎可能不使用该字段进行收录了，有些甚至认为是垃圾信息
google不用：https://webmasters.googleblog.com/2009/09/google-does-not-use-keywords-meta-tag.html
bing不用：https://searchengineland.com/the-meta-keywords-tag-lives-at-bing-why-only-spammers-should-use-it-96874
百度可能还在用：https://ziyuan.baidu.com/college/articleinfo?id=2961
最佳实践：
由于百度中文还是流量大户，如果使用，尽量简短有效，过长可能被认为是垃圾信息
如果不考虑百度，可以删除此标签
关键词可以让产品同学确认，常见关键词分类：
核心关键词
品牌关键词
长尾关键词
编码：
<head><meta name=”keywords” content=”s, ss, sss” /> </head>
body内容
标题：分级恰当，层级关系明确（标签：h1、h2、h3），标题含义明确
内容：丰富，准确
图片内容
文件名称语义化：img文件名称最好是有语义的，能标识该图片内容的
图片说明 alt-tag：img标签的alt属性值不能空，要填写该图片的描述
编码：
<img src="huyou.jpg" alt="xxxx">
3、语义化链接
网页中所有的内链语义化：
bad case：www.example.com/?p=123456
good case：www.example.com/topic-name
4、提升网站速度
前端常规优化手段进行网站速度优化，具体手段就不在本文展开。优化目标也是提升用户体验，当网站速度过慢（相关调查3s是极限），用户就会引起流失。
* 测速工具：
https://developers.google.com/speed/pagespeed/insights/
5、外部引流
通过各种手段为本站进行引流，提升本站的流量，提升搜索引擎权重
友情链接，站群等（跟搜索引擎机制有关，有些引擎会对外链增加搜索权重）
结合社交账号推广
在网站首屏显眼位置摆放社交账号
提供内容分享到社交平台功能
信息提供方向：
1、sitemaps 网站地图
提供给搜索引擎网站地图信息的协议，通过它可以告知搜索引擎关键path信息，类似网站的目录，可以手动配置，也可以使用生成器自动生成：https://www.xml-sitemaps.com/。
（1）格式
可以是XML、txt等格式，XML格式如下：
<!-- 详细配置见：https://www.sitemaps.org/protocol.html -->
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url><loc>http://www.example.com/</loc><lastmod>2005-01-01</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
</urlset>(2) 配置位置
网站根目录，有些搜索引擎可能会主动爬取。
可以在robots.txt中引用，见下个小结内容。
可以通过主动SEO方式，在搜索引擎服务商后台进行提交。
2、robots.txt 网络爬虫通信
该文件并不是一个标准规范，是一种约定俗成的协议。
（1）格式
User-agent: * Disallow: Sitemap: https://xxx.sohu.com/sitemap.xml（2）配置位置
网站根目录
（3）其它相关
独立页面也可以使用meta robots标签，和robots.txt可以一起使用，见上方内容。
主动式SEO
依赖各家搜索引擎服务商提供的后台服务功能来直接优化网站搜索，有些功能是免费的，有些功能是付费的，当然付费效果更好：）。常见的如竞价排名、直接购买搜索排名等方式。我们这里更关注技术优化的内容。
搜索引擎服务商
百度
搜狗
360
必应
谷歌
...
我们可以以360提供的站长功能来说明如何优化SEO：可以主动提供给360搜索引擎什么样的信息以及可以从引擎方得到哪些效果和功能。
360的站长平台的功能（实施方法参考指南：http://www.so.com/help/help_3_16.html）：
数据提交：网站更快、更多的被360搜索引擎收录（重点要去实施的）
数据分析：及时了解网站在360搜索的数据情况
搜索展现：优化网站页面在360搜索的展现
优化与维护：避免网站因改版或临时性关停而带来的收录、流量、排序等的损失
实施计划
通过以上的SEO调研，我们可以发现技术优化手段是有迹可循的，所以可以形成一种通用的模式来帮助网站进行SEO优化的自检和实施方案。
我们总结了如下的 SEO checklist 列表，作为通用SEO优化方案的实施手段应用在我们的网站上，也为之后其它产品进行SEO优化提供了切实可行的实施指南。
通用SEO优化方案 checklist
[ ] 1.优化网站结构
[ ] 设计简单易用
[ ] 突出用户引导 Call-to-Action (CTA)
[ ] 移动端优先
[ ] 打印优化
[ ] 简单清晰的导航（内链）
[ ] 尽量减少使用js来渲染内容
[ ] 2.优化网站内容
[ ] title
[ ] description
[ ] robots
[ ] charset
[ ] keywords
[ ] meta-tags
[ ] body内容
[ ] 图片内容
[ ] 3.语义化链接
[ ] 4.提升网站速度
[ ] 5.外部引流
[ ] 6.sitemaps 网站地图
[ ] 7.robots.txt 网络爬虫通信
[ ] 8.搜索引擎服务商后台SEO优化
[ ] 百度
[ ] 搜狗
[ ] 必应
[ ] 360
效果评估
当然，实施SEO优化方案之后要及时收集和统计数据，复盘优化效果，为后续提升SEO优化效果不断积累经验，形成方案不断自我进化的良性循环。但技术优化手段毕竟是有限的，SEO的优化同样离不开产品的规划、运营的引流、搜索引擎服务商洽谈合作等有效手段。作为前端工程师，我们不仅仅可以提供SEO优化的一条技术线，同样可以把上游和下游连接起来，综合推动SEO优化的进行，不仅能“制造”网站，也能为网站的推广和传播贡献自己的力量。
附录
名词解释
SEO：Search Engine Optimisation 搜索引擎优化
SERP：Search Engine Results Page 搜索引擎搜索结果页
反链数（外链）：指从别的网站导入到某网站的链接数量
参考文档
https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=zh-cn
https://medium.com/@coderacademy/15-seo-tips-every-front-end-developer-should-know-in-2016-d579b7cefb01
https://ahrefs.com/blog/seo-meta-tags/
https://ahrefs.com/blog/meta-keywords/
https://www.sitemaps.org/
https://zh.wikipedia.org/zh-hans/Robots.txt
也许你还想看
（▼点击文章标题或封面查看）
如何在Swift中实现状态机？
2021-09-23
你真的了解符号化么？
2021-09-16
Caffeine如何变热？
2021-09-09
iOS：制作简易的 AAC 播放器 —— 了解音频的播放流程
2021-08-26
iOS的CoreData技术笔记
2021-08-19
