前端通用SEO技术优化指南（前端怎么优化seo）

前端通用SEO技术优化指南（前端怎么优化seo）

布景

近期团队开辟的新产物的官网上线了，随之而来的题目就是若何让网站更快更好的传布进来。固然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个字符编码： 搜索引擎的关联展现

meta

（2）Meta description：描写

最好理论：一个页面利用一个自力的描写精准地总结页面内容，避免通用模糊的描写利用句子突出搜索意图控制内容长度，少于160个字符编码： 搜索引擎的关联展现：如上图

（3）Meta robots：搜索引擎奉告

编码：

（4）Meta charset：字符集

编码：

（5）Meta keywords：关键词

警告：搜索引擎能够不利用该字段停止收录了，有些甚至以为是渣滓信息google不用：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最好理论：由于百度中文还是流量大户，假如利用，只管简短有用，太长能够被以为是渣滓信息假如不斟酌百度，可以删除此标签关键词可以让产物同学确认，常见关键词分类：焦点关键词品牌关键词长尾关键词编码：

body内容

题目：分级得当，层级关系明白（标签：h1、h2、h3），题目寄义明白内容：丰富，正确

图片内容

文件称号语义化：img文件称号最好是有语义的，能标识该图片内容的图片说明 alt-tag：img标签的alt属性值不能空，要填写该图片的描写编码：

3、语义化链接

网页中一切的内链语义化：

bad case：http://example.com/?p=123456good case：http://example.com/topic-name

4、提升网站速度

前端常规优化手段停止网站速度优化，具体手段就不在本文展开。优化方针也是提升用户体验，当网站速度过慢（相关观察3s是极限），用户就会引发流失。

* 测速工具：

https://developers.google.com/speed/pagespeed/insights/

5、内部引流

经过各类手段为本站停止引流，提升本站的流量，提升搜索引擎权重

友谊链接，站群等（跟搜索引擎机制有关，有些引擎会对外链增加搜索权重）连系交际账号推行在网站首屏显眼位置摆放交际账号供给内容分享到交际平台功用

信息供给偏向：

1、sitemaps 网站舆图

供给给搜索引擎网站舆图信息的协议，经过它可以奉告搜索引擎关键path信息，类似网站的目录，可以手动设置，也可以利用天生器自动天生：https://xml-sitemaps.com/。

（1）格式

可所以XML、txt等格式，XML格式以下：

http://example.com/

2005-01-01

monthly

0.8

(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://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-cnhttps://medium.com/@coderacademy/15-seo-tips-every-front-end-developer-should-know-in-2016-d579b7cefb01https://ahrefs.com/blog/seo-meta-tags/https://ahrefs.com/blog/meta-keywords/https://sitemaps.org/https://zh.wikipedia.org/zh-hans/Robots.txt