整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

怎样把网站权重优化到5以上

怎样把网站权重优化到5以上

站优化种类繁多,有的是针对主词进行优化,有的针对整站进行优化,还有的专注长尾关键词优化。往细的说还有针对单页(文章)进行优化、针对目录或二级域名进行优化、或针对聚合页面进行优化。哪种优化方式更适合你?如何在最短的时间内快速提升网站权重?现在有我为大家分享一下“如何快速把网站权重优化到5以上”的实操

注意:网站运行环境和站内基础是seo优化的根基,我们这次不介绍站内基础,只说思想和方法:

如何选择优化方式?

一定要了解自己网站的现状,有排名的关键词数量,关键词排名状况及网站的基础属于什么阶段的。还要知道展示类型网站和交互网站seo方式也不一样。优化策略有所不同。展示类型网站内容少,优化的关键词也少,所以重点放在固定内容+动态更新的合理性上(关键词匹配相关内容)。交互网站属于功能类型,90%的内容是用户自发上传,内容相关性相对较弱。同样也有商城类型的属于管理员发布,但评论和交易记录是自动的。一般而言:交互型网站都采用整站优化,重点是链接,如内链导入、内容聚合和收录及时性为主。接下来我们就来说一说交互类型网站如何将权重优化到5以上的过程。

交互型网站优化策略

我们先看一看网站收录状况:根域名收录没有数据,如下图:

网站收录状态


我们再看看主域名www的收录状况,收录12030个网页,但看收录还是不错的,但是该网站的数据量大概在20万级别左右,如果仅收录5%肯定是存在某些问题的。如下图:

主域名收录状态


经过对网站整体分析发现:该网站首页前两屏信息量非常大,但是这些信息又是固定轻易不变的。优化师经常会遇到,网站优化和客户实际要求是有冲突的,那么就要考验优化师的技巧了。我们的做法是原有的内容不变,增加table选项卡,只有当鼠标触发选项卡时内容才会显示,这样既满足了用户,又满足了搜索引擎。经过站内调整,网站收录2个月内发生了翻天覆地的变化:收录量增加了10倍以上。如下图:

网站收录状况

该网站拥有20人的编辑团队,网站更新数量每天300篇以上,但是调用的文章信息都放到了后几屏。由于网站信息量过大,搜索引擎抓取时未必就能从头到尾去遍历所有的URL地址列表。有可能因为环境、代码冗余多、或者编码不规范导致搜索引擎蜘蛛只抓取第一屏,或第二屏。假如真是这样,后几屏的信息就失去了收录机会。

权重优化


网站除了结构层次及代码的改变外,我们针对每一屏内容,每一组数据列表,每一个标签都做了调整,我简单罗列一些基础调整:

1、h1-h6的用法

A、网站左上角的logo用<h1>进行强调修饰。文章标题用<h1>修饰;

B、服务主题用<h2>修饰,一般:一屏一个主题,该屏幕内的区块主题用<h3> 具体内容用<p>,如果内容有需要强调修饰的,一般用<b> 或者 <strong>进行修饰。辅助:根据视觉可自行加上颜色修饰。

总结

<h1>代表最重要的,<h6>代表相对最不重要的,因此,根据这个递减,适当结合关键词。<h1>中使用的关键词,往往是在网页标题中使用的。<h1>尽量靠近在html 中的<body>标签,越近越好,以便让搜索引擎最快。

2、常用标签

A、Title:长标题链接说明

例如:动态调用的文章或案例,由于字数限制,无法完整显示标题,此时可以用title进行完整标题调用。

例如:网站导航,当使用服务简称作为栏目时,可用title进行说明

B、nofollow

A链接里有一个标签“nofollow” 一般是<a rel="nofollow" 这个标签也是常用标签。例如你链接的是一个单链接,因为不得不链接,所以超链接A要用一个rel="nofollow"。

C、图片alt标签

用于图片的说明。给百度蜘蛛提醒 这个图片内容是啥。

