前端SEO代码规范
什么是SEO？
搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。SEO是指为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，使网站更适合搜索引擎的索引原则的行为。
SEO分为站内优化和站外优化
- 站内优化指的是站长能控制的所有网站本身的调整，如网站结构、页面HTML代码
- 站外优化指的是外部链接建设及行业社群的参与互动，这些活动不是在网站本身进行的
SEO原理
- 页面抓取： 蜘蛛向服务器请求页面，获取页面内容
- 分析入库：对获取到的内容进行分析，对优质页面进行收录
- 检索排序：当用户检索关键词时，从收录的页面中按照一定的规则进行排序，并返回给用户结果
前端SEO代码规范–TKD规范
TDK是个缩写，页面标题，页面关键词以及页面描述
title设置规则：
<title>页面标题必须含有</title>
- 一般不超过80个字符
- 词语间要用英文“-”隔开
- 一般是“网站名称_主关键词或一句含有主关键词的描述”，比如做“贷款”这个词，“网站名称_成都贷款公司_成都个人贷款_成都抵押贷款_成都小额贷款_成都信用贷款”
keywords设置规则：
<meta name=”keywords” content=”关键词1,关键词2,关键词3″>
- 词语间要用英文“,”隔开
- 首页keywords写法，一般是“网站名称,主要栏目名,主要关键词”，一般不超过5个
- 栏目页keywords写法，一般是“栏目名称,栏目关键字,栏目分类列表名称”，一般不超过3个
- 详情页keywords写法，一般是讲详情页主要描述的这个关键词吸入即可,一般不超过3个
description设置规则：
<meta name=”description” content=”你网页的简述”>
- 一般是降页面的标题，关键词和一些特殊栏目的内容融合，携程简单的介绍
- 字数一般不超过150个字符
- 词语间的间隔一般使用英文符号
关键词密度
一个页面或者一片软文的关键词密度应该在2%–8%之间
公式：这个关键词的字数 * 这个关键词出现的次数 / 软文总字数或者页面总字数 算出的这个值在2%–8%之间就符合关键词密度规则
HTML标签列表
根元素
| Element | Description |
|---|---|
<html> | 代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。 |
文档元数据
| Element | Description |
|---|---|
<head> | 代表关于文档元数据的一个集合，包括脚本或样式表的链接或内容。 |
<title> | 定义文档的标题，将显示在浏览器的标题栏或标签页上。该元素只能包含文本，包含的标签不会被解释。 |
<base> | 定义页面上相对 URL 的基准 URL。 |
<link> | 用于链接外部资源到该文档。 |
<meta> | 定义其他 HTML 元素无法描述的元数据。 |
<style> | 用于内联 CSS。 |
脚本
| Element | Description |
|---|---|
<script> | 定义一个内联脚本或链接到外部脚本。脚本语言是 JavaScript。 |
<noscript> | 定义当浏览器不支持脚本时显示的替代文字。 |
章节
| Element | Description |
|---|---|
<body> | 代表 HTML 文档的内容。在文档中只能有一个 元素。 |
<section> | 这个元素在 HTML5 中加入 定义文档中的一个章节。 |
<nav> | 这个元素在 HTML5 中加入 定义只包含导航链接的章节。 |
<article> | 这个元素在HTML5中加入定义可以独立于内容其余部分的完整独立内容块。 |
<aside> | 这个元素在 HTML5 中加入 定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。 |
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> | 标题元素实现了六层文档标题，<h1>是最大的标题，<h6>是最小的标题。标题元素简要地描述章节的主题。 |
<header> | 这个元素在HTML5中加入定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。 |
<footer> | 这个元素在HTML5中加入定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。 |
<address> | 定义包含联系信息的一个章节。 |
<main> | 这个元素在 HTML5 中加入定义文档中主要或重要的内容。 |
组织内容
| Element | Description |
|---|---|
<p> | 定义一个段落。 |
<hr> | 代表章节、文章或其他长内容中段落之间的分隔符。 |
<pre> | 代表其内容已经预先排版过，格式应当保留 。 |
<blockquote> | 代表引用自其他来源的内容。 |
<ol> | 定义一个有序列表。 |
<ul> | 定义一个无序列表。 |
<li> | 定义列表中的一个列表项。 |
<dl> | 定义一个定义列表（一系列术语和其定义）。 |
<dt> | 代表一个由下一个 <dd>定义的术语。 |
<dd> | 代表出现在它之前术语的定义。 |
<figure> | 这个元素在 HTML5 中加入 代表一个和文档有关的图例。 |
<figcaption> | 这个元素在 HTML5 中加入 代表一个图例的说明。 |
<div> | 代表一个通用的容器，没有特殊含义。 |
文字形式
| Element | Description |
|---|---|
<a> | 代表一个链接到其他资源的超链接 。 |
<em> | 代表强调 文字。 |
<strong> | 代表特别重要 文字。 |
<small> | 代表注释 ，如免责声明、版权声明等，对理解文档不重要。 |
<s> | 代表不准确或不相关 的内容。 |
<cite> | 代表作品标题 。 |
<q> | 代表内联的引用 。 |
<dfn> | 代表一个术语包含在其最近祖先内容中的定义 。 |
<abbr> | 代表省略 或缩写 ，其完整内容在 title 属性中。 |
<data> | 这个元素在 HTML5 中加入 关联一个内容的机器可读的等价形式 （该元素只在 WHATWG 版本的 HTML 标准中，不在 W3C 版本的 HTML5 标准中）。 |
<time> | 这个元素在 HTML5 中加入 代表日期 和时间 值；机器可读的等价形式通过 datetime 属性指定。 |
<code> | 代表计算机代码 。 |
<var> | 代表代码中的变量 。 |
<samp> | 代表程序或电脑的输出 。 |
<kbd> | 代表用户输入 ，一般从键盘输出，但也可以代表其他输入，如语音输入。 |
<sub>,<sup> | 分别代表下标 和上标 。 |
<i> | 代表一段不同性质 的文字，如技术术语、外文短语等。 |
<b> | 代表一段需要被关注 的文字。 |
<u> | 代表一段需要下划线呈现的文本注释，如标记出拼写错误的文字等。 |
<mark> | 这个元素在 HTML5 中加入 代表一段需要被高亮的引用 文字。 |
<ruby> | 这个元素在 HTML5 中加入 代表被ruby 注释 标记的文本，如中文汉字和它的拼音。 |
<rt> | 这个元素在 HTML5 中加入 代表ruby 注释 ，如中文拼音。 |
<rp> | 这个元素在 HTML5 中加入 代表 ruby 注释两边的额外插入文本 ，用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。 |
<bdi> | 这个元素在 HTML5 中加入 代表需要脱离 父元素文本方向的一段文本。它允许嵌入一段不同或未知文本方向格式的文本。 |
<bdo> | 指定子元素的文本方向 ，显式地覆盖默认的文本方向。 |
<span> | 代表一段没有特殊含义的文本，当其他语义元素都不适合文本时候可以使用该元素。 |
<br> | 代表换行 。 |
<wbr> | 这个元素在 HTML5 中加入 代表建议换行 (Word Break Opportunity) ，当文本太长需要换行时将会在此处添加换行符。 |
编辑
| Element | Description |
|---|---|
<ins> | 定义增加 到文档的内容。 |
<del> | 定义从文档移除 的内容。 |
嵌入内容
| Element | Description |
|---|---|
<img> | 代表一张图片 。 |
<iframe> | 代表一个内联的框架 。 |
<embed> | 这个元素在 HTML5 中加入 代表一个嵌入 的外部资源，如应用程序或交互内容。 |
<object> | 代表一个外部资源 ，如图片、HTML 子文档、插件等。 |
<param> | 代表 <object>元素所指定的插件的参数 。 |
<video> | 这个元素在 HTML5 中加入 代表一段视频 及其视频文件和字幕，并提供了播放视频的用户界面。 |
<audio> | 这个元素在 HTML5 中加入 代表一段声音 ，或音频流 。 |
<source> | 这个元素在 HTML5 中加入 为 <video>或 <audio> |
<track> | 这个元素在 HTML5 中加入 为 <video>或 <audio>这类媒体元素指定文本轨道（字幕） 。 |
<canvas> | 这个元素在 HTML5 中加入 代表位图区域 ，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。 |
<map> 与 <area> | 元素共同定义图像映射 区域。 |
<area> 与 <map> | 元素共同定义图像映射 区域。 |
<svg> | 这个元素在 HTML5 中加入 定义一个嵌入式矢量图 。 |
<math> | 这个元素在 HTML5 中加入 定义一段数学公式 。 |
表格
| Element | Description |
|---|---|
<table> | 定义多维数据 。 |
<caption> | 代表表格的标题 。 |
<colgroup> | 代表表格中一组单列或多列 。 |
<col> | 代表表格中的列 。 |
<tbody> | 代表表格中一块具体数据 （表格主体）。 |
<thead> | 代表表格中一块列标签 （表头）。 |
<tfoot> | 代表表格中一块列摘要 （表尾）。 |
<tr> | 代表表格中的行 。 |
<td> | 代表表格中的单元格 。 |
<th> | 代表表格中的头部单元格 。 |
表单
| Element | Description |
|---|---|
<form> | 代表一个表单 ，由控件组成。 |
<fieldset> | 代表控件组 。 |
<legend> | 代表 <fieldset>控件组的标题 。 |
<label> | 代表表单控件的标题 。 |
<input> | 代表允许用户编辑数据的数据区 （文本框、单选框、复选框等）。 |
<button> | 代表按钮 。 |
<select> | 代表下拉框 。 |
<datalist> | 这个元素在 HTML5 中加入 代表提供给其他控件的一组预定义选项 。 |
<optgroup> | 代表一个选项分组 。 |
<option> | 代表一个 <select>元素或 <datalist>元素中的一个选项 |
<textarea> | 代表多行文本框 。 |
<keygen> | 这个元素在 HTML5 中加入 代表一个密钥对生成器 控件。 |
<output> | 这个元素在 HTML5 中加入 代表计算值 。 |
<progress> | 这个元素在 HTML5 中加入 代表进度条 。 |
<meter> | 这个元素在 HTML5 中加入 代表滑动条 。 |
交互元素
| Element | Description |
|---|---|
<details> | 这个元素在 HTML5 中加入 代表一个用户可以(点击)获取额外信息或控件的小部件 。 |
<summary> | 这个元素在 HTML5 中加入 代表 <details>元素的综述 或标题 。 |
<menuitem> | 这个元素在HTML5中加入代表一个用户可以点击的菜单项。 |
<menu> | 这个元素在 HTML5 中加入代表菜单。 |
HTML标签的使用
- 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
- 适用于某小区域描述
- dl dt dd
- dt为标题，dd为内容
- 多行内容可以采用dd里面包含多个p，也可以并列多个dd
- a
- 必须写title，
- href="链接"，如果不做任何操作href="javascript:;"，
- 根据业务决定是否写target="_blank"
1) 页面跳转 <a href="URL">另一个网站</a>
2) 跳转到指定ID所在的位置 <a href="#top"></a>
3) 下载文件: <a href="URL" download="xxx.pdf">下载</a>
4) 发邮件: <a href="mailto:xxxxx@qq.com">发邮件</a>
5) 打电话: <a href="tel: 13111111111">拨打</a>
6) 发短信: <a href="sms: 13111111111">拨打</a>
- img
- 必须写alt，
- 建议写title，
- 要考虑onerror,onload,懒加载，
- 如果该图片只是为了样式的话，用css的background代替img标签
- button
- 可变元素
- 不用input type="button"，而用<button type="button">提交</button>
- strong/b
- strong：表示非常重要,浏览器默认风格为粗体，搜索引擎会知道这是要强调的内容，在样式上为加粗；这样做既可以让文档更加地有用，也可以被屏幕阅读器识别出来，并以不同的语调发出
- b：一样有加粗效果，但仅仅是样式
- em/i
- 表示强调,浏览器的默认风格为斜体，搜索引擎也会知道，在样式上为斜体；既可以让文档读起来更有趣,也可以被屏幕阅读器识别出来,并以不同的语调发出
- i:一样有斜体效果，但仅仅是样式
- form
- 获取表单元素时, 多使用form代替div
- iframe
- 尽量少用iframe
- 可以用来加载速度较慢的内容，例如广告
- 浏览器会对iframe中的内容进行安全控制
- 脚本可以并行下载
- 即使iframe内容为空也消耗加载时间
- 会阻止页面加载
- 没有语义
- 缩写abbr
- abbr 最重要的应该是应该添加一个 title 属性对缩写进行描述
- <abbr title="Web Developer" >WD</abbr>
- 大段引用:
<blockquote>，一般引用:<cite>
<blockquote>
之前就一直想写这样的一篇文章，分享一下如何去创造一个可访问性更好的页面。今天的计划里有一条把 HTML Tag 和 WCAG标准结合起来。我推荐你这样去写你的 HTML，让某些人的生活可以更容易。
</blockquote>
<p>某A给我印象最深刻的一句话是，<cite>“做前端要有爱。不要动不动就有朩有地对各种人使用咆哮体”</cite>。</p>
- 删除：
<del>
- 强调某些东西是被删除,那就是使用 <del> 标签
<del>HTML上表示强调时，请使用 <b> 标签</del>
HTML上表示强调时，请使用 <strong> 标签
- 表格:
<table>
<table summary="sofish's blog status">
<thead>
<tr>
<th>DATE</th>
<th>IP</th>
<th>PV</th>
</tr>
</thead>
<tbody>
<tr>
<td>2011.3.11</td>
<td>3000</td>
<td>8000</td>
</tr>
</tbody>
</table>
- 格式化片段
<code>/<pre>
- <code> 是指 computer code text, 而 <pre> 是指 preformatted text。<pre> 的范围更广，并且是块状元素，可能被使用来格式化各种文本，特别是代码。使用没有需要特别注意的，主要是语义上的正确使用，比如不要用 <pre> 来代替一般的 <p>
<code>text-align:center</code>
<pre>
{ ( 1 * 102 ) + ( 9 * 101 ) + ( 3 * 100 ) }
</pre>
- 无语义标签：
<div>/<span>
推荐用法是尽量使用其他来做为页面框架的容器，比如布局、添加额外的视觉效果，而不是段落等的替代品
<div id="container">
<div id="content">
</div>
<div id="sidebar">
<ul>
<li><span>God</span>, oh my zsh</span></li>
</ul>
</div>
</div>
- address
表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息。可以是必要的任何一种联系方式,比如真实地址、URL、电子邮箱、电话号码、社交媒体账号、地理坐标等等。此元素应该包含联系信息对应的个人、团体或组织的名称。
<address>
<a href="mailto:jim@rock.com">jim@rock.com</a><br>
<a href="tel:+13115552368">(311) 555-2368</a>
</address>
- p
- 慎用p标签和用带有content单词来命名id和class，蜘蛛会抓取p标签和content里面的内容，而如果这里面的内容不适用于蜘蛛抓取，蜘蛛会把这段文字内容作为网页的简要介绍或者正文看待
- 什么情况下用p标签和content呢?只有希望蜘蛛抓取的内容才用这样的标签和id、class的命名单词
- 在不是段落的地方的p标签，应该使用div代替
标签
- 自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )；
- 可选的闭合标签（closing tag），需闭合 ( 例如：</ li>或 )；
- 尽量减少标签数量；
<img src="https://atts.w3cschool.cn/attachments/image/cimg/google.png" alt="Google">
<input type="text" name="title">
<ul>
<li>Style</li>
<li>Guide</li>
</ul>
<!-- Not recommended -->
<span class="avatar">
<img src="...">
</span>
<!-- Recommended -->
<img class="avatar" src="...">
Class与ID
- class 应以功能或内容命名，不以表现形式命名；
- class 与 id 单词字母小写，多个单词组成时，采用中划线-或者_分割；
- 使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class；
<!-- Not recommended -->
<div class="j-hook left contentWrapper"></div>
<!-- Recommended -->
<div id="j-hook" class="sidebar content-wrapper"></div>
属性顺序
- id
- class
- name
- data-xxx
- src, for, type, href
- title, alt
- aria-xxx, role
<a id="..." class="..." data-modal="toggle" href="###"></a>
<input class="form-control" type="text">
<img src="..." alt="...">
引号
属性的定义，统一使用双引号。
<!-- Not recommended -->
<span id='j-hook' class=text>Google</span>
<!-- Recommended -->
<span id="j-hook" class="text">Google</span>
嵌套
a 不允许嵌套 div这种约束属于语义嵌套约束，与之区别的约束还有严格嵌套约束，比如a 不允许嵌套 a。
严格嵌套约束在所有的浏览器下都不被允许；而语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样。
语义嵌套约束
<li> 用于 <ul> 或 <ol> 下；
<dd>, <dt> 用于 <dl> 下；
<thead>, <tbody>, <tfoot>, <tr>, <td> 用于 <table> 下；
严格嵌套约束
inline-Level 元素，仅可以包含文本或其它 inline-Level 元素;
<a>里不可以嵌套交互式元素<a>、<button>、<select>等;
<p>里不可以嵌套块级元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。
布尔值属性
HTML5 规范中 disabled、checked、selected 等属性不用设置值。
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
HEAD
文档类型
为每个 HTML 页面的第一行添加标准模式（standard mode）的声明， 这样能够确保在每个浏览器中拥有一致的表现。
<!DOCTYPE html>
语言属性
<!-- 中文 -->
<html lang="zh-Hans">
<!-- 简体中文 -->
<html lang="zh-cmn-Hans">
<!-- 繁体中文 -->
<html lang="zh-cmn-Hant">
<!-- English -->
<html lang="en">
字符编码
指定字符编码的 meta 必须是 head 的第一个直接子元素；
<html>
<head>
<meta charset="utf-8">
......
</head>
<body>
......
</body>
</html>
IE 兼容模式
优先使用最新版本的IE 和 Chrome 内核
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
SEO 优化
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- SEO -->
<title>Style Guide</title>
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
</head>
viewport
viewport:一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；width: 浏览器宽度，输出设备中的页面可见区域宽度；device-width: 设备分辨率宽度，输出设备的屏幕可见宽度；initial-scale: 初始缩放比例；maximum-scale: 最大缩放比例；
为移动端设备优化，设置可见区域的宽度和初始缩放比例。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
iOS 图标
- apple-touch-icon 图片自动处理成圆角和高光等效果;
- apple-touch-icon-precomposed禁止系统自动添加效果，直接显示设计原图;
<!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">
<!-- iPad，72x72 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72">
<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114">
<!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">
favicon
在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证favicon可访问，避免404，必须遵循以下两种方法之一：
- 在 Web Server 根目录放置 favicon.ico 文件；
- 使用 link 指定 favicon；
<link rel="shortcut icon" href="path/to/favicon.ico">
HEAD 模板
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Style Guide</title>
<meta name="description" content="不超过150个字符">
<meta name="keywords" content="">
<meta name="author" content="name, email@gmail.com">
<!-- 为移动设备添加 viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- iOS 图标 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
<link rel="shortcut icon" href="path/to/favicon.ico">
</head>
扫一扫
593
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
