前端SEO优化

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容。

<meta http-equiv="参数"content="参数变量值">；

<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">
<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">

2.2 Open Graph 协议标签

Open Graph 协议标签通过 OG Tags （OG 标签）实现的，它属于 Meta 标签的一种，可以用来标识网页类型和元素，让分享到社交网络的内容可以被有效的抓取，还可以控制分享的网站卡片呈现我们想要显示的内容。

只要看到以og:为前缀的 Meta 标签就可以判断该网页支持 OG 标签了，如下：

<meta property="og:title" content="设置Open Graph 标签！社交营销优化！">
<meta property="og:site_name" content="前端阿彬">
<meta property="og:type" content="article">
<meta property="og:description" content="Open Graph Protocol（开放图谱协议），简称 OG 协议或 OGP。">

设置og协议前后的网站分享卡片对比：

2.3 关于网站关键词

上面我们也提到了，现在 keywords 关键词已经被各大搜索引擎降低了权重，所以可以设置也可以不设置，但我认为它仍然有他存在的价值。

如果你决定配置网站关键词，需要注意以下几点：

2.3 关于网站描述 二、网站质量（一）确保页面性能

网站性能是会影响到网站的SEO排名的，原因可想而知：

参考文章 谷歌将网页加载速度快慢作为影响排名重要因素。

如果你想了解网站性能优化的知识，可以查看我的往期文章 2023 前端性能优化清单

（二）HTML语义化

语义化是指内容的结构化（内容语义化），选择合适的标签（代码语义化）。

杜绝通篇div，HTML语义化不仅便于开发者阅读，还有利于浏览器爬虫的解析，对seo优化很有帮助。

所以我们在开发时要遵循语义化的开发规范，根据页面内容，选择合适的标签，优化代码，使得网页结构更加清晰。

下面介绍几种标签的使用：

h 标签

h标签一种有六个，分别是h1，h2...h6。h1-h6文字由大到小，权重也逐渐降低。相比其他标签而言，h标签在页面中的权重非常高，所以不要滥用h标签。要利用h标签告诉浏览器网页的核心内容！例如：

h1写主标题，通常与网页title标签一致，可以在页面展示，一个页面最好只有一个h1标签。

h2写次级标题，h3-h6以此类推，细分网页结构。

strong、em 标签

和标签都是加粗文字的标签，其二者的区别就在于：是为了加粗而加粗的，是为了强调而加粗的。

同样斜体标签和也有着相同的区别，有强调效果。

推荐使用，而不是 等，单纯修改加粗等样式可以用css实现。

ul ol li 标签

这三个都是列表标签，ul表示无序列表（unordered list），ol表示有序列表(oredr list), li 表示列表项（list item）。从网站优化的角度来说，在罗列多个词条的时候，最好使用列表标签，例如使用ulli布局网站导航条对搜索引擎蜘蛛更加友好，也是影响搜索引擎排名的因素之一。

img 标签

img图片标签的 alt 属性是图片的替换文字。

alt属性可以帮助蜘蛛快速理解图片的具体内容，并且在网络故障时，仍然能够爬取到图片的内容信息。

其他标签

（三）其他注意点 三、SEO手段（一）各搜索引擎提交站点收录

在各个搜索引擎的站点平台提交网站收录可以缩短爬虫发现网站链接时间，加快爬虫抓取速度。

（二）sitemap站点地图

Sitemap，即站点地图，它是一个网站的全部URL列表，同时可以列出每个网址的其他元数据（上次更新的时间、更改的频率以及相对于网站上其他网址的重要程度为何等）。它可以为搜索引擎的蜘蛛进行导航，更快的找到全站中的所有链接，更全面的获取网站信息。为了保证链接的全面性和准确性，应该自动不定期更新sitemap站点地图。

一般网站的sitemap文件都会有以下两种格式：

sitemap.xml，这是大部分搜索引擎所使用的用于提交网站网址的XML文件；

sitemap.html，这是可直接放在网站上用于用户访问或搜索引擎快速找到全站链接的页面（每页最多500条，自动分页）；

sitemap.xml 文件内容格式大致如下：

    <?xml version="1.0" encoding="UTF-8"?>
    <urlset
        xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
           http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"
    >
    <url>
     <loc>https://www.cece.com/</loc>
     <priority>0.3</priority>
     <lastmod>2023-05-17</lastmod>
     <changefreq>weekly</changefreq>
    </url>
    </urlset>

网上有很多生成sitemap文件的站长工具，例如：

sitemap.zhetao.com/

tools.bugscaner.com/sitemapspid…

生成的sitemap文件一般放在项目根目录下，然后可以在各个搜索引擎的站点平台提交sitemap.xml文件。

（三）robots文件