例如:动态调用的文章或案例,由于字数限制,无法完整显示标题,此时可以用title进行完整标题调用。

3、网站Logo

logo超链接用完整链接,如:<a href="http://www.soudao.com/"

如果网站logo是图片,则图片增加alt=“网站名称或广告语”

如果网站logo是背景,则链接a增加title=“网站名称或广告语”

注意:logo链接打开形式是当前窗口,默认即可。

4、网站导航

网站导航链接是否用title,取决于实际需求。如果导航写不完整,可以用链接a的title进行填充。

注意:如果导航链接的聚合页是一个模板,如:不同的数据列表,只是换了调用的内容,而没有换网页模板,链接用:当前打开方式

如果导航链接的是新模板,链接用:新打开方式:target="_blank"

5、数据列表

一般数文章、案例等数据列表用li即可,样式、间距等在css里修饰,让网站代码尽可能的简练。

如果是图文并茂一般,标题用<h3>或<h4>,段落内容<p>或者<span>

图片往往是动态调用的,可将图片alt调用关键词或副标题。如果数据标题不完整,可用链接a增加title调用完整标题。

6、More、更多、详情

大部分网站都有More\查看详情\更多\图标等,这种链接尽可能的用上title=“当前名称” 因为这种更多太频繁了,文字就是去意义了。

如:栏目是“seo优化”,title=“更多seo优化”

用图标的:加图片alt=“当前名称”和链接a的title=“当前名称”

注意:链接打开形式为新打开:<a target="_blank"

除了内部调整,我们页做了目录优化、确立了文章发布规则、快照内容扩充、聚合页面、内链的合理使用及外链的引导。

网站优化前-权重:

网站权重状况


网站优化后-权重:

权重状况

关键词排名状况

序列表

经过之前关于表格、表单的学习后,再来学习列表,就显得非常的简单和容易理解了。

学习是构建知识体系的过程,没有形成体系的知识学习再多也是碎片,是很难形成技能或深刻理解的,因此,如果您是零基础的初学者,第一次看我的教程,如果时间允许的话,请务必从目录中找寻第一篇,循序渐进的学习。

列表分为有序列表、无序列表和定义列表,同时列表之中还能嵌套列表,和表格非常相似。

首先介绍有序列表

要用<ol></ol>标签告诉浏览器这里是列表。

然后在里面添加<li></li>标签,在这个标签中添加内容即可。

示例代码如下

<p>我喜欢的水果</p>
<ol>
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ol>

大家可以把它放到一个新的html框架中看看效果。

完整代码如下:

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>列表</title>
  </head> 
  <body>
  <h>有序列表</h>
  <p>我喜欢的水果</p>
  <ol> 
    <li>葡萄</li> 
    <li>西瓜</li> 
    <li>苹果</li> 
    <li>桃子</li>
    </ol>
  </body> 
  </html>

页面效果如下:

通过修改<ol>标签中的type属性我们可以改变序号显示的样式,默认的是数字,大家看一下不同的type值的不同效果吧!示例代码如下:

<ol type="A">
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ol>
<ol type="a"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
  、</ol><ol type="I"> <li>葡萄</li> <li>西瓜</li> <li>苹果</li> <li>桃子</li></ol>

页面效果如下:

下面给大家介绍一下搜狗输入法中如何输入罗马数字。

step1.点击"输入方式"

step2.点击"特殊符号"后选择数字序号,找到罗马数字即可

除此之外我们还可以使用CSS的方法为有序列表的序号提供更多样式。在<ol>标签中修改style属性可以直接调用这些css中的属性。写法是style="list-style-type:属性值;"

示例代码如下:(使用日语中的片假名表示序号)

<ol style="list-style-type:hiragana;"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ol>

页面效果如图所示:

是不是很有趣,这里的测试就不一一做了。为大家奉上list-style-type的值的列表与说明,大家自己课下去尝试,这个列表中既有有序列表的值也有无序列表的值。

如图:

