⛳前端进阶：SEO全方位解决方案前端seo

SEO即搜寻引擎最佳化/搜寻引擎优化，是指通过了解搜寻引擎自然排名的算法逻辑，提高目标网站在相关搜寻引擎内排名的方法。网站的SEO极为关键，它能使网站获得更优排名和流量，提升网站知名度。对于盈利性网站而言，做好SEO还能以低成本提高投资回报率。

TDK优化

TDK是Title(页面标题)、Meta Description和Meta Keywords的缩写，对这三个信息的提炼是网站SEO的重要环节。不过，由于某些原因，各大主流搜索引擎基本都大大降低甚至去除了keywords对排名的影响。例如，百度几乎放弃了对keyword标签的参考价值，必应目前keywords标签仍对排名有一定影响。

title标签 - 网站名片title标签相当于网站的名片，会直接显示在搜索结果中。一个好的标题能为网站带来流量，进而提升排名。需注意，网站标题避免冗长，比如掘金。

META标签 - 网站信息META标签是网页head区的辅助性标签，其作用是通过配置一些参数来描述页面属性。目前几乎所有搜索引擎都使用网络机器人自动查找meta值来给网页分类。

meta标签如何使用meta标签的属性有name和http - equiv两种。

“name”属性：

Keywords(关键词，现在不再重要了)：用逗号分隔的关键词列表；description(网站内容描述，很重要)：页面描述，搜索引擎会将此描述显示在搜索结果中；format - detection：格式检测，如禁止识别电话、邮箱等；author：作者名字；Robots：告诉搜索机器人哪些页面需要索引，哪些不需要；theme - color：网站主题色。例如：。 - “http - equiv”属性：http - equiv相当于http的文件头作用，可向浏览器传回有用信息，以帮助正确和精确地显示网页内容。例如meta http - equiv = "参数" content = "参数变量值"；refresh(期限)：定义文档自动刷新时间间隔；set - cookie：若网页过期，存盘的cookie将被删除。 - 关于网站关键词虽然keywords关键词已被各大搜索引擎降低权重，但仍有其存在价值。若决定配置网站关键词，需注意：关键词数量控制在1 - 4个左右，避免堆砌；合理选择长尾关键词；避免使用过于专业的词汇；减少使用热门关键词，选择合适的关键词。 - 关于网站描述Description长度最好控制在120 - 200个字符；要让用户知道能从页面中获得什么；合理使用行动号召用语；Description应包含页面核心关键字；为每个页面创建独一无二的Description。

网站质量

确保页面性能网站性能会影响SEO排名，原因如下：网站卡顿会大幅降低用户留存率；若网站加载缓慢，搜索引擎会认为对用户不友好，从而降低其排名；还会影响搜索引擎蜘蛛的爬取频率等。

HTML语义化语义化是指内容的结构化和选择合适的标签。开发时要杜绝通篇div，HTML语义化便于开发者阅读，也利于浏览器爬虫解析，对seo优化大有帮助。应根据页面内容选择合适标签，优化代码，使网页结构更清晰。

h标签h标签共六个，分别是h1，h2…h6，h1 - h6文字由大到小，权重逐渐降低。h标签在页面中的权重很高，不要滥用。h1写主标题，通常与网页title标签一致，可在页面展示，一个页面最好只有一个h1标签；h2写次级标题，h3 - h6以此类推，细分网页结构。

strong、em标签b和strong标签都能加粗文字，区别在于b是单纯加粗，strong是为了强调而加粗。斜体标签i和em同理，em有强调效果。推荐使用strong、em，单纯修改加粗等样式可用css实现。

ul、ol、li标签这三个是列表标签，ul表示无序列表，ol表示有序列表(ordered list)，li表示列表项。罗列多个词条时，最好使用列表标签，如使用ul、li布局网站导航条对搜索引擎蜘蛛更友好，也是影响搜索引擎排名的因素之一。

img标签img图片标签的alt属性是图片的替换文字，alt属性能帮助蜘蛛理解图片内容，网络故障时也能让蜘蛛爬取到图片内容信息。

img标签img图片标签的alt属性是图片的替换文字，alt属性能帮助蜘蛛理解图片内容，网络故障时也能让蜘蛛爬取到图片内容信息。

其他标签nav标签定义导航链接部分；aside标签定义侧边栏内容、引述内容；header标签定义网站头部，介绍信息，网络爬虫知道这部分后可跳过，更好地定位网页内容；article标签定义网站内容部分，搜索引擎可借此知道页面正文内容；section标签定义文档中的节；footer标签定义文档或节的页脚，对网站首页排名有帮助，内页则可能被搜索引擎忽略，不建议每个web的footer信息都独立。

其他注意点SEO禁忌之一是用JS输出重要内容，爬虫不会读取JS格式内容，重要内容必须是HTML格式，这是流行的spa框架不利于seo的原因之一；尽量不使用iFrame，因为搜索引擎不会抓取iframe内的内容，重要内容不能放在其中；如需截取文字，尽量用css实现，保证文字能完整呈现给搜索引擎。

SEO手段

各搜索引擎提交站点收录在各个搜索引擎的站点平台提交网站收录可缩短爬虫发现网站链接时间，加快爬虫抓取速度。

