当前位置 : CSS关于SEO优化的细节
发布时间：2021-08-25 10:41 浏览次数：次
对于任何一个网站来说名字是SEO的首选，而H1标签是搜索引擎认为页面上最重要的文字部门，所以我们要把网站的名字放在H1中；问题是代表网站名字的通常是一个LOGO图片，而图片对于SEO来说是不友好的。请看下面jquery的首页的logo部分的图片和代码。
< div id ="jq-header" >
< h1 >< a href ="http://jquery.com/" > jQuery: The Write Less, Do More JavaScript Library </ a ></ h1 >
.
jquery的界面做的很棒，SEO也很棒。很显然图片的效果和Html是联系不起来的。上面的一小段html代码是欺骗搜索引擎用的，和显示根本不搭边。那么这里是如何让浏览器渲染出来的呢，大家都能猜到，是CSS，请看下面的一段CSS代码：
#jq-header h1 a {} {
text-indent:-9999em;
background: url(../images/logo_jquery3.png) no-repeat;
width: 116px;
height: 35px;
font-size:0;
display:block;
border: 0 !important;
border-bottom: 0;
}
关键的地方有三处：
1. text-indent设定了一个很大的负数值，这个的效果就把Html中的那段文字藏到了您的显示器的左边几百米的地方，用来欺骗搜索引擎的文字就从浏览器的界面上消失了。
2. 只有这样还是不够的，还需要让用户从浏览器中看到LOGO图片，在CSS中肯定就是background了，注意url()括号里面的内容可以用引号也可以不用，如果不用的话就可以省掉俩字符.-:)
3. 光有上面的两步还是不够的，我们还需要让用户的鼠标放到LOGO上时的表现像放到一个链接上，显示一个小手，由于A标签的真实文本已经被移动到浏览器左侧几百米的地方了，所以浏览器不认为背景图片的地方有链接；这时候就用到了下面的width，height，display的设定。
< div id ="jq-header" > < h1 >< a href ="http://jquery.com/" > jQuery: The Write Less, Do More JavaScript Library </ a ></ h1 >. #jq-header h1 a {} { text-indent:-9999em; background: url(../images/logo_jquery3.png) no-repeat; width: 116px; height: 35px; font-size:0; display:block; border: 0 !important; border-bottom: 0;}1. text-indent设定了一个很大的负数值，这个的效果就把Html中的那段文字藏到了您的显示器的左边几百米的地方，用来欺骗搜索引擎的文字就从浏览器的界面上消失了。
2. 只有这样还是不够的，还需要让用户从浏览器中看到LOGO图片，在CSS中肯定就是background了，注意url()括号里面的内容可以用引号也可以不用，如果不用的话就可以省掉俩字符.-:)
3. 光有上面的两步还是不够的，我们还需要让用户的鼠标放到LOGO上时的表现像放到一个链接上，显示一个小手，由于A标签的真实文本已经被移动到浏览器左侧几百米的地方了，所以浏览器不认为背景图片的地方有链接；这时候就用到了下面的width，height，display的设定。
本文来源于网络，若有侵权请联系3449817223#qq.com，将在第一时间删除。
上一篇 
下一篇：
