只做利于SEO的网站,提供网站建设、SEO、网站代运营等服务。服务中心 | 建站流程 | 网站地图

利于SEO优化的ul li短标签布局

2017-01-19小猴建站 阅读()相关主题:CSS代码优化

       相信各位站长用ul li标签组合比较多了,比如导航栏、文章列表等地方,对于SEO来说类似的ul li组合、ol li组合、dl dt dd组合等短标签,都具有重要意义,比如导航栏里面两种布局方式

第一种CSS布局方式:

<div class="nav">
 <a href="/channel1">栏目1</a>
 <a href="/channel1">栏目2</a>
</div>

第二种CSS布局方式:

<ul class="nav">
 <li><a href="/channle1">栏目1</a></li>
 <li><a href="/channle2">栏目2</a></li>
</ul>

       DIVCSS5推荐用第二种布局,在不考虑网站SEO优化的情况下,减少使用ul li可以使代码更精简。

       但有的站长提出如果单纯用<a>标签的话容易让搜索引擎认为是堆砌关键词。这个笔者并未做认证,即使有也是较少的影响,只证实在导航里面堆砌关键词会受到惩罚。

       运用ul li等标签实际上多了一组标签,对于有子栏目的非常实用,最大盒子才命名其他下面盒子用短标签,写样式的时候也更简单如下:

<div class="nav">
 <ul>
  <li>
   <a href="/channel1" class="nav_top">栏目1</a>
   <a href="/channel1/channel1_1">子栏目1_1</a>
   <a href="/channel1/channel1_2">子栏目1_2</a> 
  </li>
  <li>
   <a href="/channel2" class="nav_top">栏目2</a>
   <a href="/channel2/channel2_1">子栏目2_1</a>
   <a href="/channel2/channel2_2">子栏目2_2</a> 
  </li>
 </ul>
</div>

全通导航样式可以这么写:

.nav{width:100%;height:40px;background:#eee;}

.nav ul{width:1100px;margin:0 auto;}

.nav li a{display:block;background:#ccc}

.nav li a.nav_top{background:#c00;}