资料来自w3school

无序列表

无序列表与有序列表的区别在于最外层的标签,它的写法是这样的:<ul></ul>。

有一个记忆的小技巧,有序的英文是order,故有序列表为order list(列表),缩写为ol。

无序为unorder,无序列表为unorder list,缩写为ul。

无序列表<ul>标签的type属性用来控制列表前的标记显示演示。

示例代码如下:

<h>无序列表</h>
<p>我喜欢的水果</p>
<ul> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ul>
<ul type="disc"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ul>
<ul type="circle"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ul>
<ul type="square"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ul>

页面效果如下:

通过图片我们可知,无序列表默认的列表标识就是type="disc"。

style属性的话大家自己试试吧,这里就不啰嗦了。

定义列表

这个列表比较特殊,也比较不常见,主要就是显示名词定义的。

首先要写入<dl></dl>标签。这是告诉浏览器这里是个定义列表,和<ol>或<ul>一样。

定义的英文是definition,定义列表就是definition list,缩写是dl。

下面在<dl></dl>标签中间写入定义的名称<dt></dt>,即definition title(标题)。

与定义名称标签并列的是定义描述<dd></dd>,即definition describe(描述)。

示例代码如下:

<dl> 
  <dt>计算机</dt> 
  <dd>用来计算的仪器 ... ...</dd> 
  <dt>显示器</dt> 
  <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

页面效果如下:

今天的内容结束了!

列表嵌套列表的测试大家自己试试吧,学到现在,相信你们都可以完成了!

如果您喜欢我的教程请关注我,点赞也能让我充满动力!

如果您有任何疑问请给我留言,如有问题或错误请予以斧正!

HTML完整学习目录

HTML序章(学习目的、对象、基本概念)——零基础自学网页制作

HTML是什么?——零基础自学网页制作

第一个HTML页面如何写?——零基础自学网页制作

HTML页面中head标签有啥用?——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2(路径详解)——零基础自学网页制作

使用HTML添加表格1(基本元素)——零基础自学网页制作

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

使用HTML添加表格3(间距与颜色)——零基础自学网页制作

使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作

HTML表单4(form的action、method属性)——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

*CSS基础-06-元素大小(设置元素尺寸height/width、最大值max-height max-width、最小值min-height min-width、设置行间距 line-height)**

在Web前端开发中,对元素大小的精确控制是构建美观且布局合理的网页界面的关键。CSS提供了丰富的属性来帮助我们实现这一目标,包括设置元素的宽高(`height`/`width`)、定义最大与最小尺寸(`max-height`/`max-width`和`min-height`/`min-width`),以及调整文本行间距(`line-height`)。本文将深入探讨这些属性的用法、应用场景及示例代码,助您掌握元素大小调整的核心技巧。

**一、设置元素尺寸:height与width**

**1.1 定义元素高度(height)**

**定义方式:**

```css

element {

height: value;

}

```

其中,`element`代表目标元素的选择器,`value`可以是以下几种类型:

- **绝对单位**:如像素(`px`)、厘米(`cm`)、毫米(`mm`)、英寸(`in`)、点(`pt`)等。

- **相对单位**:如百分比(`%`)、视口宽度(`vw`)、视口高度(`vh`)、字体大小(`em`)等。

- **关键字**:如`auto`(默认值,由内容决定高度)、`initial`(恢复初始值)、`inherit`(继承父元素的值)。

**示例代码:**

```html

<div class="box">

<p>这是一个高度为200px的盒子。</p>

</div>

<style>

.box {

background-color: #f8f9fa;

height: 200px; /* 设置固定高度 */

width: 300px; /* 设置固定宽度,便于观察效果 */

}

</style>

```

**1.2 定义元素宽度(width)**

**定义方式:**

```css

element {

width: value;

}

```

`width`属性的值同样支持绝对单位、相对单位及关键字,其使用方法和`height`相同。

**示例代码:**

