背景近日，团队开发的新产品官网已经上线，随之而来的问题就是如何让网站传播得更快更好。当然，SEO是最常用的方法之一。官网的SEO工作有利于产品的在线传播和分享。有的团队有专人负责SEO，那么作为“离”网站页面“最近”的前端工程师，能为SEO做些什么呢？为了更好的沉淀SEO相关内容，为后续的网页产品提供优化指南，本文从前端工程师的角度，通过研究沉淀了一份前端通用SEO技术优化指南。优化方向SEO常见的技术优化手段，通常都是针对搜索引擎爬虫的。通过建立一系列约定的规则或手段，搜索引擎可以更好地抓取网站信息。我们可以通过两种方式提供搜索引擎需要的信息。一种是在我们自己的网站服务上提供必要的信息，被动等待搜索引擎获取。我们可以将其命名为：“被动SEO”。另一种是通过搜索引擎服务商提供的后台管理功能，直接向搜索引擎服务商提供信息。我们可以将其命名为：“ActiveSEO”。被动SEO是一种对所有搜索引擎常规开放、涉及面广、使用标准规范的优化方法。ActiveSEO针对特定的搜索引擎服务提供商进行优化，涉及范围较窄但针对性更强，采用标准规范和特殊规范。被动SEO以下是SEO技术优化的常用方法：网站优化方向：1.优化网站结构设计简单易用：增加用户体验和爬虫体验，帮助搜索排名突出用户引导：突出用户留存的关键步骤（如注册、下载、登录、快速启动等）Mobile-first：更容易适配移动端获得更多流量和用户留存。简单明了的导航（内部链接）：有利于用户寻址和爬虫抓取。尽量少用js渲染内容：搜索引擎对JS生成的内容抓取不好。前端应用一般使用服务端渲染（SSR）来解决此类问题，避免使用纯客户端渲染（CSR）。打印优化：针对有打印需求的客户，增加用户体验2.优化网站内容（内容是SEO的重中之重）meta-tags*以下标签可能因搜索引擎服务商不同，处理方式不同（1）Metatitle：标题最佳实践：页面使用简单而准确的非重复标题，并避免一般性的歧义。使用简短的句子或短语来突出搜索意图。内容不要太长，少于60个字符编码：
在这里填写标题搜索引擎相关展示(2)Metadescription:Bestpracticefordescription:Usean页面独立描述，准确概括页面内容，避免笼统和模棱两可的描述使用句子突出搜索意图控制内容长度，小于160个字符编码：
搜索引擎相关显示：如上图(3)Metarobots：搜索引擎通知代码：(4)Metacharset：字符集编码：>(5)Metakeywords:关键字警告：搜索引擎可能不会使用这个字段进行收录，有些甚至认为是垃圾邮件。谷歌没有：https://webmasters.googleblog。com/2009/09/google-does-not-use-keywords-meta-tag.htmlbing不使用：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最佳实践：由于百度中文仍然是一个大流量用户，如果你使用它，尽量简短有效。如果太长，可能会被视为垃圾邮件。如果不考虑百度，可以删除这个标签。词品牌关键词长尾关键词编码：bodycontenttitle：分类恰当，层级关系清晰（标签：h1，h2，h3)、标题意思和内容明确：图片内容丰富准确文件名语义：img文件名最好有语义，能识别图片内容的图片描述alt-tag：img的alt属性值标签不能为空，填写图片的描述代码：3.对网页内所有内链进行语义化处理：不好的情况：www.example.com/?p=123456goodcase:www.example.com/topic-name4.提升网站速度常规的前端优化手段是优化网站速度，具体手段本文不再展开。优化目标也是为了提升用户体验，用户会造成流失。*测速工具：https://developers.google.com/speed/pagespeed/insights/5。外引流利用各种手段为本站引流，增加本站流量，增加搜索引擎权重。友情链接、站群等（与搜索引擎机制有关，部分引擎会增加外链的搜索权重）结合社交账号的推广，将社交账号放在首页显眼的位置该网站向社交平台提供内容共享。站点地图信息的协议，通过它可以通知搜索引擎关键路径信息，类似于网站目录，可以手动配置或由生成器自动生成：https://www.xml-sitemaps.com/。(1)格式可以是XML、txt等格式。XML格式如下：http://www.example.com/2005-01-01monthly0.8(2)配置网站根目录，部分搜索引擎可能会主动抓取。可以在robots.txt中引用，见下总结。可以通过主动SEO在搜索引擎服务商后台提交。2.robots.txt网络爬虫通信该文件不是标准规范，而是约定俗成的协议。（1）FormatUser-agent:*Disallow:Sitemap:https://xxx.sohu.com/sitemap.xml（2）配置位置网站根目录（3）其他相关独立页面也可以使用metarobots标签，robots.txt可以一起使用，见上文。ProactiveSEO依靠各种搜索引擎服务提供商提供的后台服务功能，直接优化网站搜索。有些功能是免费的，有些功能是付费的。当然，有偿的效果更好:)。常见的方式有竞价排名、直购搜索排名等。这里我们更关注技术优化的内容。搜索引擎服务商百度搜狗360BingGoogle...我们可以通过360提供的站长功能来说明如何优化SEO：哪些信息可以主动提供给360搜索引擎，哪些信息可以获得从引擎中获得了哪些效果和功能。360站长平台功能（实现方法参考指南：http://www.so.com/help/help_3_16.html）：数据提交：网站速度更快，更容易被360搜索引擎收录（要点数据分析：及时了解网站在360搜索中的数据搜索展示：优化网站页面在360搜索中的展示优化维护：避免网站改版或临时停运等。通过以上SEO研究，我们可以发现技术优化方法是有迹可循的，因此可以形成一个通用模型，帮助网站进行SEO优化自检和实施方案。我们总结了以下SEOchecklist清单，作为通用SEO优化方案的实施方法应用在我们的网站上，也为日后其他产品的SEO优化提供了切实可行的实施指南。一般SEO优化计划清单[]1。优化网站结构[]简单易用的设计[]突出用户引导号召性用语(CTA)[]移动优先[]打印优化[]简单明了的导航（内部链接）[]尽量减少使用js渲染内容[]2。优化网站内容[]标题[]描述[]机器人[]字符集[]关键字[]元标签[]正文内容[]图像内容[]3。语义链接[]4．提高网站速度[]5。外引流[]6.sitemapssitemap[]7.robots.txt网络爬虫通信[]8.搜索引擎服务商后台SEO优化[]百度[]搜狗[]Bing[]360效果评估当然，实施SEO优化方案后，需要及时收集统计数据，回顾优化效果，以及不断为后续提升SEO优化效果积累经验，形成方案不断自我进化的良性循环。但技术优化手段毕竟有限，SEO优化也离不开产品策划、运营引流、搜索引擎服务商协商合作等有效手段。作为前端工程师，我们不仅可以提供SEO优化的技术线路，还可以串联上下游，全面推进SEO优化。我们不仅可以“制造”网站，还可以为网站的推广和传播做贡献。力量。附录术语解释SEO：SearchEngineOptimization搜索引擎优化SERP：SearchEngineResultsPage搜索引擎搜索结果页面的反向链接（外部链接）数量：指从其他网站导入到某个网站的链接数量
