我是浦工，点击右上方红字“关注”，每天为你分享互联网行业【网络运营】和【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
代表关于文档元数据的一个集合，包括脚本或样式表的链接或内容。
定义文档的标题，将显示在浏览器的标题栏或标签页上。该元素只能包含文本，包含的标签不会被解释。</p>
<p> <base>定义页面上相对URL的基准URL。</p>
<p> <link>用于链接外部资源到该文档。</p>
<p> <meta>定义其他HTML元素是无法描述的元数据。</p>
<p> <style>用于内联CSS。</p>
<p> <strong>脚本</strong></p>
<p> ElementDescription</p>
<p> [xss_clean]定义一个内联脚本或链接到外部脚本。基本语言是JavaScript。</p>
<p> <noscript>定义当浏览器不支持脚本时显示的替代文字。</p>
<p> <strong>章节</strong></p>
<p> ElementDescription</p>
<p> <body>代表HTML文档的内容。文档中只能有一个元素。</p>
<p> <section>这个元素在HTML5中加入定义为文档中的一个章节。</p>
<p> <nav>这个元素在HTML5中加入定义只包含导航链接的章节。</p>
<p> 这个元素在HTML5中加入定义可以独立于内容其余部分的完整独立内容块。</p>
<p> 这个元素在HTML5中加入定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。</p>
<p> <h1>,<h2>,<h3>,<h4>,<h5>,<h6>标题元素实现了六层文档标题，<h1>是最大的标题，<h6>是最小的标题。标题元素简要地描述章节的主题。</p>
<p> <header>这个元素在HTML5中加入定义页面或章节的头部。它经常包含logo、页面标题和导航性的目录。</p>
<p> <footer>这个元素在HTML5中加入定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。</p>
<p> 定义包含联系信息的一个章节。</p>
<p> <main>这个元素在HTML5重新加入定义文档中主要或重要的内容。</p>
<p> <strong>组织内容</strong></p>
<p> ElementDescription</p>
<p> <p>定义一个段落。</p>
<p> <hr>代表章节、文章或其它章节内容中段落之间的分隔符。</p>
<p> <pre>代表其内容已经预先排版过，格式应当保留。</p>
<p> <blockquote>代表引用自其他来源的内容。</p>
<p> <ol>定义为一个有序列表。</p>
<p> <ul>定义为一个无序列表。</p>
<p> <li>定义列表中的一个列表项。</p>
<p> <dl>定义一个定义列表（一系列术语和其定义）。</p>
<p> <dt>代表一个又一个<dd>定义的术语。</p>
<p> <dd>代表出现在它之前术语的定义。</p>
<p> <figure>这个元素在HTML5中加入代表一个和文档有关的图例。</p>
<p> <figcaption>这个元素在HTML5中加入代表着一个图例的说明。</p>
<p> <div>代表一个通用的容器，没有特殊的含义。</p>
<p> <strong>文字形式</strong></p>
<p> ElementDescription</p>
<p> <a>代表一个链接到其他资源的超链接。</p>
<p> <em>代表强调文字。</p>
<p> <strong>代表特别重要文字。</p>
<p> <small>代表注释，如免责声明、版权声明等，对理解文档不重要。</p>
<p> <s>代表不准确或不相关的内容。</p>
<p> <cite>代表作品标题。</p>
<p> <q>代表内联的引用。</p>
<p> <dfn>代表一个术语包含在其最近祖先内容中的定义。</p>
<p> 代表省略或缩写，其完整内容在title属性中。</p>
<p> <data>这个元素在HTML5中加入关联一个内容的机器可读的等价形式（该元素只在WHATWG版本的HTML标准中，不在W3C版本的HTML5标准中）。</p>
<p> <time>这个元素在HTML5中加入代表日期和时间值；机器可读的等价形式通过datetime属性指定。</p>
<p> <code>代表计算机代码。</p>
<p> <var>代表代码中的变量。</p>
<p> <samp>代表程序或电脑的输出。</p>
<p> <kbd>代表用户输入，一般从键盘输出，但也可以代表其他输入，如语音输入。</p>
<p> <sub>,<sup>分别代表下标和上标。</p>
<p> <i>代表一段不同性质的文字，如技术术语、外文短语等。</p>
<p> <b>代表一段需要被关注的文字。</p>
<p> <u>代表一段需要下划线呈现的文本注释，如标记出拼写错误的文字等。</p>
<p> <mark>这个元素在HTML5中加入代表一段需要被高亮的引用文字。</p>
<p> <ruby>这个元素在HTML5中加入代表被ruby注释标记的文本，如中文汉字和它的拼音。</p>
<p> <rt>这个元素在HTML5中加入代表ruby注释，如中文拼音。</p>
<p> <rp>这个元素在HTML5中加入代表ruby注释两边的额外插入文本，用于在不支持ruby注释显示的浏览器中提供友好的注释显示。</p>
<p> <bdi>这个元素在HTML5中加入代表需要脱离父元素文本方向的一段文本。它允许嵌入一段不同或未知文本方向格式的文本。</p>
<p> <bdo>指定子元素的文本方向，显式地覆盖默认的文本方向。</p>
<p> <span>代表一段没有特殊含义的文本，当其他语义元素都不适合文本时候可以使用该元素。</p>
<p> <br>代表换行。</p>
<p> <wbr>这个元素在HTML5中加入代表建议换行(WordBreakOpportunity)，当文本太长需要换行时将会在此处添加换行符。</p>
<p> <strong>编辑</strong></p>
<p> ElementDescription</p>
<p> <ins>定义增加到文档的内容。</p>
<p> <del>定义从文档移除的内容。</p>
<p> <strong>嵌入内容</strong></p>
<p> ElementDescription</p>
<p style="text-align:center"><img>代表一张图片。</p>
<p> <iframe>代表一个内联的框架。</p>
<p> <embed>这个元素在HTML5中加入代表一个嵌入的外部资源，如应用程序或交互内容。</p>
<p> <object>代表一个外部资源，如图片、HTML子文档、插件等。</p>
<p> <param>代表<object>元素所指定的插件的参数。</p>
<p> <video>这个元素在HTML5中加入代表一段视频及其视频文件和字幕，并提供了播放视频的用户界面。</p>
<p> 这个元素在HTML5中加入代表一段声音，或音频流。</p>
<p> <source>这个元素在HTML5中加入为<video>或</p>
<p> <track>这个元素在HTML5中加入为<video>或这类媒体元素指定文本轨道（字幕）。</p>
<p> <canvas>这个元素在HTML5中加入代表位图区域，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。</p>
<p> <map>与元素共同定义图像映射区域。</p>
<p> 与<map>元素共同定义图像映射区域。</p>
<p> <svg>这个元素在HTML5中加入定义一个嵌入式矢量图。</p>
<p> <math>这个元素在HTML5中加入定义一段数学公式。</p>
<p> <strong>表格</strong></p>
<p> ElementDescription</p>
<p> <table>定义多维数据。</p>
<p> <caption>代表表格的标题。</p>
<p> <colgroup>代表表格中一组单列或多列。</p>
<p> <col>代表表格中的列。</p>
<p> <tbody>代表表格中一块具体数据（表格主体）。</p>
<p> <thead>代表表格中一块列标签（表头）。</p>
<p> <tfoot>代表表格中一块列摘要（表尾）。</p>
<p> <tr>代表表格中的行。</p>
<p> <td>代表表格中的单元格。</p>
<p> <th>代表表格中的头部单元格。</p>
<p> <strong>表单</strong></p>
<p> ElementDescription</p>
<p> <form>代表一个表单，由控件组成。</p>
<p> <fieldset>代表控件组。</p>
<p> <legend>代表<fieldset>控件组的标题。</p>
<p> <label>代表表单控件的标题。</p>
<p> <input>代表允许用户编辑数据的数据区（文本框、单选框、复选框等）。</p>
<p> <button>代表按钮。</p>
<p> <select>代表下拉框。</p>
<p> <datalist>这个元素在HTML5中加入代表提供给其他控件的一组预定义选项。</p>
<p> <optgroup>代表一个选项分组。</p>
<p> <option>代表一个<select>元素或<datalist>元素中的一个选项</p>
<p> <textarea>代表多行文本框。</p>
<p> <keygen>这个元素在HTML5中加入代表一个密钥对生成器控件。</p>
<p> <output>这个元素在HTML5中加入代表计算值。</p>
<p> <progress>这个元素在HTML5中加入代表进度条。</p>
<p> <meter>这个元素在HTML5中加入代表滑动条。</p>
<p> <strong>交互元素</strong></p>
<p> ElementDescription</p>
<p> <details>这个元素在HTML5中加入代表一个用户可以(点击)获取额外信息或控件的小部件。</p>
<p> <summary>这个元素在HTML5中加入代表<details>元素的综述或标题。</p>
<p> <menuitem>这个元素在HTML5中加入代表一个用户可以点击的菜单项。</p>
<p> <menu>这个元素在HTML5中加入代表菜单。</p>
<p> <strong>h1</strong></p>
<p> -适用于网站logo、网站导航的第一个超链接、分类名称、产品标题名称</p>
<p> -里面不能包含html标签</p>
<p> -整个页面有且只有一个</p>
<p> -要注意的是，不论任何页面，h1标签只能出现一次，它是当前页面的主标题，权重最高,所以要慎用.</p>
<p> -一般情况下，如果有关键词的话最好是在h1里面出现</p>
<p> <strong>h2</strong></p>
<p> -适用于分类页面、内容页面标题链接、列表名称，</p>
<p> -里面不包含html标签</p>
<p> -可以有多个</p>
<p> <strong>h3</strong></p>
<p> -适用于细分页面标题链接、tag页面、相关产品内容；</p>
<p> <strong>h4~h6</strong></p>
<p> -较少使用，建议用p代替</p>
<p> <strong>ul</strong></p>
<p> -无序列表</p>
<p> -结构层次：ul-li-a-span|strong|small</p>
<p> <strong>ol</strong></p>
<p> -有序列表</p>
<p> -结构层次：ol-li-a-span|strong|small</p>
<p> <strong>dl</strong></p>
<p> -适用于某小区域描述</p>
<p> -dldtdd</p>
<p> -dt为标题，dd为内容</p>
<p> -多行内容可以采用dd里面包含多个p，也可以并列多个dd</p>
<p> <strong>a</strong></p>
<p> -必须写title，</p>
<p> -href="链接"，如果不做任何操作href="_javascript:;"，</p>
<p> -根据业务决定是否写target="_blank"，表示在新的标签页打开。</p>
<p> ??1)页面跳转</p>
<p> 另一个网站</p>
<p> ??2)跳转到指定ID所在的位置</p>
<p> </p>
<p> ??3)下载文件:</p>
<p> 下载</p>
<p> ??4)发邮件:</p>
<p> 发邮件</p>
<p> ??5)打电话:</p>
<p> 拨打</p>
<p> ??6)发短信:</p>
<p> 拨打</p>
<p> <strong>img</strong></p>
<p> -必须写alt，</p>
<p> -建议写title，</p>
<p> -要考虑onerror,onload,懒加载，</p>
<p> -如果该图片只是为了样式的话，用css的background代替img标签</p>
<p> <strong>button</strong></p>
<p> -可变元素</p>
<p> -不用inputtype="button"，而用<button type="button">提交</button></p>
<p> <strong>strong/b</strong></p>
<p> -strong：表示非常重要,浏览器默认风格为粗体，搜索引擎会知道这是要强调的内容，在样式上为加粗；这样做既可以让文档更加地有用，也可以被屏幕阅读器识别出来，并以不同的语调发出</p>
<p> -b：一样有加粗效果，但仅仅是样式</p>
<p> <strong>em/i</strong></p>
<p> -表示强调,浏览器的默认风格为斜体，搜索引擎也会知道，在样式上为斜体；既可以让文档读起来更有趣,也可以被屏幕阅读器识别出来,并以不同的语调发出</p>
<p> -i:一样有斜体效果，但仅仅是样式</p>
<p> <strong>form</strong></p>
<p> -获取表单元素时,多使用form代替div</p>
<p> <strong>iframe</strong></p>
<p> -尽量少用iframe</p>
<p> -可以用来加载速度较慢的内容，例如广告</p>
<p> -浏览器会对iframe中的内容进行安全控制</p>
<p> -脚本可以并行下载</p>
<p> -即使iframe内容为空也消耗加载时间</p>
<p> -会阻止页面加载</p>
<p> -没有语义</p>
<p> <strong>缩写abbr</strong></p>
<p> -abbr最重要的应该是应该添加一个title属性对缩写进行描述</p>
<p> -WD</abbr></p>
<p> <strong>大段引用:<blockquote>，一般引用:<cite></strong></p>
<p> <blockquote></p>
<p> 之前就一直想写这样的一篇文章，分享一下如何去创造一个可访问性更好的页面。今天的计划里有一条把HTMLTag和WCAG标准结合起来。我推荐你这样去写你的HTML，让某些人的生活可以更容易。</p>
<p> </blockquote></p>
<p> <p>某A给我印象最深刻的一句话是，<cite>“做前端要有爱。不要动不动就有朩有地对各种人使用咆哮体”</cite>。</p></p>
<p> <strong>删除：<del></strong></p>
<p> -强调某些东西是被删除,那就是使用<del>标签</p>
<p> <del>HTML上表示强调时，请使用<b>标签</del></p>
<p> HTML上表示强调时，请使用<strong>标签</p>
<p> <strong>表格:<table></strong></p>
<p> <table summary="sofish's blog status"></p>
<p> <thead></p>
<p> <tr></p>
<p> <th>DATE</th></p>
<p> <th>IP</th></p>
<p> <th>PV</th></p>
<p> </tr></p>
<p> </thead></p>
<p> <tbody></p>
<p> <tr></p>
<p> <td>2011.3.11</td></p>
<p> <td>3000</td></p>
<p> <td>8000</td></p>
<p> </tr></p>
<p> </tbody></p>
<p> </table></p>
<p> <strong>格式化片段<code>/<pre></strong></p>
<p> -<code>是指computercodetext,而<pre>是指preformattedtext。<pre>的范围更广，并且是块状元素，可能被使用来格式化各种文本，特别是代码。使用没有需要特别注意的，主要是语义上的正确使用，比如不要用<pre>来代替一般的<p></p>
<p> <code>text-align:center</code></p>
<p> <pre></p>
<p> {(1*102)+(9*101)+(3*100)}</p>
<p> </pre></p>
<p> <strong>无语义标签：<div>/<span></strong></p>
<p> 推荐用法是尽量使用其他来做为页面框架的容器，比如布局、添加额外的视觉效果，而不是段落等的替代品</p>
<p> <div id="container"></p>
<p> <div id="content"></p>
<p> </div></p>
<p> <div id="sidebar"></p>
<p> <ul></p>
<p> <li><span>God</span>,ohmyzsh</span></li></p>
<p> </ul></p>
<p> </div></p>
<p> </div></p>
<p> <strong>address</strong></p>
<p> 表示其中的HTML提供了某个人或某个组织（等等）的联系信息。可以是必要的任何一种联系方式,比如真实地址、URL、电子邮箱、电话号码、社交媒体账号、地理坐标等等。此元素应该包含联系信息对应的个人、团体或组织的名称。</p>
<p> </p>
<p> <br></p>
<p> (311)555-2368</p>
<p> </address></p>
<p> <strong>p</strong></p>
<p> -慎用p标签和用带有content单词来命名id和class，蜘蛛会抓取p标签和content里面的内容，而如果这里面的内容不适用于蜘蛛抓取，蜘蛛会把这段文字内容作为网页的简要介绍或者正文看待</p>
<p> -什么情况下用p标签和content呢?只有希望蜘蛛抓取的内容才用这样的标签和id、class的命名单词</p>
<p> -在不是段落的地方的p标签，应该使用div代替</p>
<p> 自闭合（self-closing）标签，无需闭合(例如：imginputbrhr等)；</p>
<p> 可选的闭合标签（closingtag），需闭合(例如：</ li>或)；</p>
<p> 尽量减少标签数量；</p>
<p style="text-align:center"><img src="http://www.mofang3.com/uploadfile/202208/183c9f67d35bd4a.jpg" alt="Google"></p>
<p> <input type="text" name="title"></p>
<p> <ul></p>
<p> <li>Style</li></p>
<p> <li>Guide</li></p>
<p> </ul></p>
<p> <!-- Not recommended --></p>
<p> <span class="avatar"></p>
<p style="text-align:center"><img src="http://www.toutiao.com/a7123555579376763407/..."></p>
<p> </span></p>
<p> <!-- Recommended --></p>
<p style="text-align:center"><img class="avatar" src="http://www.toutiao.com/a7123555579376763407/..."></p>
<p> <strong>Class与ID</strong></p>
<p> class应以功能或内容命名，不以表现形式命名；</p>
<p> class与id单词字母小写，多个单词组成时，采用中划线-或者_分割；</p>
<p> 使用唯一的id作为Javascripthook,同时避免创建无样式信息的class；</p>
<p> <!-- Not recommended --></p>
<p> <div class="j-hook left contentWrapper"></div></p>
<p> <!-- Recommended --></p>
<p> <div id="j-hook" class="sidebar content-wrapper"></div></p>
<p> <strong>属性顺序</strong></p>
<p> id</p>
<p> class</p>
<p> name</p>
<p> data-xxx</p>
<p> src,for,type,href</p>
<p> title,alt</p>
<p> aria-xxx,role</p>
<p> </p>
<p> <input class="form-control" type="text"></p>
<p style="text-align:center"><img src="http://www.toutiao.com/a7123555579376763407/..." alt="..."></p>
<p> <strong>引号</strong></p>
<p> 属性的定义，统一使用双引号。</p>
<p> <!-- Not recommended --></p>
<p> <span id='j-hook' class=text>Google</span></p>
<p> <!-- Recommended --></p>
<p> <span id="j-hook" class="text">Google</span></p>
<p> a不允许嵌套div这种约束属于语义嵌套约束，与之区别的约束还有严格嵌套约束，比如a不允许嵌套a。</p>
<p> 严格嵌套约束在所有的浏览器下都不被允许；而语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样。</p>
<p> <strong>语义嵌套约束</strong></p>
<p> <li>用于<ul>或<ol>下；</p>
<p> <dd>,<dt>用于<dl>下；</p>
<p> <thead>,<tbody>,<tfoot>,<tr>,<td>用于<table>下；</p>
<p> <strong>严格嵌套约束</strong></p>
<p> inline-Level元素，仅可以包含文本或其它inline-Level元素;</p>
<p> <a>里不可以嵌套交互式元素<a>、<button>、<select>等;</p>
<p> <p>里不可以嵌套块级元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。</p>
<p> <strong>布尔值属性</strong></p>
<p> HTML5规范中disabled、checked、selected等属性不用设置值。</p>
<p> <input type="text" disabled></p>
<p> <input type="checkbox" value="1" checked></p>
<p> <select></p>
<p> <option value="1" selected>1</option></p>
<p> </select></p>
<p> <strong>文档类型</strong></p>
<p> 为每个HTML页面的第一行添加标准模式（standardmode）的声明，这样能够确保在每个浏览器中拥有一致的表现。</p>
<p> <!DOCTYPE html></p>
<p> <strong>语言属性</strong></p>
<p> <!-- 中文 --></p>
<p> <html lang="zh-Hans"></p>
<p> <!-- 简体中文 --></p>
<p> <html lang="zh-cmn-Hans"></p>
<p> <!-- 繁体中文 --></p>
<p> <html lang="zh-cmn-Hant"></p>
<p> <!-- English --></p>
<p> <html lang="en"></p>
<p> <strong>字符编码</strong></p>
<p> 指定字符编码的meta必须是head的第一个直接子元素；</p>
<p> <html></p>
<p> <head></p>
<p> <meta charset="utf-8"></p>
<p> ......</p>
<p> </head></p>
<p> <body></p>
<p> ......</p>
<p> </body></p>
<p> </html></p>
<p> <strong>IE兼容模式</strong></p>
<p> 优先使用最新版本的IE和Chrome内核</p>
<p> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></p>
<p> <strong>SEO优化</strong></p>
<p> <head></p>
<p> <meta charset="utf-8"></p>
<p> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></p>
<p> <!-- SEO --></p>
<p> <title>StyleGuide
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模板
StyleGuide
总结，SEO站内优化是一项非常重要的工作，特别是网站TDK设置，H标签的使用，A标签的使用，A标签属性值的设置，img标签属性的设置和一些不利于抓取的标签都需要做到合理布局，这样才能解决搜索引擎的抓取，只有抓取后才有可能会收录，有了收录才能有排名，有了排名才能带来精准的流量，有了流量才有可能形成蕞终转化。
