标签语义化

AXIN
274 阅读5分钟

优点

    1.  HTML结构清晰
    2.  代码可读性较好
    3.  无障碍阅读
    4.  搜索引擎可以根据标签的语言确定上下文和权重问题
    5.  移动设备能够更完美的展现网页（对css支持较弱的设备）
    6.  便于团队维护和开发

常用标签

H1-h6     标题内容
P         段落
Ul        无序
Ol        有序
Dl        定义列表
Thead     表格中的表头内容
Tbody     表格中的主体内容

html5新增标签

Header    section或者page的页眉
Nav       导航栏
Footer    section或者page的页脚
Progress  进度条
Video     视频

dl dt dd

表示定义列表，表示有标题的内容块，比如给一个图片添加标题等，语义化更强

基本用法：

<dl>
    <dt>标题标题</dt>
    <dd>内容内容</dd>
    <dd>内容内容</dd>
</dl>

<style>
    dl {
      margin-bottom: 50px;
    }

    dl dt {
      background: #5f9be3;
      color: #fff;
      float: left;
      font-weight: bold;
      margin-right: 10px;
      padding: 5px;
      width: 100px;
    }

    dl dd {
      margin: 2px 0;
      padding: 5px 0;
    }
  </style>
</head>

<body>
  <header>header</header>
  <footer>footer</footer>
  <dl>
    <dt>Name: </dt>
    <dd>Squall Li</dd>
    <dt>Age: </dt>
    <dd>23</dd>
    <dt>Gender: </dt>
    <dd>Male</dd>
    <dt>Day of Birth:</dt>
    <dd>26th May 1986</dd>
  </dl>

效果：

京东商城的页面代码：

thead tfoot

thead表示列表标题行 tfoot表示列表尾行

<table border="1">
  <thead>   
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

标签的SEO用法

H标签

H标签也叫做Heading标签，在HTML语言里一共有六种大小的heading标签，从H1一直到H6。

<h1>-<h6> 标签一般用来定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。合理使用H标签可以让页面层级关系更清楚，让搜索引擎更好地抓取和识别页面主体内容。

 1、每个页面有且只能有一个H1标签。
 2、H1代表网页的主题，越靠近<body>标签越好，方便搜索引擎快速识别页面主题。对于首页来说，H1一般用在品牌名上。对于内容页面，H1就是页面主标题。重点核心关键词往往需要在H1标签中出现。
 3、H2可以有多个，一般用在段落标题、文章副标题或模块名标题上，可以部署长尾关键词。
 4、H3可以有多个，一般用做段落小节标题或模块名标题，可以部署长尾关键词。
 5、H4-H6标签很少用，一般用在相对不是特别重要的内容上。（但比一般HTML标签比如P权重更高）

不加任何样式的H标签很丑陋，各个浏览器解析也不一致，所以都会重新定义H1标签的样式。

国外的SEOer测试：对于Google来说，加样式的H1标签比不加的SEO排名效果好。（百度不清楚）

H标签不能滥用，否则有副作用。比较常见的用法是：主标题用H1，副标题用H2、模块名或小节标题用H3。甚至跳过H2，只用H1和H3。

Meta标签

最常见的写法：

<meta name="keywords"  content="XXX,XXX" />
<meta name="description" content="XXX" />

Keywords标签写页面主关键词，一般是5个词左右，用英文逗号分隔。

Description标签写页面的简介描述，一般在110字以内。（Google的话120字以内）

Nofollow

<a href="http://www.huangye88.com" rel="nofollow">这是一个网站</a>

这告诉搜索引擎蜘蛛不要对此链接进行跟踪。当不想把权重输给某个链接，但又不得不在内容上出现该链接时，就可以使用这样的方式屏蔽掉。

常见的比如：“关于我们”、“联系我们”等等，几乎所有网站底部都有这些链接，这些都需要添加Nofollow标签。

这些页面带来的SEO价值不高，和当前页面的关联度一般不大，为避免浪费搜索蜘蛛的抓取爬行，需要通过Nofollow标签屏蔽掉。

iframe标签

搜索引擎的蜘蛛不会识别在iframe中被调用的图片、文本、url等内容的，因为该内容不属于该页面，只是访问的时候被临时的调用。百度SEO建议中也说过：“frame/frameset/iframe”等标签,会导致百度spider的抓取困难。

利用这一点我们可以把网站中需要给用户查看，但不需要搜索引擎抓取的内容用iframe框架进行显示。

比如一些网站最顶部的Topbar导航栏，往往是注册、登录等等，可以写在iframe框架中。

还有一些赞助商广告，如果不需要SEO效果，都可以放到独立的iframe中，只是在页面中引用。

但是不易过多使用，有可能被认为作弊，而且iframe对页面加载速度明显不利。

CSS和JS

1 最好把CSS和JS放到独立的外部文件中，这样可以减少代码量，让内容更简洁，方便搜索引擎识别。 当然，有时为了减少CSS和JS的请求数，有些大型网站会直接在内容页中输出CSS和JS。一般网站不这么做。

2 搜索引擎虽然现在也能识别JS里的内容，但一般来说，放在JS文件中的内容不会影响页面的SEO。利用这点，可以把必须要显示、但和页面主题内容不关联的内容放到JS中反写回页面，这样避免降低页面关键词密度或传递链接权重。document.write("XXX")

CSS样式命名

页头:header
顶部导航:topbar
登录:loginBar
标志:logo
侧栏:sideBar
广告:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list

搜索引擎变得越来越智能，很容易通过你的cSS样式来识别页面内容。

合理有序的CSS命名规则可以不仅可以提升代码质量，而且更加符合搜索引擎的规范。

avatar
文章
阅读
粉丝