1.logo制作

LOGO SEO 优化

1. logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
2. h1 里面再放一个 链接 , 可以返回首页的，把 logo 的背景图片给链接即可。
3. 为了搜索引擎收录我们，我们链接里面要放 文字（网站名称），但是文字不要显示出来。

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

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

index.html

  <!-- 头部header start -->
  <header class="header w">
    <div class="logo">
      <h1>
        <a href="index.html">品优购商城</a>
      </h1>
    </div>
  </header>
  <!-- 头部header end -->

common.css

/* 头部header制作 start */
.header {
  position: relative;
  height: 106px;
  background-color: blue;
}

/* 头部logo */
.logo {
  position: absolute;
  top: 25px;
  width: 171px;
  height: 61px;
}

.logo a {
  display: block;
  width: 171px;
  height: 61px;
  background: url(../images/logo.png) no-repeat;
}

/* 头部header制作 end */

效果图

让 a 里面的文字不显示出来 & 添加title

index.html

  <!-- 头部header start -->
  <header class="header w">
    <div class="logo">
      <h1>
        <a href="index.html" title="品优购商城">品优购商城</a>
      </h1>
    </div>
  </header>
  <!-- 头部header end -->

common.css

.logo a {
  display: block;
  width: 171px;
  height: 61px;
  background: url(../images/logo.png) no-repeat;
  /* 京东做法 */
  /* font-size: 0; */
  /* 淘宝做法 */
  text-indent: -9999px;
  overflow: hidden;
}

两种做法都可以用，自己喜欢那种用哪种。

效果图