蜘蛛在访问一个网站时，会首先会检查该网站的根域下是否有一个叫做 robots.txt的纯文本文件，这个文件用于指定spider在您网站上的抓取范围。

如果你有哪些页面不想被蜘蛛访问，则可以通过robots文件告诉蜘蛛不想被搜索引擎收录的部分或者指定搜索引擎只收录特定的部分。

robots文件内容语法：

此文件主要由两种键值对组成：

User-agent: 该项的值用于描述搜索引擎蜘蛛的名字。如果该项的值设为*，则该协议对任何机器人均有效。Disallow: 该项的值用于描述不希望被访问到的一个URL，一个目录或者整个网站。以Disallow 开头的URL 均不会被搜索引擎蜘蛛访问到。任何一条Disallow 记录为空，说明该网站的所有部分都允许被访问。

参考： 掘金的robots文件：

*网站目录下所有文件均能被所有搜索引擎蜘蛛访问*
User-agent: *
Disallow:
*禁止所有搜索引擎蜘蛛访问网站的任何部分*
User-agent: *
Disallow: /
*禁止所有的搜索引擎蜘蛛访问网站的几个目录*
User-agent: *
Disallow: /a/
Disallow: /b/
*只允许某个搜索引擎蜘蛛访问*
User-agent: Googlebot
Disallow: 

使用场景举例：

robots 文件使用方法：

使用方法非常简单，只需要将 robots.txt 文件上传到网站根目录就行了，注意文件名一定要全小写。当成功上传后，通常在浏览器中访问域名/robots.txt就可以查看到文件。

（四）内链｜外链

在搜索引擎优化领域，有着内链为王、外链为皇的说法，它们都能对提升网站排名有所帮助，尤其是外链的建设。先来区分下网站内链和外链：

内链：从自己网站的一个页面指向另外一个页面。通过内链让网站内部形成网状结构，让蜘蛛的广度和深度达到最大化。

外链：在别的网站导入自己网站的链接。通过外链提升网站权重，提高网站流量。外链有以下几个好处：

外链能够为我们的网站带来流量，所以外链数量越多越好是必然的。但是，一定要注意外链的质量，例如对方网站没有被搜索引擎收录，对方网站性能过差，死链等，这些低质量的外链反而会影响到本站的排名。

另外，在添加内链外链的过程中，要注意在 a 标签中对 nofollow 和·external 属性的使用。

标签的 rel 属性用于指定当前文档与被链接文档的关系。

rel=nofollow使用说明 >>>

<a rel="nofollow" href="http://www.baidu.com/">百度

带有rel=nofollow 属性的链接会告诉搜索引擎忽略这个链接。阻止搜索引擎对该页面进行追踪。从而避免权重分散。这个属性只对搜索引擎有效，这是一个纯粹的SEO优化标签。

使用场景：

并不是内容无关的外链都要加nofollow。适当的添加高质量的外链，对于SEO是没有坏处的，还会产生正向影响，所以关键就在于外链的质量和数量上。例如掘金的友链：

rel=external使用说明 >>>

<a rel="external" href="http://www.baidu.com/">百度

external字面意思是“外部的”，a 标签加上这个属性代表这个链接是外部链接，非本站链接，点击时会在新窗口中打开，它和target="_blank"效果一样。external 可以告诉搜索引擎这是一个外部链接，非本站的链接。

（五）Canonical URL（网址规范化）

什么是网址规范化？简单举个例子：

juejin.cn

这几个网址虽然url不同，搜索引擎也确实把他当作不同的网址，但是其实这些网址返回的都是同一个页面，这就是不规范网址。

网页规范化的两个好处：

解决方法：

在页面的head 标签中，加入以下canonical标签，指定规范化网址。

<head>
  <link rel="canonical" href="href="https://juejin.cn"/>

例如掘金的规范化网址：

（六）网站301重定向

301/302重定向是 SEO优化中一种重要的自动转向技术。301重定向是当搜索引擎向网站服务器发出访问请求时，服务返回的HTTP数据流中头信息(header)部分状态码的一种，表示本网址永久性转移到另一个地址。302重定向则表示暂时转移。

301重定向与上一点所说的网址规范化有着类似的作用，与此同时，它还具有以下作用：

虽然canonical标签可以规范化网址，但是以下四种情况必须配置301重定向：

网站替换域名后，通过301永久重定向旧域名重定向到新域名，弥补流量损失和SEO;如果删除掉网站中的一些页面，但是这个页面有一定的流量和权重，可以利用301重定向到合适的页面避免流量流失；网站改版或因为其他原因导致页面地址发生变化，为避免出现死链接，可以通过 301 重定向来解决；如果您有多个空闲的域名需要指向相同的站点，则可以使用301永久重定向；

如何验证301重定向是否生效：