网站优化之SEO开发标准
SEO对于一个独立站，类似于钢结构对于建筑的作用。
不紧包含前期的基础优化，也包含中后期的站外外链建设和内容营销。
今天来讲下SEO的开发标准，希望能对网站的建设者有些许帮助。
1. 开发标准
1.1. W3C标准
1.1.1. 什么是W3C标准作为网站技术开发人员而言，往往是站在自己的开发角度来实施网站布署(读取数据及开发的方便性等等)，而不是站在网站访问者与搜索引擎角度。因此大部分的网站在浏览方面不够直观或是方便，特别是现在w3c的规范，更是在大部分的网站开发人员脑里一片空白。何况百度 、google、msn、yahoo等专业搜索引擎更有自己的搜索规则及判断网页等级技术，所以网站要优化，优化的目的只有一个：符合标准，符合蜘蛛爬行的标准，更重要的是符合网站访问者浏览的方便及易用性。要知道W3C标准，有必要先弄清楚什么是W3C？W3C其实就是World Wide Web Consortium，全球万维网联盟的简称。W3C的主要职责就是确定未来万维网的发展方向，并且制定相关的推荐 （recommendation, 由于W3C是一个民间组织，没有约束性，因此只提供建议）。HTML4.01规范建议(HTML4.01 Specification Recommendation)就是由W3C所制定的。它还负责制定XML，MathML等其他网络语言规范。
1.1.2. 如何符合w3c规范？确保所有的标签都使用小写字母确保所有的属性值都放在引号里确保所有成对标签出现的顺序、不成对的标签都用/>结束, ”/”和”>”之间不要有空格
1.1.3. 使用正确的文档类型文档类型声明位于HTML文档的第一行：<!DOCTYPE html>如果你想跟其他标签一样使用小写，可以使用以下代码：<!doctype html>
1.1.4. 声明你的编码语言直接在DOCTYPE声明后面添加如下代码：<meta charset="utf-8"><title>
1.1.5. 声明你的网站语言直接在DOCTYPE声明后面添加如下代码：<html>其中en要使用多语言，如fr、es等
1.1.6. 使用小写元素名 HTML5 元素名可以使用大写和小写字母。推荐使用小写字母：混合了大小写的风格是非常糟糕的。不推荐:<SECTION> <p>这是一个段落。</p></SECTION>非常糟糕:<Section> <p>这是一个段落。</p></SECTION>推荐:<section> <p>这是一个段落。</p></section>
1.1.7. 关闭所有 HTML 元素在 HTML5 中, 可能没有关闭所有元素 (例如 <p> 元素)时，网页也显示正常，但我们建议每个元素都要添加关闭标签。不推荐:<section>
<p>这是一个段落。
</section> 推荐:
<section>
<p>这是一个段落。</p>
</section>
1.1.8. 使用小写属性名HTML5 属性名允许使用大写和小写字母。但我们推荐统一使用小写字母属性名:不推荐：
<div>
推荐：
<div>
1.1.9. 属性值HTML5 属性值不用引号时，网页显示可能也正常，但属性值我们统一使用引号:
如果属性值含有空格需要使用引号。
混合风格不推荐的，建议统一风格。
属性值使用引号易于阅读。
以下实例属性值包含空格，没有使用引号，所以不能起作用:
<table striped>
以下使用了双引号，是正确的：
<table class="table striped">
1.1.10. 图片属性图片，特别是主要的banner一定要添加alt属性，title属性可选：蜘蛛不认识图片上的内容，只能通过alt属性来判断，alt属性值应该是图片的的含义，如果没有这个数据，应该写网站的名称
<img src="domain/banner.jpg" alt="rosegal-Thanksgiving Sale">
<img src="domain/banner.jpg" alt="rosegal">
1.1.11. 空格和等号等号前后使用空格时，网页显示可能也正常
<link rel = "stylesheet" href = "styles.css">
但我们推荐不要空格:
<link rel="stylesheet" href="styles.css">
1.1.12. 空行和缩进不要无缘无故添加空行。
为每个逻辑功能块添加空行，这样更易于阅读。
缩进使用两个空格，不建议使用 TAB。
比较短的代码间不要使用不必要的空行和缩进。
不必要的空行和缩进:
<body>
<h1>W3Cschool教程</h1>
<h2>HTML</h2>
<p>这是一行文案的文字</p>
<p>这是一行文案的文字</p>
</body>
推荐:
<body>
<h1>W3Cschool教程</h1>
<h2></h2>
<p>这是一行文案的文字。这是一行文案的文字</p>
</body>
表格实例:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
</table>
列表实例:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>
1.1.13. HTML 注释注释可以写在 <!-- 和 --> 中:
<!-- 这是注释 -->
比较长的评论可以在 <!-- 和 --> 中分行写：
<!--
这是一个较长评论。 这是 一个较长评论。这是一个较长评论。
这是 一个较长评论 这是一个较长评论。 这是 一个较长评论。
-->
长评论第一个字符缩进两个空格，更易于阅读。注释最好使用smarty或php的注释或者英文注释，不要使html注释中出现中文。
1.1.14. 样式表样式表使用简洁的语法格式 ( type 属性不是必须的):
<link rel="stylesheet" href="styles.css">
短的规则可以写成一行:
p.into {font-family: Verdana; font-size: 16em;}
长的规则可以写成多行:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
将左括号与选择器放在同一行。
左花括号与选择器间添加以空格。
使用两个空格来缩进。
冒号与属性值之间添加一个空格。
逗号和符号之后使用一个空格。
每个属性与值结尾都要使用符号。
只有属性值包含空格时才使用引号。
右括号放在新的一行。
1.1.15. 在 HTML 中载入 JavaScript使用简洁的语法来载入外部的脚本文件 ( type 属性不是必须的 ):
<script src="myscript.js"></script>
1.1.16. 避免空的src和href空属性对爬虫不友好 ，尽量避免。 留意具有这两个属性的标签如link，script，img，iframe等
1.1.17. 使用合理的html5语义化标签遵守W3C语义化规范，则避免单一的重复div/span等标签，例如我们要做一个导航
<!-- 不建议 -->
<div>
<span>NEW</span>
<span>CHRISTEMAS</span>
<span>PLUS SIZE</span>
</div>
<!-- 建议 -->
<ul>
<li>NEW</li>
<li>CHRISTEMAS</li>
<li>PLUS SIZE</li>
</ul>
h1正文标题要使用h1标签，且每个页面只能出现一次h1标签，副标题要使用h2。可以使用CSS样式进行显式风格的设置。切记：不重要的地方不要随便使用h1标签。
强调网页中的重要内容应该使用strong标签，避免使用b标签（对搜索引擎不友好），原则是使用新的html标签替换旧的标签，样式要使用css替代。
1.2. DOM结构优化
1.2.1. 网站结构布局优化减少DOM元素数量，DOM嵌套不超过4层，尽量精简（图标、按钮等使用伪类元素可以有效的减少标签嵌套），提倡扁平化结构<!-- 不建议 -->
<div>
<span>
<img src="...">
</span>
</div>
<!-- 建议 -->
<div>
<img src="..."></div>
1.2.2. 统计网页元素数量想知道你的网页中有多少元素，通过在浏览器中的一条简单命令就可以算出document.getElementsByTagName('*').length这有利于我们多关注元素数量
1.2.3. 图标型元素尽量使用button或者a元素， 且标签内不能为空很多前端人员在加图标、按钮的时候，直接使用一个空的标签，只是为了放一个图标，这完全可以写的更语义化一些，例如添加一个facebook图标<!-- 不建议 -->
<a href="javascript:;"><i></i></a>
<!-- 建议，使用font-size使文字不可见，使用after或者before伪类添加图标 -->
<button>facebook</button>
<a href="javascript:;">facebook</a>
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预解析，例如
<link rel="dns-prefetch" href="//login.rosegal.com">
<link rel="dns-prefetch" href="//css.rglcdn.com">
1.3.4. html顺序前端在使用CSS布局中，要考虑重要内容优先加载，将重要html代码放在最前面，利用CSS的各种布局特性，将重要的内容尽量靠前
1.3.5. 异步加载所有用户操作（点击、异步操作、滚动）才显示出来的内容，应该用户操作的时候再加载，以节省页面首次加载的时间，如懒加载、弹窗、第三方客服代码
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.10. 图片大小声明广告图片元素图片大小声明：如果图片大小不做定义的话，页面需要重新渲染，就会影响到速度例如：<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
1.3.11. 懒加载商品详情、首页大banner，默认第一张图片是直出（图片地址写在src属性上），其它图片全部懒加载
1.3.12. 缩放图片尽量不要用HTML缩放图片，不要因为在HTML中可以设置宽高而使用本不需要的大图。如果需要<img width="100" height="100" src="mycat.jpg" alt="My Cat" />图片本身（mycat.jpg）应该是100x100px的，而不是去缩小500x500px的图片，如果没有对应尺寸的图片，应该使用最接近的尺寸
1.3.13. 关注页面性能参数经常关注页面的性能需要关注到以下参数是否过多或者增长多快：页面html标签总大小(kb)页面首屏请求数总大小(kb)DOMContentLoaded时间(ms)window Load时间(ms)包括以上参数但不是全部，根据业务场景选择侧重点。
1.4 开发常规标准
1.4.1 站内地图
（1）分类页规则
l 分类页sitemap链接命名http://www.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://www.w3.org/1999/xhtml"，并且去掉<xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.rosegal.com" />
l 设置定时任务每日更新
l 分类页URL必须是200返回状态码，当URL请求变成404错误时则自动每日更新过滤掉
样例：
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"> <url> <loc>http://www.example.com</loc> <lastmod>2001-01-01</lastmod> <changefreq>hourly</changefreq> <priority>0.6</priority> <xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com" /> </url> <url> <loc>http://www.example.com/category-url</loc> <lastmod>2001-01-01</lastmod> <changefreq>hourly</changefreq> <priority>0.7</priority> <xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/category-url" /> </url> </urlset>
1.4.2. 搜索页规则 l（响应式可以去掉这一条）
l 搜索页sitemap链接命名规则如下，每个xml 放1W个链接：
http://www.example.com/sitemap/keywords-关键词所属分类-分类ID-01-sitemap.xml
http://www.example.com/sitemap/keywords-关键词所属分类-分类ID-02-sitemap.xml
...
http://www.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://www.w3.org/1999/xhtml"，并且去掉<xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.example.com/keywords" />设置定时任务每日更新
l 搜索页URL必须是200返回状态码，当URL请求变成404错误时则自动每日更新过滤掉
样例：
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>http://www.example.com/keywords</loc>
<lastmod>2001-01-01</lastmod>
<changefreq>hourly</changefreq>
<priority>0.7</priority>
<xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.example.com/keywords" />
</url>
</urlset>
1.4.3. 产品页
l 产品页sitemap链接命名规则如下，每个xml 放5K个链接：
http://www.example.com/sitemap/products-关键词所属分类-分类ID-01-sitemap.xml
http://www.example.com/sitemap/products-关键词所属分类-分类ID-02-sitemap.xml
...
http://www.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://www.w3.org/1999/xhtml"，并且去掉<xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.example.com/products" /> l（响应式可以去掉这一条）
l 设置定时任务每日更新
l 产品页URL必须是200返回状态码，当URL请求变成404错误时则自动每日更新过滤掉
样例：
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>http://www.example.com/product</loc>
<lastmod>2001-01-01</lastmod>
<changefreq>hourly</changefreq>
<priority>0.8</priority>
<xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.example.com/product" />
</url>
</urlset>
1.4.5. 关键词页
l 搜索页导航型sitemap链接命名：
http://www.example.com/sitemap/keywords-顶级分类-sitemap.xml
l loc放置该顶级分类下各个子分类的搜索页sitemap链接
l lastmod为更新时间
l 设置定时任务每日更新
l M版的urlset中去掉xmlns:xhtml="http://www.w3.org/1999/xhtml"，并且去掉<xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.example.com/keywords" /> l（响应式可以去掉这一条）
l 设置定时任务每日更新
l 关键词页URL必须是200返回状态码，当URL请求变成404错误时则自动每日更新过滤掉
样例：
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap>
<loc>
http://www.example.com/sitemap/keywords-关键词所属分类-分类ID-01-sitemap.xml
</loc>
<lastmod>2001-01-01</lastmod>
</sitemap>
<sitemap>
<loc>
http://www.example.com/sitemap/keywords-关键词所属分类-分类ID-02-sitemap.xml
</loc>
<lastmod>2001-01-01</lastmod>
</sitemap>
</sitemapindex>
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" 的 <link> 元素添加到这些网页的 <head> 部分：
href属性应该是当前页面的url(可访问的)
<link rel="canonical" href="https://blog.example.com/dresses/green-dresses-are-awesome" />
避免错误：使用绝对路径，而非包含 rel="canonical" 链接元素的相对路径。
建议使用的结构：https://www.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。
确保在不停用用户缩放功能的情况下，您的网页也可以访问。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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。
确保在不停用用户缩放功能的情况下，您的网页也可以访问。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
参考文档：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/
