利用text-indent实现“以图换字”优化效果

2015-08-13 11:19:00
admin
原创
2068

以网站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像素之外,用户是看不到的,但其是存在的,这样蜘蛛能爬取到,又不影响显示美观,一举两得。

版权声明

版权声明:本站原创文章,转载请注明作者和出处。

本站点采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议  

发表评论
评论通过审核后显示。
关注【程序员专区】

扫一扫,分享更多技术干货

热门文章
近期留言

电脑没声音的求助者2019-11-12

这个回答得对,我也是通过你的方法操作,然后电脑就有声音了,高手高手啊

环氧地坪施工2019-10-23

了解了,哈哈哈,谢谢

安贝乐育婴网2019-10-12

讲得很清晰呢

repostone2019-10-10

博主怎么想到要关一个output呢。https://repostone.home.blog/

noOne2019-09-24

遇到同样的问题了……T.T 纠结了好久。。。