品优购案例中SEO 搜索引擎优化以及部分注意事项

最新推荐文章于 2024-05-29 19:01:50 发布

热身就犯困

最新推荐文章于 2024-05-29 19:01:50 发布

阅读量36

点赞数

文章标签：搜索引擎 css html

本文链接：https://blog.csdn.net/m0_73805336/article/details/130449099

版权

SEO 搜索引擎优化

利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式

目的是对网页进行深度的优化，帮助网页获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站知名度。

页面必须有三个标签用来符合SEO优化

TDK： title description网站说明 keyword关键字

7.1title网站标签

具有不可替代性，内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断

建议：网站名（产品名）-网站的介绍（尽量不超过30字）

7.2description网站说明

说明网站主要是做什么的

7.3keywords关键字

是页面关键字，是搜索引擎的关注点之一

最好限制为6~8个关键字，用英文逗号隔开。

 <!-- 网站标签 -->
    <title>品优购商城-正品低价、品质保障、配送及时、轻松购物！
    </title>
    <!-- 网站说明 -->
    <meta name="description" content="品优购商城-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
    <!-- 关键字 -->
    <meta name="keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜">

一般只需要准备好三个标签

7.4loge优化

（1）loge里面放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要

（2）h1里面再放一个链接，可以返回首页的，把loge的背景图片给链接即可

（3）为了搜索引擎收录我们，我们链接里面要放文字（网页名称）但是文字不要显示

方法一：text-indent移到盒子外面（text-indext：-9999px）,然后overflow:hidden

方法二：直接给font-size:0;

（4）最后给链接一个title属性，这样鼠标放到loge上就可以看到提示文字。

<div class="loge">
            <h1>
                <a href="品优购.html" title="品优购商城">品优购商城</a>
            </h1>
        </div>

/* 头部制作 */
.header {
    position: relative;
    height: 105px;
    /* background-color: #9c71cc; */
}
.loge {
    position: absolute;
    top: 25px;
    width: 171px;
    height: 61px;
    background-color: aqua;
}
.loge a {
    display: block;
    width: 171px;
    height: 61px;
    background: url(images/loge.png) no-repeat;
    /* font-size: 0;  京东做法 */
    /* 淘宝做法 */
    text-indent: -9999px;
    overflow: hidden;
}

品优购购物车模块物品件数：

（1）count统计部分用绝对定位做

（2）count统计部份不要给宽度，买的东西可能比较多，让件数撑开就好，给高度

（3）左下角不是圆角，其余三个是圆角

  <!-- 购物车模块 -->
        <div class="shopcar">我的购物车
            <i class="count">1</i>
        </div>

.shopcar {
    position: absolute;
    right: 60px;
    top: 25px;
    width: 140px;
    height: 35px;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
    line-height: 35px;
    text-align: center;
}
.shopcar::before {
    font-family: 'icomoon';
    content:'';
    margin-right: 5px;
    color: #b1191a;
}
.shopcar::after {
    font-family: 'icomoon';
    content:'';
    margin-left: 10px;
}
.shopcar .count {
    position: absolute;
    top: -5px;
    /* 尽量采用左对齐，右对齐当数字增大，可能会使盒子向左走 */
    left: 105px;
    height: 14px;
    line-height: 14px;
    color:#f1e8e8;
    background-color: #e60012;
    padding: 0 5px;
    border-radius: 7px 7px 7px 0;
}