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

2017-08-28 08:02:15
薛才杰
原创 199

所谓以图换字,即直接使用一张图片,没有文字。我们知道,蜘蛛爬取时是不会获取图片上的内容的,但是如果是添加上文字,即便使用一些字体,也可能达不到图片的显示效果。如何将用户体验与SEO优化相兼容呢,我们可以使用text-indent属性来操作。


这里我以蝉知建站系统 搭建的站点为例。通常我们做站点标题、logo都是这样的习惯,上传LOGO图片,添加超链接,做的好的知道加上alt标签说明:



<div id="siteLogo" data-ve="logo">
<a href="/index.html">
<img src="/data/upload/201309/fdfb6e9cb6103298f5497760962ebbf7.png" class="logo" alt="蝉知
企业门户系统 企业建站系统
 CMS
系统" title="蝉知企业门户系统 企业建站
系统 CMS系统">
</a>
</div>



为了更好的兼顾SEO优化,我们也可以使用text-indent属性来实现,更利于搜索引擎直接爬取。


<style type=”text/css” media=”screen”>
#siteLogo>a {
    min-height: 57px;
    width: 157px;
    display: block;
    text-indent: -1000px;
    background: url(/data/upload/201309/fdfb6e9cb6103298f5497760962ebbf7.png);
}
</style> 

<div id="siteLogo" data-ve="logo">
<a href="/index.html">
企业建站,CMS建站系统
</a>
</div>


上面两种方法,从界面显示看是完全一样的。text-indent:-1000px;的意思是将文本内容移至屏幕1000像素之外,用户是看不到的,但其是存在的,这样既能让搜索引擎蜘蛛能爬取到,又不影响美观,一举两得。



本文和大家一起分享了对于网站标题LOGO,如何通过text-indent实现以图换字的效果。如果大家还有什么疑问或其他优化方法,欢迎一起分享交流,我们共同学习,共同进步。

更多技术文章,欢迎关注微信公众号


    发表评论
    评论通过审核后显示。