利用text-indent实现“以图换字”优化效果
- 2015-08-13 11:19:00
- admin 原创
- 5356
以网站LOGO为例,之前我们可能是这样做的:
<div id=”logo”> <a href=”#”><img src=”logo.png”/></a> </div>
即直接使用一张图片,没有文字,我们知道,蜘蛛爬取时是不会获取图片上的内容的,但是如果是添加上文字,即便使用一些字体,也可能达不到图片的显示效果。如果将用户体验与SEO优化相兼容呢,我们可以使用text-indent属性来操作:
<style type=”text/css” media=”screen”> #logo a{ display:block; width:190px; height:60px; background:url(‘./logo.png’); text-indent:-1000px; } </style> <div id=”logo”> <a href=”#”>优美互联</a> </div>
上面的两种操作方法显示效果完全一样。
说明:text-indent:-1000px;的意思是将文本内容移至屏幕1000像素之外,用户是看不到的,但其是存在的,这样蜘蛛能爬取到,又不影响显示美观,一举两得。
版权声明
版权声明:本站原创文章,转载请注明作者和出处。
标签云集
云禅道