```html

<div class="content">

<p>这是一个宽度为80%的自适应容器。</p>

</div>

<style>

.content {

background-color: #f8f9fa;

width: 80%; /* 设置宽度为父元素的80% */

margin: 0 auto; /* 居中显示 */

}

</style>

```

**二、设定元素最大/最小尺寸:max-height/max-width与min-height/min-width**

**2.1 最大高度/宽度(max-height/max-width)**

**定义方式:**

```css

element {

max-height: value;

max-width: value;

}

```

这两个属性用于限制元素的最大尺寸,当元素的实际尺寸超过设定值时,会自动调整到指定的最大值。值的类型与`height`和`width`相同。

**示例代码:**

```html

<div class="image-container">

<img src="large-image.jpg" alt="Large Image">

</div>

<style>

.image-container {

max-width: 100%; /* 图片最大宽度不超过父元素宽度 */

max-height: 500px; /* 图片最大高度不超过500px */

overflow: hidden; /* 隐藏超出部分 */

}

</style>

```

**2.2 最小高度/宽度(min-height/min-width)**

**定义方式:**

```css

element {

min-height: value;

min-width: value;

}

```

`min-height`和`min-width`用于确保元素的最小尺寸,当元素的实际尺寸小于设定值时,会强制扩展到指定的最小值。值的类型与`height`和`width`相同。

**示例代码:**

```html

<div class="sidebar">

<ul>

<li><a href="#">Link 1</a></li>

<li><a href="#">Link 2</a></li>

<!-- 更多链接 -->

</ul>

</div>

<style>

.sidebar {

background-color: #f8f9fa;

min-width: 200px; /* 侧边栏最小宽度为200px */

}

</style>

```

**三、设置行间距:line-height**

**3.1 定义行间距(line-height)**

**定义方式:**

```css

element {

line-height: value;

}

```

`line-height`属性用于设置元素内文本行之间的垂直间距。值的类型包括:

- **数值**:如`1.5`、`2`等,表示相对于当前字体大小的倍数。

- **绝对单位**:如像素(`px`)、厘米(`cm`)等。

- **百分比**:相对于元素本身的字体大小。

- **关键字**:如`normal`(默认值,浏览器默认行间距)、`initial`、`inherit`。

**示例代码:**

```html

<p class="loose-text">这是一段行间距为1.5倍的文本。</p>

<style>

.loose-text {

font-size: 16px;

line-height: 1.5; /* 设置行间距为字体大小的1.5倍 */

}

</style>

```

**四、实战应用与注意事项**

**4.1 响应式设计**

结合`max-height`/`max-width`、`min-height`/`min-width`与媒体查询(`@media`),可以轻松实现响应式布局,确保元素在不同屏幕尺寸下保持合适的大小。

**示例代码:**

```css

@media (max-width: 768px) {

.content {

width: 100%; /* 小于768px时,宽度占满屏幕 */

}

}

@media (min-width: 768px) and (max-width: 1200px) {

.content {

width: 75%; /* 768px至1200px之间,宽度为75% */

}

}

@media (min-width: 1200px) {

.content {

width: 50%; /* 大于1200px时,宽度为50% */

}

}

```

**4.2 注意事项**

- **`height`与`width`设置为`auto`时,元素的尺寸通常由其内容决定。对于块级元素,宽度默认为`auto`,高度则受内部内容影响;对于内联元素,宽度和高度均受内容影响。**

- **使用百分比单位时,`height`的百分比基于包含块的高度,而`width`的百分比基于包含块的宽度。**

- **在设置`min-height`时,确保包含块(父元素)具有足够的高度或自身元素具有足够的内容,否则可能无法达到预期效果。**

- **使用`line-height`时,注意与其他文本相关的属性(如`font-size`、`vertical-align`等)的配合,以保持良好的排版效果。**

通过熟练掌握上述CSS属性,您将能精准地控制网页中元素的大小,实现复杂多样的布局效果。不断实践并结合实际项目需求,您的前端开发技能将更上一层楼。