前端关于SEO的优化策略

在了解SEO的优化策略，我们得了解什么是SEO。

SEO

SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。

而我们对SEO的优化其实就是提高我们在搜索引擎当中的自然排名。从而提升我们的网站当别人在搜索引擎中搜索发现我们网站的几率。

搜索引擎的实现原理

在对SEO进行优化前，我们必须得了解，在我们发布完网站后搜索引擎能搜索到我们的网站，这个之间究竟发生了什么。

‌‌搜索引擎的基本原理‌包括三个主要步骤：首先在互联网上发现和搜集网页信息，然后对这些信息进行提取和组织建立‌索引库，最后根据用户输入的查询关键字在索引库中快速检出相关文档，并进行排序和返回结果。‌

‌搜索引擎的工作过程‌可以分为四个部分：信息采集、信息分析、信息查询和用户接口。信息采集是通过爬虫扫描网站并抓取网页资料；信息分析是从采集的信息中提取索引项，生成文档库的索引表；信息查询是用户输入关键词后，搜索引擎在索引库中检索相关文档并进行排序；用户接口则是将排序后的结果展示给用户。这个工程有一个专业术语描述，称之为：收录。

前端渲染技术

在了解完搜索引擎的实现原理之后，我们便可以了解一些关于前端能做出对SEO的优化策略，但是在此之前我们得先知道前端渲染技术，因为当他们通过爬虫扫描网站并抓取网页资料进行收录的时候，不同的前端渲染技术会影响到这个过程。

我们常遇到的前端渲染技术分别是SSR（服务器端渲染）、SSG（静态站点生成）和CSR（客户端渲染），下面我们简单的讲解一下他们之前的区别。

CSR（客户端渲染）

CSR（Client-Side Rendering）是前端开发中最常见的渲染方式。在这种模式下，服务器主要负责提供静态的HTML文件（可能包含一些基本的HTML结构和JavaScript脚本），而真正的页面渲染工作则完全由客户端的浏览器来完成。这意味着页面内容是在用户的浏览器上动态生成的。也就是我们常用的VUE和REACT之类的框架。

SSR（服务器端渲染）

SSR（Server-Side Rendering）是一种在服务器端完成页面渲染的技术。在这种模式下，服务器接收到客户端的请求后，会先根据请求数据和模板文件生成完整的HTML页面，然后将这个页面直接发送给客户端。这样，用户可以直接看到完成的内容，无需等待JavaScript加载和执行。

SSG（静态站点生成）

SSG（Static Site Generation）是一种在构建时生成静态HTML页面的技术。在这种模式下，开发者会编写一些模板文件和数据文件，然后使用构建工具（如Hugo、Gatsby等）将这些文件转换为静态的HTML页面。这些页面可以直接部署到服务器上，而不需要服务器进行实时渲染。

在上面三种渲染方式中
CSR是不利于SEO的。因为虚拟DOM是通过js渲染出来的。我们发布完网站之后，浏览器会爬取我们的页面信息，但是这个时候，服务端返回的是一个js文件，之后才会慢慢的将js渲染成真实的DOM。而浏览器（搜索引擎）并不会等待网站去渲染真实DOM，这个时候浏览器抓取不到页面的有用信息。最终会导致，这个页面无法被收录。从而用户无法搜索到我们的网页。

SSR和SSG则是有利于SEO的。因为他们都是返回一个HTML文件，浏览器访问到的就是一个html文件，搜索引擎可以有效的抓取页面的信息进行收录，收录是影响SEO的先决条件。
而这两种渲染方式我们可以根据实际情况进行选择使用，如果你的网站页面数量固定变动不多，可以使用SSG的方式。如果你的网站可能经常会更新，每天的内容可能都在变动，就需要使SSR的方式。这里我们可以了解到SSR的常用框架Nuxt和NesT，他们分别对于vue和React对于的SSR前端框架。

优化策略

了解了以上信息我们接下来就可以了解SEO的优化策略，我们知道所有的优化策略其实都是为了提升我们在搜索引擎中的排名，所以优化策略是根据搜索引擎中影响排名的因素进行整理。

代码优化

在做SEO的过程中网站内容和标题也是很重要的作用点，如果你的网站内容和标题和关键内容没有任何关系，大概率也不会被收录。
下面简单列举一下在代码中如何优化这一策略。

