前端开发之logo的seo优化
- logo里面首先放一个
h1
标签,目的是为了提权,告诉搜索引擎,这个地方很重要 h1
里面再放一个链接,可以返回首页,把logo的背景图片给链接即可- 为了搜索引擎收录我们,我们链接里面要放文字(网站名称),但是文字不要显示出来
- 方法1:text-indent 移到盒子外面(
text-indent:-999px
),然后overflow:hidden
,淘宝的做法 - 方法2:直接给
font-size:0;
;就看不到文字了;京东的做法
- 方法1:text-indent 移到盒子外面(
- 最后给链接一个title属性,这样鼠标放到logo上就可以看到提示文字了。 html:
<!-- logo 模块 -->
<div class="logo">
<h1><a href="index.html" title="品优购商城">品优购商城</a></h1>
</div>
<!-- logo 模块 -->
css:
a {
display: block;
width: 171px;
height: 61px;
background: url(../images/logo.png) no-repeat;
// 京东的做法
font-size: 0;
// 淘宝的做法
// text-indent: -999px;
// overflow: hidden;
}