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