网站优化之SEO开发标准

h1正文题目要利用h1标签，且每个页面只能出现一次h1标签，副题目要利用h2。可以利用CSS款式停止显式气概的设备。牢记：不重要的地方不要随意利用h1标签。

夸大网页中的重要内容应当利用strong标签，避免利用b标签（对搜索引擎不友爱），原则是利用新的html标签替换旧的标签，款式要利用css替换。

1.2. DOM结构优化

1.2.1. 网站结构结构优化削减DOM元素数目，DOM嵌套不跨越4层，只管精简（图标、按钮等利用伪类元素可以有用的削减标签嵌套），提倡扁平化结构

1.2.2. 统计网页元素数目想晓得你的网页中有几多元素，经过在阅读器中的一条简单号令便可以算出document.getElementsByTagName('*').length这有益于我们多关注元素数目

1.2.3. 图标型元素只管利用button大概a元素，且标签内不能为空很多前端职员在加图标、按钮的时辰，间接利用一个空的标签，只是为了放一个图标，这完全可以写的更语义化一些，例如增加一个facebook图标

facebook

facebook

1.2.4. 最大限度削减DOM拜候缓存已经拜候过的有关元素

线下更新完节点以后再将它们增加到文档树中

避免利用JS来点窜页面结构

1.2.5. 显现完整的文案假如笔墨长度太长，可以用款式截取，设备高度，超越的部分隐藏即可。这样做的益处是让笔墨完整显现给搜索引擎，同时在表示上也保证了美妙。

1.2.6. Iframe尽少利用iframe框架，搜索引擎不会抓取iframe里面的内容，重要的内容不要放在iframe里

1.2.7 brbr标签不能用于结构（如离隔一个元素），这应当利用款式去替换

1.2.8 a标签假如是肯定不需要seo的标签，只管给a标签加上rel="nofollow"，告诉机械(爬虫)无需追踪方针页，削减渣滓链接对搜索引擎的影响；别的a标签中的href属性，在能够的情况下只管利用绝对地址

1.3 前端页面性能

1.1.1. 为什么要关注页面性能网页性能的间接表示就是翻开速度，响应速度慢的，自然影响翻开网站的速度。别的响应速度慢的，还会影响蜘蛛匍匐的速度，蜘蛛提交拜候请求，假如响应慢，匍匐就会慢。从对网站的数据监控来看，蜘蛛在一个网站的总逗留时候是相对稳定的，提升权重后才会增加总逗留时候。总的来说，前端页面的性能最主如果削减资本巨细、削减HTTP请求数目以及适当的异步加载。

1.1.2. 资本紧缩一切输出的CSS/JS/图片必须经过紧缩，这可以在不下降网页体验的情况，提升页面的翻开速度，下降办事器压力。斟酌到增加紧缩资本这一步调会增加开辟的工作量，只管斟酌利用gulp等自动化工具提升效力。图片紧缩，可以参考紧缩工具tinypng、ImageOptimCSS紧缩，可以参考紧缩工具clean-cssJS紧缩，可以参考紧缩工具 uglifyJS

1.3.3. dns预剖析页面head标签内，需要加上dns预剖析，例如

1.3.4. html顺序前端在利用CSS结构中，要斟酌重要内容优先加载，将重要html代码放在最前面，操纵CSS的各类结构特征，将重要的内容只管靠前

1.3.6. Cookie削减Cookie的巨细，Cookie在每次革新页面城市与办事器交互；不需要向办事器的数据，应当利用当地贮存localStorage来实现需求

1.3.7. 资本合并只管利用各类方式公道的削减HTTP请求数目，合并公用的静态文件。如 css sprite雪碧图、JS/CSS公用文件的合并

1.3.8. 资本加载位置JS代码放在文档的底部，CSS代码放在文档的头部，避免加载时页面闪灼、避免JS的加载阻塞页面的显现

1.3.9. AJAX优先利用GET来完成AJAX请求，当利用XMLHttpRequest时，阅读器中的POST方式是一个“两步走”的进程：首先发送文件头，然后才发送数据。在url小于2K时利用GET获得数据时加倍成心义。

1.3.11. 懒加载商品详情、首页大banner，默许第一张图片是直出（图片地址写在src属性上），别的图片全数懒加载

1.3.12. 缩放图片只管不要用HTML缩放图片，不要由于在HTML中可以设备宽高而利用本不需要的大图。假如需要图片自己（https://www.ysfad.net/news/zb_users/upload/2022/10/20221022162404_14398.jpg）应当是100x100px的，而不是去缩小500x500px的图片，假如没有对应尺寸的图片，应当利用最接近的尺寸

1.3.13. 关注页面性能参数经常关注页面的性能需要关注到以下参数能否过量大概增加多快：页面html标签总巨细(kb)页面首屏请求数总巨细(kb)DOMContentLoaded时候(ms)window Load时候(ms)包括以上参数但不是全数，按照营业场景挑选偏重点。

