SEO技巧之用CSS隐藏网站名称文字链接仅显示LOGO
网站的LOGO是网站的灵魂，我们可以从谷歌和百度经常更新自己设计的独到的LOGO可以看到。但我们大多数站长来说，LOGO可能是不会经常换的，但问题是，众多搜索引擎对于图片的理解能力相对较差，而对链接或者说锚文本的认识却比较独到。那么就有了一个值得探讨的问题：
我们是否可以利用链接来替换图片呢？
或许，你认为不可能，但事实并非如此。利用DIV+CSS，我们可以轻松的实现这个预想。下面是具体实施方法：
1、通常我们调用图片使用如下代码：
< div id=”logo” >
< a href=”http://www.xiaojie.me/” >< img src=”/images/logo.jpg” alt=”小杰博客” / >< /a >
< /div >
这样写是正常的，但问题是百度等搜索引擎对于图片的理解能力有限，即便我们加上了alt标签，但百度还是很可能不认这个。为什么我们要将这么重要的位置让给一个图片呢？
2、使用图片替换文字技术后的代码是：
<div class=”logo_banner”>
<h1 class=”logo”><a href=”http://www.xiaojie.me/” title=”小杰博客”>小杰博客</a></h1>
<div class=”banner”>
3、CSS样式表代码是：
01 /* Logo Banner */
02
03 .logo_banner{ padding:0px 20px; width:920px; height:100px; overflow:hidden;}
04
05 .logo{ float:left; margin:20px 0px; text-indent:-1000px; }
06
07 .logo a:link, .logo a:visited, .logo a:hover{ width:328px; height:60px; background:url(images/logo.jpg) no-repeat left top; display:block;}
08
09 .banner{ float:right; margin:20px 0px;overflow:hidden;}
10
11 .banner img{ width:468px; height:60px; display:block;}
02
03 .logo_banner{ padding:0px 20px; width:920px; height:100px; overflow:hidden;}
04
05 .logo{ float:left; margin:20px 0px; text-indent:-1000px; }
06
07 .logo a:link, .logo a:visited, .logo a:hover{ width:328px; height:60px; background:url(images/logo.jpg) no-repeat left top; display:block;}
08
09 .banner{ float:right; margin:20px 0px;overflow:hidden;}
10
11 .banner img{ width:468px; height:60px; display:block;}
通过这个CSS定义隐藏样式后，你在网页中看到的只是一个LOGO图片链接，没有“小杰博客”我的博客名称的文字，要是不信，你就亲自试试吧。
那么这么做的意义何在呢？意义在于，用户看到的是个LOGO图片链接，而搜索引擎的蜘蛛看到的是个文字链接，优化意义也在于此。
4、下面说一下利用div+css实现隐藏网站名称文字链接仅显示LOGO这个效果的原理：
- text-indent:-10000px; 这段代码是说，文本缩进负一万像素，也就是说，跑到十万八千里之外了。因此，文字会看不见的。
- background:url(/image/logo.gif) no-repeat;这段代码是使用背景图片，也就是我们设计的LOGO。如果说前面的是隐藏，这里就是替换，那么综合来说，这就是“图像替换文本”的一个小小的CSS技巧。
下一篇: 我的新站-阳信鸭梨推广网
赞助商广告
| 由
2010/12/15 00:02:49
你好 看了你的博客受益颇多
也感谢你回答我的百度知道
这个代码我简单修改下域名什么的 就能直接复制到我的 样式css 里面用吗？？
能帮我写个不
2010/12/15 07:49:36
加我QQ吧，帮你解决
2010/08/31 20:24:28
你的网站的模板很酷啊。
我是 海洋耕耘者 http://hygyz.com/
2010/08/31 20:56:39
谢谢，呵呵。。。你的也不错啊
2010/08/27 16:32:34
好多，慢慢学
2010/08/26 15:44:48
杰哥这个皮肤不错啊，
2010/08/26 16:11:15
谢谢了，呵呵。。。你的也很不错哦
2010/08/26 14:47:26
测试邮件回复
2010/08/26 09:38:58
博客很精美，访问速度也很快！
2010/08/26 12:45:04
谢谢您的评价，欢迎常来
2010/08/25 20:45:54
分析的不错。
2010/08/25 18:15:08
好办法