前端如何做SEO

客官°小女子只卖身不卖艺 2022-12-12 01:59 231阅读 0赞

**目录**

结构

代码

利用缓存

SSR

如果项目是SPA应用，需配置SSR来实现SEO和首屏加载白屏优化，可以使用NUXT框架。这个下次再写，马克一下~

--------------------

> **1、对网站的标题、关键字、描述精心设置，反映网站的定位，让搜索引擎明白网站是做什么的；**
> 
>  2、网站内容优化：内容与关键字的对应，增加关键字的密度；
> 
>  3、在网站上合理设置Robot.txt文件；
> 
>  4、生成针对搜索引擎友好的网站地图；
> 
> ** 5、增加外部链接，到各个网站上宣传；**

#    结构 #

1. 扁平化的目录层次，尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。扁平化的目录结构，比如：“植物”–> “水果” –> “苹果”、“桔子”、“香蕉”，通过3级就能找到香蕉了。

2. 在每一个网页上应该**加上面包屑导航**，**优化网站分级结构。**在每个内页加面包屑导航是很有必要的，可以让蜘蛛进入页面之后不至于迷路。好处是从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作；对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。

3. 控制页面的大小，减少http请求，提高网站的加载速度。

4. 页面主体：右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。

5. 友情链接

# 代码 #

1.**语义化书写HTML代码，符合W3C标准。**不要什么都用div，尽量合理的使用ul、ol、table等使用符合语义化的标签，语义化代码让搜索引擎容易理解网页。

2. meta keywords，meta description，title

3. 关于a标签：

集中网站权重<a>标签的使用：**页内链接，要加“title” 属性加以说明，让访客和 “蜘蛛” 知道**。而**外部链接，链接到其他网站的，则需要加上rel="nofollow"属性, 告诉 “蜘蛛” 不要爬**，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。

由于蜘蛛分配到每个页面的权重是一定的，这些权重也将平均分配到每个a链接上，可以适当的给链接标签a添加 rel="nofollow" 属性(例如：当我们项目的某一个导航不需要蜘蛛跟踪链接)：

**　　内链采用绝对路径，减少服务器的响应时间，**比如：*<a href="www.taobao.com">淘宝网首页</a>*，不要采用*<a  href="/index.html"></a>。*

4. **正文标题要用<h1>标签：“蜘蛛” 认为它最重要**，主要是H1标签的使用需要特别注意，因为它自带权重，一个页面有且最多只能有一个H1标签，放在该页面最重要的标题上面。若不喜欢<h1>的默认样式可以通过CSS设置。尽量做到正文标题用<h1>标签，副标题用<h2>标签, 而其它地方不应该随便乱用 h 标题标签。

5. 关于图片，

**5.1 alt标签的作用：**

**　　**1）增强内容相关性：它是可以利用汉字介绍文章内容的，对于一些特定的企业产品，由于视觉的体验，它往往是少文字的。

2）提高关键词密度：在操作企业站的时候，我们经常遇到是站点首屏一个大的横幅banner，几乎占用了首页的大部分页面，为了有效的提高首页核心关键词密度，我们只能利用一切办法增添关键词，比如：在图片的alt标签中添加。

5.2 **为图片指定宽度与高度**

在页面中，请每一个图片，都指定一个width属性与height属性，这样在页面加载的时候，浏览器会预先留出既定的位置，图片下边的代码可以继续下载而不用等待，提高并行下载的速度，提高了页面加载的速度。

6. 标签

6.1 <strong>、<em>标签 : 需要强调时使用。**<strong>标签在搜索引擎中能够得到高度的重视，它能突出关键词**，表现重要的内容，<em>标签强调效果仅次于<strong>标签。

<b>、<i>标签: 只是用于显示效果时使用，在SEO中不会起任何效果。

6.2 巧妙利用CSS布局，将重要内容的HTML代码放在最前面，最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，保证重要内容一定会被抓取

6.3 重要内容不要用JS输出，因为“蜘蛛”不认识

6.4 谨慎使用display：none ：对于不想显示的文字内容，应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none其中的内容。

6.5 **做好404页面，500等页面。**一般会加首页链接及错误提示，并测试其返回状态码为404：1、用户体验友好，可以留住用户，不至于直接关闭页面；2、蜘蛛友好，可以返回抓取其他页面。

# 利用缓存 #

启用Keep-Alive属性。Keep-Alive你可以理解为长连接，在没有启用keep-alive属性之前，浏览器向服务器请求的connection是即连即断的，执行一次HTTP请求完成后，马上断开这个连接的，而启用Conncetion的Keep-Alive属性之后，这个连接可以保持一段时间，从而可以提高页面加载的速度。

使用浏览器缓存。可以使用缓存技术来提高页面的加载速度，为一些不经常变化的文件，设置一个相对较长的过期时间，这样当用户访问网站后，就会在它的浏览器中留下缓 存，当它在下次请求的时候，留在缓存中的组件就不用再向服务器发出HTTP请求了，这样减少了浏览器向网站服务器发出的HTTP请求数，从而提高了页面加 载速度，这在一些图片比较多的网站，效果是非常明显的，我们要善于使用缓存技术。

启用GZIP压缩。大中型网站，基本都启用了GZIP压缩，如果你使用的是虚拟主机，你可以让服务商为你启用，如果自己有服务器，自己启用也很简单的，为什么启用GZIP压缩就会加快速度呢，因为当启用了GZIP后，网站服务器向你传输数据之前，是经过压缩了的，当传输到你的浏览器后，会再被解压缩的，从而可以在 你的浏览器上正常显示，而且压缩率可以达到很多高，效果非常好。一般你启用了压缩后，搜索引擎对你网站的抓取量也是上升了的。

# SSR #

（编者注：此处需重新开一篇博客写）