1.4 开辟常规标准

1.4.1 站内舆图

（1）分类页法则

l 分类页sitemap链接命名http://example.com/sitemap/category-sitemap.xml

l url只放置首页以及分类页的链接

l lastmod为更新时候

l changefreq设备为hourly

l priority首页设备为0.6，分类页设备为0.7

l href为对应的M版链接

l M版的urlset中去掉xmlns:xhtml="http://w3.org/1999/xhtml"，而且去掉

l 设备按时使命逐日更新

l 分类页URL必须是200返回状态码，当URL请求酿成404毛病时则自动逐日更新过滤掉

样例：

http://example.com 2001-01-01 hourly 0.6 http://example.com/category-url 2001-01-01 hourly 0.7

1.4.2. 搜索页法则 l（响应式可以去掉这一条）

l 搜索页sitemap链接命名法则以下，每个xml 放1W个链接：

http://example.com/sitemap/keywords-关键词所属分类-分类ID-01-sitemap.xml

http://example.com/sitemap/keywords-关键词所属分类-分类ID-02-sitemap.xml

https://www.ysfad.net/news/zb_users/upload/2022/10/20221022162404_18881.

http://example.com/sitemap/keywords-关键词所属分类-分类ID-99-sitemap.xml

l url只放置搜索页的链接

l lastmod为更新时候

l changefreq设备为hourly

l priority设备为0.7

l href为对应的M版链接

l M版的urlset中去掉xmlns:xhtml="http://w3.org/1999/xhtml"，而且去掉设备按时使命逐日更新

l 搜索页URL必须是200返回状态码，当URL请求酿成404毛病时则自动逐日更新过滤掉

样例：

xmlns:xhtml="http://w3.org/1999/xhtml">

http://example.com/keywords

2001-01-01

hourly

0.7

1.4.3. 产物页

l 产物页sitemap链接命名法则以下，每个xml 放5K个链接：

http://example.com/sitemap/products-关键词所属分类-分类ID-01-sitemap.xml

http://example.com/sitemap/products-关键词所属分类-分类ID-02-sitemap.xml

https://www.ysfad.net/news/zb_users/upload/2022/10/20221022162404_18881.

http://example.com/sitemap/products-关键词所属分类-分类ID-99-sitemap.xml

l url只放置产物页的链接

l lastmod为更新时候

l changefreq设备为hourly

l priority设备为0.8

l href为对应的M版链接

l M版的urlset中去掉xmlns:xhtml="http://w3.org/1999/xhtml"，而且去掉 l（响应式可以去掉这一条）

l 设备按时使命逐日更新

l 产物页URL必须是200返回状态码，当URL请求酿成404毛病时则自动逐日更新过滤掉

样例：

xmlns:xhtml="http://w3.org/1999/xhtml">

http://example.com/product

2001-01-01

hourly

0.8

1.4.5. 关键词页

l 搜索页导航型sitemap链接命名：

http://example.com/sitemap/keywords-顶级分类-sitemap.xml

l loc放置该顶级分类下各个子分类的搜索页sitemap链接

l lastmod为更新时候

l 设备按时使命逐日更新

l M版的urlset中去掉xmlns:xhtml="http://w3.org/1999/xhtml"，而且去掉 l（响应式可以去掉这一条）

l 设备按时使命逐日更新

l 关键词页URL必须是200返回状态码，当URL请求酿成404毛病时则自动逐日更新过滤掉

样例：

http://example.com/sitemap/keywords-关键词所属分类-分类ID-01-sitemap.xml

2001-01-01

http://example.com/sitemap/keywords-关键词所属分类-分类ID-02-sitemap.xml

2001-01-01

1.4.6. robots.txt

l 网站未开放前，不能让任何搜索引擎收录页面

robots.txt文件内容为：

User-Agent: *

Disallow: /

l 网站开放后，按照seo部分的法则增加具体内容

1.4.7. 站内链接请求码

l 一般页面，返回200

l 跳转页面，永久性跳转返回301，长久性跳转返回302

l 毛病页面，返回404

l 办事器毛病，返回500

l 长久性不成拜候，返回503

l 屏障拜候，返回403

1.4.8. 针对反复内容Canonical标签优化

将属性为 rel="canonical" 的 元素增加到这些网页的 部分：

href属性应当是当前页面的url(可拜候的)

避免毛病：利用绝对途径，而非包括 rel="canonical" 链接元素的相对途径。

倡议利用的结构：https://example.com/dresses/green/greendresss.html

不倡议利用的结构：/dresses/green/greendress.html。

1.5 响应式设想

说明

随着移动互联网技术的成长，响应式设想也日渐成为支流，而且它的益处也日益显现在广大开辟者们眼前，那末它对SEO又有哪些影响呢？

采用响应式设想的网站，有以下上风：

1.主如果了提升用户体验

2. SEO战略分歧性（无网页版本区分）

3. 避免反复内容

4. 网页原有链接得以保存

