我们今天着重来说一下网站网页的SEO优化,SEO优化可以对网络端进行深度优化,使我们的网站获得免费流量,在众多网站中脱颖而出
目录
一.项目创建格式规范
我们这里简单说一下文件夹的创建,这也是有一定规范的:
首先,你需要创建一个项目文件夹,名字根据情况定义
其次,样式类图片文件夹(images),样式文件夹(css),产品类图片文件夹(upload)
字体类文件夹(fonts),脚本文件夹(js),首页单独放在外面(index.html),css初始化样式文件夹(base.css),css公共样式文件(common.css),一般就是这些,如果有特殊情况,也可进行添加
二.favicon图标
favicon图标是什么?我们来看一张图来了解一下:
这个小图标就是facicon图标,我们平常登录的网站都会将它的LOGO图作为网页网站的favicon图标
这段我们说一下图标的制作以及使用:
分为四个步骤:
1.将我们的图标(png为佳)切为小图
2.将切好的png图标放到图片转换网站上转换为ico图标(这里我推荐一个免费的网站 => 比特虫【http://www.bitbug.net/】)
3.将ico图片放置根目录下
4.通过<link>标签引入ico图片(这里我们代码演示一下)
<link rel="shortcut icon" href="favicon.ico" type="image/c-icon"/>
需要注意:你的ico图片路径可能和我的不一样,所以应该在将文件的路径改为自己的
三.SEO优化
终于到了我们今天的重点了,在前言我也讲述过SEO的用处,接下来我们直接开始实践:
1.首先我们讲一下TDK三大标签的SEO优化
T指的是title标签:
title标签使网站的名字、网站的介绍(建议不要超过三十个字)
title标签给<a>标签元素对里面的链接文字强调说明,鼠标悬停之上,会出现提示,这样的做法也会增加网站关键词的密度
D指description:
description是网端说明,写在<meta>标签中(建议100字左右,不宜过长)
<meta name="description" content="XXXXX,XXXXXX,XX"/>
K指keyword:
keyword是关键字,同样写在<meta>标签中,现在一般都是自动抓取,所以不太在意(建议4.5个关键词即可)
我们在代码中演示一下:
<meta name="keyword" content="XXX,XXX,XXX"/>
TDK我们讲述完毕之后就是一些标签的SEO优化:
H标签:
H1标签一般出现在页面LOGO,或者单个文章的主标题部分。一个页面最好能控制在2个之内切不可过多。
H2标签一般会用在网站栏目或者小标题标题部分。
H3标签一般用在侧栏小标题子标题部分。
alt图片描述标签:
因为图片不具有SEO属性,所以alt越显重要,alt主要是图片描述说明只用,用可以增加关键词密度,但切记不可过多频繁。
接下来我们再讲一个SEO优化的重点:LOGO优化
LOGO该怎么优化呢?分为4步:
1.logo里放h1标签用来提高权重
2.h1里放链接
3.链接里放文字(网站名称),不要显示出来
4.链接添加title属性,使鼠标放到logo上显示文字
我们利用代码实现一下:
<div class="logo">
<h1>
<a href="..." title="网站名称">网站名称</a>
</h1>
</div>
这样就可以了,那问题来了,这些都可以实现,那么字体怎么才能让他不显示出来呢?
我给大家提供俩种方法:
1.text-index:-9999px;直接将其移动到盒子外,然后给到overflow:hidden;
2.将字体大小设为0:font-size:0;
感谢观看,学习前端,关注小蜗