前端seo方法 做好前端SEO代码规范
我是浦工，点击右上方红字“关注”，每天为你分享互联网行业【网络运营】和【IT技术】干货。
SEO分为站内优化和站外优化，内优化指的是站长能控制的所有网站本身的调整，如网站结构、页面HTML代码，站外优化指的是外部链接建设及行业社群的参与互动。
站内优化侧重于HTML代码的规范，如果站内优化忽视了，那么网站爬虫无法抓取到实质性内容，就会导致网站没有收录，那么排名也将是遥不可及的梦。
SEO优化
SEO原理页面抓取： 蜘蛛向服务器请求进入页面，获取页面内容
分析入库：对获取到的内容进行分析，对优质页面进行收录
检索排序：当用户检索关键词时，从收录的页面中按照一定的规则进行排序，并返回给用户结果
前端SEO代码规范–TKD规范TDK是个缩写，T页面标题，K页面关键词以及D页面描述
title设置规则：
<title>今日头条</title>
一般不超过80个字符
词语间要用英文“-”隔开
一般是“网站名称_主关键词或一句含有主关键词的描述”，比如做“头条”这个词，“网站名称_今日头条-头条新闻-今日头条官网”
keywords设置规则：
<meta name="keywords" content="今日头条，头条，头条网，头条新闻，今日头条官网">
词语间要用英文“,”隔开
首页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@toutiao.com">发邮件</a>
5) 打电话:
<a href="tel: 13800000000">拨打</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@toutiao.com">jim@toutiao.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@toutiao.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>
总结，SEO站内优化是一项非常重要的工作，特别是网站TDK设置，H标签的使用，A标签的使用，A标签属性值的设置，img标签属性的设置和一些不利于抓取的标签都需要做到合理布局，这样才能解决搜索引擎的抓取，只有抓取后才有可能会收录，有了收录才能有排名，有了排名才能带来精准的流量，有了流量才有可能形成蕞终转化。
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
