做好前端SEO代码规范，利于搜索引擎蜘蛛抓取
我是浦工，点击右上方红字“关注”，每天为你分享互联网行业【网络运营】和【IT技术】干货。
SEO分为站内优化和站外优化，内优化指的是站长能控制的所有网站本身的调整，如网站结构、页面HTML代码，站外优化指的是外部链接建设及行业社群的参与互动。
站内优化侧重于HTML代码的规范，如果站内优化忽视了，那么网站爬虫无法抓取到实质性内容，就会导致网站没有收录，那么排名也将是遥不可及的梦。
SEO优化
页面抓取：蜘蛛向服务器请求进入页面，获取页面内容
分析入库：对获取到的内容进行分析，对优质页面进行收录
检索排序：当用户检索关键词时，从收录的页面中按照一定的规则进行排序，并返回给用户结果
TDK是个缩写，T页面标题，K页面关键词以及D页面描述
title设置规则：
今日头条
一般不超过80个字符
词语间要用英文“-”隔开
一般是“网站名称_主关键词或一句含有主关键词的描述”，比如做“头条”这个词，“网站名称_今日头条-头条新闻-今日头条官网”
keywords设置规则：
词语间要用英文“,”隔开
首页keywords写法，一般是“网站名称,主要栏目名,主要关键词”，一般不超过5个
栏目页keywords写法，一般是“栏目名称,栏目关键字,栏目分类列表名称”，一般不超过3个
详情页keywords写法，一般是将详情页主要描述的这个关键词吸入即可,一般不超过3个
description设置规则：
一般是将页面的标题，关键词和一些特殊栏目的内容融合，携程简单的介绍
字数一般不超过150个字符
词语间的间隔一般使用英文符号
关键词密度
一个页面或者一篇软文的关键词密度应该在2%–8%之间
公式：这个关键词的字数*这个关键词出现的次数/文字总字数或者页面总字数算出的这个值在2%–8%之间就符合关键词密度规则
根元素
ElementDescription
代表HTML或XHTML文档的根。其他所有元素必须是这个元素的子节点。
文档元数据
ElementDescription
代表关于文档元数据的一个集合，包括脚本或样式表的链接或内容。
定义文档的标题，将显示在浏览器的标题栏或标签页上。该元素只能包含文本，包含的标签不会被解释。
定义页面上相对URL的基准URL。
用于链接外部资源到该文档。
定义其他HTML元素是无法描述的元数据。
用于内联CSS。
脚本
ElementDescription
定义一个内联脚本或链接到外部脚本。基本语言是JavaScript。
定义当浏览器不支持脚本时显示的替代文字。
章节
ElementDescription
代表HTML文档的内容。文档中只能有一个元素。
这个元素在HTML5中加入定义为文档中的一个章节。
这个元素在HTML5中加入定义只包含导航链接的章节。
这个元素在HTML5中加入定义可以独立于内容其余部分的完整独立内容块。
这个元素在HTML5中加入定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
,,,,,标题元素实现了六层文档标题，是最大的标题，是最小的标题。标题元素简要地描述章节的主题。
这个元素在HTML5中加入定义页面或章节的头部。它经常包含logo、页面标题和导航性的目录。
这个元素在HTML5中加入定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
定义包含联系信息的一个章节。
这个元素在HTML5重新加入定义文档中主要或重要的内容。
组织内容
ElementDescription
定义一个段落。
代表章节、文章或其它章节内容中段落之间的分隔符。
代表其内容已经预先排版过，格式应当保留。
代表引用自其他来源的内容。
定义为一个有序列表。
定义为一个无序列表。
定义列表中的一个列表项。
定义一个定义列表（一系列术语和其定义）。
代表一个又一个定义的术语。
代表出现在它之前术语的定义。
这个元素在HTML5中加入代表一个和文档有关的图例。
这个元素在HTML5中加入代表着一个图例的说明。
代表一个通用的容器，没有特殊的含义。
文字形式
ElementDescription
代表一个链接到其他资源的超链接。
代表强调文字。
代表特别重要文字。
代表注释，如免责声明、版权声明等，对理解文档不重要。
代表不准确或不相关的内容。
代表作品标题。
代表内联的引用。
代表一个术语包含在其最近祖先内容中的定义。
代表省略或缩写，其完整内容在title属性中。
这个元素在HTML5中加入关联一个内容的机器可读的等价形式（该元素只在WHATWG版本的HTML标准中，不在W3C版本的HTML5标准中）。
这个元素在HTML5中加入代表日期和时间值；机器可读的等价形式通过datetime属性指定。
代表计算机代码。
代表代码中的变量。
代表程序或电脑的输出。
代表用户输入，一般从键盘输出，但也可以代表其他输入，如语音输入。
,分别代表下标和上标。
代表一段不同性质的文字，如技术术语、外文短语等。
代表一段需要被关注的文字。
代表一段需要下划线呈现的文本注释，如标记出拼写错误的文字等。
这个元素在HTML5中加入代表一段需要被高亮的引用文字。
这个元素在HTML5中加入代表被ruby注释标记的文本，如中文汉字和它的拼音。
这个元素在HTML5中加入代表ruby注释，如中文拼音。
这个元素在HTML5中加入代表ruby注释两边的额外插入文本，用于在不支持ruby注释显示的浏览器中提供友好的注释显示。
这个元素在HTML5中加入代表需要脱离父元素文本方向的一段文本。它允许嵌入一段不同或未知文本方向格式的文本。
指定子元素的文本方向，显式地覆盖默认的文本方向。
代表一段没有特殊含义的文本，当其他语义元素都不适合文本时候可以使用该元素。
代表换行。
这个元素在HTML5中加入代表建议换行(WordBreakOpportunity)，当文本太长需要换行时将会在此处添加换行符。
编辑
ElementDescription
定义增加到文档的内容。
定义从文档移除的内容。
嵌入内容
ElementDescription
代表一张图片。
代表一个内联的框架。
代表一个外部资源，如图片、HTML子文档、插件等。
代表元素所指定的插件的参数。
这个元素在HTML5中加入代表一段视频及其视频文件和字幕，并提供了播放视频的用户界面。
这个元素在HTML5中加入代表一段声音，或音频流。
这个元素在HTML5中加入为或
这个元素在HTML5中加入为或这类媒体元素指定文本轨道（字幕）。
这个元素在HTML5中加入代表位图区域，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。
与元素共同定义图像映射区域。
与元素共同定义图像映射区域。
这个元素在HTML5中加入定义一个嵌入式矢量图。
这个元素在HTML5中加入定义一段数学公式。
表格
ElementDescription
定义多维数据。
代表表格的标题。
代表表格中一组单列或多列。
代表表格中的列。
代表表格中一块具体数据（表格主体）。
代表表格中一块列标签（表头）。
代表表格中一块列摘要（表尾）。
代表表格中的行。
代表表格中的单元格。
代表表格中的头部单元格。
表单
ElementDescription
代表一个表单，由控件组成。
代表控件组。
代表控件组的标题。
代表表单控件的标题。
代表允许用户编辑数据的数据区（文本框、单选框、复选框等）。
代表按钮。
代表下拉框。
这个元素在HTML5中加入代表提供给其他控件的一组预定义选项。
代表一个选项分组。
代表一个元素或元素中的一个选项
代表多行文本框。
这个元素在HTML5中加入代表一个密钥对生成器控件。
这个元素在HTML5中加入代表计算值。
这个元素在HTML5中加入代表进度条。
这个元素在HTML5中加入代表滑动条。
交互元素
ElementDescription
这个元素在HTML5中加入代表一个用户可以(点击)获取额外信息或控件的小部件。
这个元素在HTML5中加入代表元素的综述或标题。
这个元素在HTML5中加入代表一个用户可以点击的菜单项。
这个元素在HTML5中加入代表菜单。
h1
-适用于网站logo、网站导航的第一个超链接、分类名称、产品标题名称
-里面不能包含html标签
-整个页面有且只有一个
-要注意的是，不论任何页面，h1标签只能出现一次，它是当前页面的主标题，权重最高,所以要慎用.
-一般情况下，如果有关键词的话最好是在h1里面出现
h2
-适用于分类页面、内容页面标题链接、列表名称，
-里面不包含html标签
-可以有多个
h3
-适用于细分页面标题链接、tag页面、相关产品内容；
h4~h6
-较少使用，建议用p代替
ul
-无序列表
-结构层次：ul-li-a-span|strong|small
ol
-有序列表
-结构层次：ol-li-a-span|strong|small
dl
-适用于某小区域描述
-dldtdd
-dt为标题，dd为内容
-多行内容可以采用dd里面包含多个p，也可以并列多个dd
a
-必须写title，
-href="链接"，如果不做任何操作href="_javascript:;"，
-根据业务决定是否写target="_blank"，表示在新的标签页打开。
??1)页面跳转
另一个网站
??2)跳转到指定ID所在的位置
??3)下载文件:
下载
??4)发邮件:
发邮件
??5)打电话:
拨打
??6)发短信:
拨打
img
-必须写alt，
-建议写title，
-要考虑onerror,onload,懒加载，
-如果该图片只是为了样式的话，用css的background代替img标签
button
-可变元素
-不用inputtype="button"，而用提交
strong/b
-strong：表示非常重要,浏览器默认风格为粗体，搜索引擎会知道这是要强调的内容，在样式上为加粗；这样做既可以让文档更加地有用，也可以被屏幕阅读器识别出来，并以不同的语调发出
-b：一样有加粗效果，但仅仅是样式
em/i
-表示强调,浏览器的默认风格为斜体，搜索引擎也会知道，在样式上为斜体；既可以让文档读起来更有趣,也可以被屏幕阅读器识别出来,并以不同的语调发出
-i:一样有斜体效果，但仅仅是样式
form
-获取表单元素时,多使用form代替div
iframe
-尽量少用iframe
-可以用来加载速度较慢的内容，例如广告
-浏览器会对iframe中的内容进行安全控制
-脚本可以并行下载
-即使iframe内容为空也消耗加载时间
-会阻止页面加载
-没有语义
缩写abbr
-abbr最重要的应该是应该添加一个title属性对缩写进行描述
-WD
大段引用:，一般引用:
之前就一直想写这样的一篇文章，分享一下如何去创造一个可访问性更好的页面。今天的计划里有一条把HTMLTag和WCAG标准结合起来。我推荐你这样去写你的HTML，让某些人的生活可以更容易。
某A给我印象最深刻的一句话是，“做前端要有爱。不要动不动就有朩有地对各种人使用咆哮体”。
删除：
-强调某些东西是被删除,那就是使用标签
HTML上表示强调时，请使用标签
HTML上表示强调时，请使用标签
表格:
DATE
IP
PV
2011.3.11
3000
8000
格式化片段/
-是指computercodetext,而
是指preformattedtext。
的范围更广，并且是块状元素，可能被使用来格式化各种文本，特别是代码。使用没有需要特别注意的，主要是语义上的正确使用，比如不要用
来代替一般的
text-align:center
{(1*102)+(9*101)+(3*100)}
无语义标签：/
推荐用法是尽量使用其他来做为页面框架的容器，比如布局、添加额外的视觉效果，而不是段落等的替代品
God,ohmyzsh
address
表示其中的HTML提供了某个人或某个组织（等等）的联系信息。可以是必要的任何一种联系方式,比如真实地址、URL、电子邮箱、电话号码、社交媒体账号、地理坐标等等。此元素应该包含联系信息对应的个人、团体或组织的名称。
(311)555-2368
p
-慎用p标签和用带有content单词来命名id和class，蜘蛛会抓取p标签和content里面的内容，而如果这里面的内容不适用于蜘蛛抓取，蜘蛛会把这段文字内容作为网页的简要介绍或者正文看待
-什么情况下用p标签和content呢?只有希望蜘蛛抓取的内容才用这样的标签和id、class的命名单词
-在不是段落的地方的p标签，应该使用div代替
自闭合（self-closing）标签，无需闭合(例如：imginputbrhr等)；
可选的闭合标签（closingtag），需闭合(例如：或)；
尽量减少标签数量；
Style
Guide
Class与ID
class应以功能或内容命名，不以表现形式命名；
class与id单词字母小写，多个单词组成时，采用中划线-或者_分割；
使用唯一的id作为Javascripthook,同时避免创建无样式信息的class；
属性顺序
id
class
name
data-xxx
src,for,type,href
title,alt
aria-xxx,role
引号
属性的定义，统一使用双引号。
a不允许嵌套div这种约束属于语义嵌套约束，与之区别的约束还有严格嵌套约束，比如a不允许嵌套a。
严格嵌套约束在所有的浏览器下都不被允许；而语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样。
语义嵌套约束
用于或下；
,用于下；
,,,,用于下；
严格嵌套约束
inline-Level元素，仅可以包含文本或其它inline-Level元素;
里不可以嵌套交互式元素、、等;
里不可以嵌套块级元素、~、
、//、//、等。
布尔值属性
HTML5规范中disabled、checked、selected等属性不用设置值。
1
文档类型
为每个HTML页面的第一行添加标准模式（standardmode）的声明，这样能够确保在每个浏览器中拥有一致的表现。
语言属性
字符编码
指定字符编码的meta必须是head的第一个直接子元素；
......
IE兼容模式
优先使用最新版本的IE和Chrome内核
SEO优化
viewport
viewport:一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；
width:浏览器宽度，输出设备中的页面可见区域宽度；
device-width:设备分辨率宽度，输出设备的屏幕可见宽度；
initial-scale:初始缩放比例；
maximum-scale:最大缩放比例；
为移动端设备优化，设置可见区域的宽度和初始缩放比例。
iOS图标
apple-touch-icon图片自动处理成圆角和高光等效果;
apple-touch-icon-precomposed禁止系统自动添加效果，直接显示设计原图;
favicon
在未指定favicon时，大多数浏览器会请求WebServer根目录下的favicon.ico。为了保证favicon可访问，避免404，必须遵循以下两种方法之一：
在WebServer根目录放置favicon.ico文件；
使用link指定favicon；
HEAD模板
总结，SEO站内优化是一项非常重要的工作，特别是网站TDK设置，H标签的使用，A标签的使用，A标签属性值的设置，img标签属性的设置和一些不利于抓取的标签都需要做到合理布局，这样才能解决搜索引擎的抓取，只有抓取后才有可能会收录，有了收录才能有排名，有了排名才能带来精准的流量，有了流量才有可能形成蕞终转化。