查看: 4147|回复: 39

CSS关于SEO的细节

[复制链接]
发表于 2012-5-4 14:31:13 | 显示全部楼层 |阅读模式
对于任何一个网站来说名字是SEO的首选,而H1标签是搜索引擎认为页面上最重要的文字部门,所以我们要把网站的名字放在H1中;问题是代表网站名字的通常是一个LOGO图片,而图片对于SEO来说是不友好的。请看下面jquery的首页的logo部分的图片和代码。
<div id="jq-header">
<h1><a href="http://www.002pc.com/">jQuery: The Write Less, Do More JavaScript Library</a></h1>
.jquery的界面做的很棒,SEO也很棒。很显然图片的效果和Html是联系不起来的。上面的一小段html代码是欺骗搜索引擎用的,和显示根本不搭边。那么这里是如何让浏览器渲染出来的呢,大家都能猜到,是CSS,请看下面的一段CSS代码:
#jq-header h1 a{}{
text-indent:-9999em;
background: url(/images/logo_jquery3.png) no-repeat;
width: 116px;
height: 35px;
font-size:0;
display:block;
border: 0 !important;
border-bottom: 0;
}
关键的地方有三处:
1. text-indent设定了一个很大的负数值,这个的效果就把Html中的那段文字藏到了您的显示器的左边几百米的地方,用来欺骗搜索引擎的文字就从浏览器的界面上消失了。
2. 只有这样还是不够的,还需要让用户从浏览器中看到LOGO图片,在CSS中肯定就是background了,注意url()括号里面的内容可以用引号也可以不用,如果不用的话就可以省掉俩字符。-:)
3. 光有上面的两步还是不够的,我们还需要让用户的鼠标放到LOGO上时的表现像放到一个链接上,显示一个小手,由于A标签的真实文本已经被移动到浏览器左侧几百米的地方了,所以浏览器不认为背景图片的地方有链接;这时候就用到了下面的width,height,display的设定。
分析到此为止,细节有时候很重要。

aaklp 该用户已被删除
发表于 2012-5-4 14:32:46 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
发表于 2012-5-5 23:35:15 | 显示全部楼层
就为赚分嘛  
woshilkc 该用户已被删除
发表于 2012-5-6 01:19:32 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
liaohon520 该用户已被删除
发表于 2012-5-6 01:48:58 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
chenlyun1314 该用户已被删除
发表于 2012-5-7 07:51:23 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
发表于 2012-5-10 12:45:46 | 显示全部楼层
给我一个女人,我可以创造一个民族;给我一瓶酒,我可以带领他们征服全世界 。。。。。。。。。  
woshilkc 该用户已被删除
发表于 2012-5-10 14:11:52 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
发表于 2012-5-11 16:57:08 | 显示全部楼层
呵呵,等着就等着....  
发表于 2012-5-11 21:45:51 | 显示全部楼层
挺好啊  
您需要登录后才可以回帖 登录 | 中文注册

本版积分规则