所谓以图换字,即直接使用一张图片或背景,没有文字。我们知道,蜘蛛爬取时是不会获取图片上的内容的,但是如果是添加上文字,即便使用一些字体,也可能达不到图片的显示效果。如何将用户体验与SEO优化相兼容呢,我们可以使用text-indent属性来操作。如下:
.visib-hid {
text-indent: -9999;
width: 0;
height: 0;
font-size: 0;
visibility: hidden;
}
<div class="cq-head-logo">
<h1>
<span class="visib-hid">橙子</span>
<a href="#">
<img src="img/logo-rev.png" width="92" height="36" alt="logo">
</a>
</h1>
</div>