sitemap站点地图Sitemap是一个网站的全部URL列表，还可列出每个网址的其他元数据。它能为搜索引擎蜘蛛导航，更快找到全站链接，更全面获取网站信息。为保证链接全面性和准确性，应自动不定期更新sitemap站点地图。一般网站的sitemap文件有sitemap.xml和sitemap.html两种格式。sitemap.xml文件内容格式大致如下：0.32023 - 05 - 17weekly。网上有很多生成sitemap文件的站长工具，生成的sitemap文件一般放在项目根目录下，然后可在各个搜索引擎的站点平台提交sitemap.xml文件。

robots文件若有不想被蜘蛛访问的页面，可通过robots文件告知蜘蛛。robots文件内容主要由两种键值对组成，可实现网站目录下所有文件均能被所有搜索引擎蜘蛛访问、禁止所有搜索引擎蜘蛛访问网站任何部分、禁止所有搜索引擎蜘蛛访问网站几个目录、只允许某个搜索引擎蜘蛛访问等功能。使用场景如：将不重要页面配置在robots文件中，集中蜘蛛爬取权重；虽然robots文件用于通知蜘蛛忽略某些文件爬取，但用户访问不存在URL时，服务器会记录404错误，搜索蜘蛛寻找不存在的robots.txt文件时也会记录404错误，所以建议添加robots.txt；避免访问出错，如不能让用户直接进入购物车页面，要用robots文件阻止该页面被搜索引擎收录；若网站是动态网页且有静态副本，需在robots.txt文件里设置避免动态网页被蜘蛛索引，防止被视为含重复内容；将sitemap站点地图配置在robots文件中允许蜘蛛访问。使用方法很简单，将robots.txt文件上传到网站根目录，成功上传后，在浏览器中访问域名/robots.txt可查看文件。

内链｜外链在搜索引擎优化领域，有内链为王、外链为皇的说法，它们都有助于提升网站排名，尤其是外链建设。内链是从自己网站的一个页面指向另一个页面，通过内链让网站内部形成网状结构，使蜘蛛的广度和深度最大化。外链是在别的网站导入自己网站的链接，能提升网站权重、吸引蜘蛛抓取网站、提升关键词排名、提升网址或品牌曝光度、给网站带来流量。外链数量并非越多越好，要注意质量，如对方网站未被搜索引擎收录、性能差、有死链等低质量外链会影响本站排名。添加内链外链时，要注意在a标签中对nofollow和external属性的使用。

rel = nofollow使用说明带有rel = nofollow属性的链接会告诉搜索引擎忽略此链接，阻止搜索引擎追踪，避免权重分散，该属性只对搜索引擎有效，是纯粹的SEO优化标签。使用场景包括屏蔽垃圾链接；外链内容与本站无关时；外链站点不稳定、性能较差时；内部链接密度过大、页面重要性不高时。不过，并非内容无关的外链都要加nofollow，适当添加高质量外链对SEO有正向影响，关键在于外链质量和数量。

rel = external使用说明external字面意思是“外部的”，a标签加上这个属性表示该链接是外部链接，非本站链接，点击时会在新窗口中打开，和target = "_blank"效果一样，可告诉搜索引擎这是一个外部链接。

Canonical URL网址规范化是指几个url不同但返回同一页面的情况，这些就是不规范网址。网页规范化有两个好处：解决网站因url链接不同但网页内容相同造成的搜索引擎重复收录问题；有利于URL权重集中。解决方法是在页面的head标签中加入canonical标签指定规范化网址。

网站301重定向301/302重定向是SEO优化中的重要自动转向技术。301重定向是当搜索引擎向网站服务器发出访问请求时，服务返回的HTTP数据流中头信息(header)部分状态码的一种，表示本网址永久性转移到另一个地址，302重定向则表示暂时转移。301重定向与网址规范化作用类似，还有集中域名权重、避免重复收录、有利于网页PR传递、优化用户体验等作用。以下四种情况必须配置301重定向：网站替换域名后，通过301永久重定向旧域名到新域名；删除网站中有一定流量和权重的页面，可利用301重定向到合适页面避免流量流失；网站改版或页面地址变化，避免出现死链接；有多个空闲域名指向相同站点。

网站设置伪静态页面伪静态页面是指动态网页通过重写URL的方法去掉动态网页的参数，但实际网页目录中并不存在重写的页面。动态页面通常是php或者asp等语言结合数据库，通过代码调用数据来实现页面展示。伪静态化是将动态页面的url转换成以.html等结尾的静态页面url，增强搜索引擎友好性，同时方便用户输入和记忆。一般通过在nginx/apache等服务器配置rewrite重写规则将动态url转变为静态url。

使用HTTPS谷歌曾公告，使用安全加密协议是搜索引擎排名的一项参考因素。在域名相同情况下，HTTPS站点比HTTP站点排名更优。

SSR服务端渲染当下SPA应用盛行，虽有用户体验好、服务器压力小等优点，但也存在问题，如首屏加载慢、不利于SEO。而ssr的出现解决了seo问题，服务端渲染是客户端向服务器发出请求，运行时动态生成html内容并返回给客户端，客户端可获取完整页面内容。目前流行的Vue/React前端框架都有SSR的解决方案，对于Vue/React来说，它们的SSR/SSG框架出现的主要原因是SEO和首屏加载速度。

预渲染prerender - spa - plugin若只想改善部分页面的SEO，可使用prerender - spa - plugin等插件实现预渲染页面，在构建时针对特定路径生成静态的html文件。