项目搭建规范以及SEO优化

我们今天着重来说一下网站网页的SEO优化，SEO优化可以对网络端进行深度优化，使我们的网站获得免费流量，在众多网站中脱颖而出

目录

一.项目创建格式规范

二.favicon图标

 三.SEO优化

T指的是title标签：

D指description：

 K指keyword：

H标签：

alt图片描述标签：

接下来我们再讲一个SEO优化的重点：LOGO优化

---

一.项目创建格式规范

我们这里简单说一下文件夹的创建，这也是有一定规范的：

首先，你需要创建一个项目文件夹，名字根据情况定义

其次，样式类图片文件夹（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;

感谢观看，学习前端，关注小蜗