css案例_logo的SEO优化

css案例_logo的SEO优化

1、logo里面首先放一个h1标签,目的是为了提权,告诉搜索引擎,这个地方很重要。

2、h1里面再放一个链接,可以返回首页的,把logo的背景图片给链接即可。

3、为了搜索引擎收录我们,我们链接里面要放文字(网站名称),但是文字不要显示出来。

●方法1:利用 text-indent 移到盒子外面( text-indent: -9999px),然后overflow:hidden,淘宝的做法。
●方法2∶直接给 font-size:0; 就看不到文字了,京东的做法。

4、最后给链接一个title属性,这样鼠标放到 logo 上就可以看到提示文字了。

html部分:

<section class="shortcut container">
 <!-- 左侧部分 -->
  <div class="fl">
	  <div class="logo">
		    <h1>
		    	<a href="index.html" title="京东官网">京东</a>
		    </h1>
	   </div>
  </div>
  <!-- 右侧部分 -->
  <div class="fr"></div>
 </section>

css部分:

.logo {
	background-image: url(../images/logo.png);
	/* 京东做法 二选一*/
	/* font-size: 0; */
	/* 淘宝做法 */
	text-indent: -9999px;
	overflow: hidden;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值