网站中logo搜索引擎优化做法

最新推荐文章于 2024-05-21 12:27:17 发布

BugMaker2002

最新推荐文章于 2024-05-21 12:27:17 发布

阅读量207

点赞数

分类专栏： CSS html5 标签文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_57317650/article/details/126240841

版权

html5 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

标签

6 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

在我们设计网站时，对logo的处理有很多方法，这里介绍一种我学到的可以优化搜索引擎的做法。要将如图所示的logo放到我们的盒子模型当中，在企业中都是先将其放到一个div标签当中，

然后为了凸显其重要性，我们再用一个h1标签对其进行包裹，又因为网站当中的logo一般都是可以点击跳转的，因此我们此处再用了一个a标签进行包裹，需要注意的是，我们在a标签当中设置了内容，这正是为了优化搜索引擎的一种做法，但为了不将该内容显示出来（为了美化），我们将字体大小设置为0。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>Document</title>
    <style> 
        a{
            text-decoration: none;
            color: #333;
        }

        ul,
        ol{
          list-style: none;
        }

        *{
            margin: 0;
            padding: 0;
        }

        .logo{
            float: left;
            width: 289px;
            height: 214px;
            background-color: pink;
        }

        .logo h1{
            width: 289px;
            height: 214px;
        }

        .logo h1 a{
            width: 289px;
            height: 214px;
            background-image: url(京东.jpeg);
            background-size: cover;
            display: block;
            font-size: 0;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="logo">
        <!-- 在实际企业中，为了放logo都是用h1标签包裹着a标签 -->
        <h1>
            <a href="">京东官网</a>
        </h1>
    </div>
</body>
</html>