站优化种类繁多,有的是针对主词进行优化,有的针对整站进行优化,还有的专注长尾关键词优化。往细的说还有针对单页(文章)进行优化、针对目录或二级域名进行优化、或针对聚合页面进行优化。哪种优化方式更适合你?如何在最短的时间内快速提升网站权重?现在有我为大家分享一下“如何快速把网站权重优化到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页面中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属性,您将能精准地控制网页中元素的大小,实现复杂多样的布局效果。不断实践并结合实际项目需求,您的前端开发技能将更上一层楼。
*请认真填写需求信息,我们会在24小时内与您取得联系。