5. 搜索引擎喜爱

可是我们需要依照响应式设想的标准和标准来开辟网站才能有这些上风，下面罗列一些常见的响应式设想设想的标准。

内容宽度不能跨越屏幕显现范围

1、不要让用户必须横向转动网页或缩小显现比例才能看到响应内容。

2、对网页元素利用相对宽度值, 以百分比形式设备网页元素 CSS值，将有助于网页在各类尺寸的装备上正确显现。

3、利用自顺应设想，在一切装备上一般显现内容。1.设备视口 TL;DR

利用元视口代码控制阅读器视口的宽度和缩放比例。

增加 width=device-width 以便与屏幕宽度（以装备无关像素为单元）停止婚配。

增加 initial-scale=1 以便将 CSS 像素与装备无关像素的比例设为 1:1。

确保在不停用用户缩放功用的情况下，您的网页也可以拜候。

1. 调剂内容巨细，使其合适视口TL;DR

请勿利用较大的牢固宽度元素。

在任何视口宽度下，内容均应一般显现。

利用 CSS 媒体查询为分歧尺寸的屏幕利用分歧款式。

2. 将 CSS 媒体查询用于自顺应设想TL;DR

媒体查询可用于按照装备特点利用款式。

优先利用 min-width（而非 min-device-width），以确保实现最宽广的视觉体验。

为元素利用相对尺寸，免得破坏版式完整性。

3. 按照视口巨细利用媒体查询

@media (query) {

/* CSS Rules used when query matches */

}

min-device-width 留意事项：虽然开辟者也可以按照 *-device-width 建立查询，可是我们激烈倡议不要这么做。

4. 利用相对单元

Not recommended — fixed width

div.fullWidth {

width: 320px;

margin-left: auto;

margin-right: auto;

}

Recommended — responsive width

div.fullWidth {

width: 100%;

}

5. 若何挑选断点TL;DR

按照内容建立断点，绝对不要按照具体装备、产物或品牌来建立。

从针对最小的移动装备停止设想动手，然后随着屏幕范例不竭增加而逐步改良体验。

使每行的笔墨最多为 70 或 80 个字符左右。

6. 优化文本，进步可读性

理想栏目标每一行应当包括 70 到 80 个字符（大约 8 到 10 个英文单词），是以，每次文本块宽度跨越 10 个单词时，就应斟酌增加断点。

7. 绝不能完全隐藏内容

参考文档：https://goo.gl/yU21b3

笔墨不能设备的太小，避免致使影响阅读

1、设备清楚易读的字体巨细，按PageSpeed Insights规定要求巨细和间距界说。

2、更正排版缩放比例，以便字体可以按相互之间的关系变动巨细。请确保您的视口答应字体巨细在一切装备上一般调剂。

3、利用自顺应设想，在一切装备上一般显现内容。利用16 CSS像素的基准字体巨细。按照要利用的字体的属性按需调剂字体巨细。

利用相对于基准字体的字体巨细界说排版比例。(rem)

每行笔墨的字符之间需要留出一定的垂直空间，而且还能够需要按照每种字体停止分歧的调剂。我们凡是倡议您利用阅读器默许的行高1.2em。

限制所用字体的数目以及排版比例：过量字体和字体巨细会致使网页结构混乱且过于复杂。

参考文档：https://goo.gl/25FkAR

题目：未设备视口值处理：

1、链接和按钮应连结适当的尺寸和间距，以便用户无需缩放即可利用这些元素。

2、优化您网页的版式，调剂您网页的版式，使链接和按钮相隔充足的间隔。设备视口TL;DR

利用元视口代码控制阅读器视口的宽度和缩放比例。

增加 width=device-width 以便与屏幕宽度（以装备无关像素为单元）停止婚配。

增加 initial-scale=1 以便将 CSS 像素与装备无关像素的比例设为 1:1。

确保在不停用用户缩放功用的情况下，您的网页也可以拜候。

参考文档：https://goo.gl/yU21b3

1、调剂链接和按钮应连结适当的尺寸和间距，以便用户无需缩放即可利用这些元素。

2、调剂优化网页的版式，使链接和按钮相隔充足的间隔。

3、利用自顺应设想，在一切装备上一般显现内容。确保网站上最重要的点按方针（用户最常用的方针）充足大，即高/宽最少要到达48 CSS像素（假如您已正确设置您的视口），以便用户轻松点按。

参考文档：https://goo.gl/A643Zq

2. 检测工具

说明：合适 W3C 标准及 SEO 优化，我们在遵照本手册标准的根基之上，上线的网站都要利用以下工具来检查代码，虽说优化没有100分，但我们要只管合适要求。

html标准考证：

利用 https://validator.w3.org/

CSS考证：

利用 http://jigsaw.w3.org/css-validator/

图片紧缩考证：

利用 https://tinypng.com/

网页速度考证：

利用 https://tools.pingdom.com/

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

利用http://yslow.org/