1. 合理的title、description、keywords；搜索对着三项的权重逐个减小，title含1-2个关键字；description把页面内容高度概括，不可过分堆砌关键词比例在7-8%；keywords关键字不能过多，1-2个最好 。
2. 网页正文要与网页标题高度吻合 img标签添加alt做关键字优化。
3. a标签添加title做关键词优化， 如果是外部链接，添加nofollow属性 el = “nofollow”。
4. 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，保证重要内容一定会被抓取，内容要和title高度吻合。
5. 使用语义化的标签，header，footer， aside， h1， nav。
6. 少用iframe：搜索引擎不会抓取iframe中的内容。
7. 提高网站速度：网站速度是搜索引擎排序的一个重要指标，下面的性能优化就是针对这个指标进行优化。

性能优化

提升网站的速度性能优化是非常重要的一环，下面简单的介绍常见的几种性能优化的方式。
1.体积优化
通过代码压缩、代码分包、组件和工具库按需加载、减少不需要的包、引入CDN连接减少部分包等形式减少打包后的HTML和JS的文件大小。
2.图片优化
通过图片懒加载或者精灵图等形式减少请求链接从而达到提升网站速度的效果。
3.浏览器缓存
根据实际情况选择「强缓存/强制缓存」和「协商缓存/对比缓存」，让浏览器缓存发挥最大作用。

网站结构

在项目根目录下通过robots.txt文件，通过指定规则来控制搜索引擎爬虫对网站结构的访问，可以明确指示搜索引擎爬虫应该访问哪些页面，哪些页面应该被忽略。这有助于减轻服务器负载，提高网站的整体性能。

1.User-agent：Googlebot（谷歌）| Baiduspider（百度）| Slurp（Yahoo）| *（所有的搜索引擎）
  // 定义哪些类型的搜索引擎可以抓取当前网站
2.Disallow：/admin  
  //  禁止搜索引擎爬取的文件夹或文件
3.Allow： /admin/test.js
  //  允许搜索引擎爬取的文件夹或文件

网站地图

网站地图指的是存储着你网站链接的Sitemap.xml文件。我们可以在在robot.txt中引入

Sitemap:网站域名/sitemap.xml

也可以根据搜索引擎提供的提交方式提交给搜索引擎，可以让其更快地发现网站，并对其中的内容进行索引。
Sitemap.xml文件格式如下：

  <urlset>
        <url>
            <!--必填标签,这是具体某一个链接的定义入口，每一条数据都要用<url>和</url>包含在里面 -->
            <loc>http://www.baidu.com</loc>
            <!--必填,URL 链接地址,长度不得超过 256 字节-->
            <lastmod>2012-12-14</lastmod>
            <!--可以不提交该标签,用来指定该链接的最后更新时间-->
            <changefreq>daily</changefreq>
            <!--可以不提交该标签,用这个标签告诉此链接可能会出现的更新频率 -->
            <priority>0.8</priority>
            <!--可以不提交该标签,用来指定此链接相对于其他链接的优先权比值，此值定于 0.0-1.0 之间-->
        </url>
    </urlset>

将所有相关的页面链接分门别类地整理出来。有助于搜索引擎更加快速地理解和解析你的网站，提高索引的效率。另外，在创建Sitemap时，你还应该考虑一些关键词的因素。通过在Sitemap中添加关键词标签，你可以进一步优化你的网站，提高在搜索结果中的排名。

链接数量和质量

链接数量对SEO有一定的影响，但质量同样重要。‌

首先，内部链接在SEO中扮演着重要的角色。内部链接可以在网站内部引导用户，同时帮助搜索引擎了解网站的结构和层次，从而增强页面的索引并提高在搜索引擎结果中的可见性。通过战略性地链接页面，可以突出显示最重要的内容，帮助搜索引擎理解哪些页面应该排名更高。此外，内部链接还能增强用户体验，使浏览相关内容变得更加容易，增加用户在网站上的停留时间并降低跳出率‌。

然而，外部链接的数量和质量对SEO也有显著影响。外部链接，即其他网站指向你的网站的链接，被搜索引擎视为对你网站的“投票”，通过分析这些链接的数量和质量来评估网站的重要性和可信度。因此，拥有更多的外链可以提高网站的排名，但关键在于这些外链的质量。高质量的外链来自于权威的、与你的网站相关性高的网站，这样的外链对提升排名更有帮助‌。

值得注意的是，页面上的多个重复链接对SEO并没有正面作用，如果过多使用，还可能被搜索引擎视为作弊行为‌。因此，在优化网站时，应注重链接的质量而非数量，确保每个链接都能为用户提供有价值的信息，同时避免使用过多的重复链接。

综上所述，链接数量对SEO有一定的影响，但更重要的是链接的质量。通过优化内部链接结构和提高外部链接的质量，可以有效提升网站在搜索引擎中的排名和可见性‌

以上就是我对SEO排名了解的部分总结。