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;
}