1. First put an h1 tag in the logo, the purpose is to raise the right to tell search engines that this place is very important
2. Put a link in h1, you can put it back on the homepage, just give the background image of the logo to the link.
3. In order for search engines to include us, we must put text (website name) in our link, but do not display the text.
Method 1: Move text-index outside the box (text-index: -9999px), then overflow: hidden, Taobao’s approach
Method 2: Give font-size:0; directly, you won’t see the text, Jingdong’s approach
4. Finally, give the link a title attribute, so that you can see the prompt text when you mouse over the logo.
E.g:
<style>
/* header 头部制作 */
.header {
position: relative;
height: 105px;
}
.logo {
position: absolute;
top: 25px;
width: 171px;
height: 61px;
}
.logo a {
display: block;
width: 171px;
height: 61px;
background: url(../images/logo.png) no-repeat;
/* font-size: 0;京东的做法*/
/* 淘宝的做法让文字隐藏 */
text-indent: -9999px;
overflow: hidden;
}
</style>
<header class="header w">
<div class="logo">
<h1>
<a href="index.html" title="品优购商城">品优购商城</a>
</h1>
</div>
</header>