"想提高网站排名？前端代码优化就是关键！"（SEO）

什么是SEO

搜索引擎优化（Search engine optimization，简称SEO），指为了提升网页在搜索引擎自然搜索结果中（非商业性推广结果）的收录数量以及排序位置而做的优化行为，是为了从搜索引擎中获得更多的免费流量，以及更好的展现形象。

简单地说，SEO是指网站从自然搜索结果获得流量的技术和过程

搜索引擎工作原理

要了解SEO，首先我们得了解搜索引擎的工作原理，其原理是比较复杂，我把流程简化如下：

一、爬虫抓取网页内容

一般爬虫抓取页面内容是先从一个页面出发，从中提取出其他页面的链接，然后当作下一个请求的对象，一直重复这个过程。所以要有良好的SEO，需要你在各大网站上拥有外链，这样会提高你的网站被搜索引擎爬虫的几率。

二、分析网页内容

爬虫拿到HTML之后，就会对其内容进行分析。一般需要进行去杂、分词、建立索引数据库。

你可能会问什么是索引数据库呢？

简单来说就是记录一个词在哪些文档中出现、出现次数、出现的位置等等。

那为什么要建立索引数据库呢？

为了方便我们在搜索关键词时能够快速查找。

三、搜索和排序

搜索引擎会根据我们输入的关键词，分别查询其对应的索引数据库，并对结果进行处理和排序，然后生成搜索结果页面。

<p align=center><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bfed03e25deb44b49c59746db1291b1e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=644&h=360&s=59766&e=png&a=1&b=fcfcfc" alt="image.png" /></p>

不同搜索引擎的SEO差异

网站的优化大致可以分为两个方向

• 网站结构调整。
• 是页面代码优化。

网站结构

我们的网站能否顺利地被爬虫抓取和收录，取决于我们的网站结构。

• 结构要清晰：一般网站的结构是树形的，我们一般会分为三层：首页 → 频道页（列表页） → 文章页（详情页）。
• 结构要扁平：网站的结构层数要越少越好，不要超过三层，爬虫一般到了第三层就不会继续深入爬取了。多数的网站，例如掘金、雪球等，他们的网站结构是两层，他们的首页和频道页是同一个页面。

导航

页面应该要有简明的导航。导航可以让搜索引擎知道网站的结构，也可以让搜索引擎知道当前页面在网站结构所在的层次。

• 要确保每个页面都包含清晰的导航
• 对于内容丰富的网站使用面包屑导航
• 链接使用文字链接，如果是图片，则通过alt属性告知搜索引擎链接的指向

Robots.txt 文件

Robots.txt 文件是一个用于告诉搜索引擎爬虫哪些页面可以被爬取，哪些页面应该被忽略的文本文件

User-agent: *   //指定搜索引擎,所有搜索引擎爬虫，可使用通配符 "*"
Allow: /        //定义允许和禁止的路径,`/`代表允许搜索引擎访问整个网站

User-agent:Googlebot    //谷歌
Disallow: /             //禁止访问整个网站

User-agent:Bingbot     //必应
Allow: /public/        //允许访问特定目录


User-agent: googlebot-mobile   //谷歌手机
Disallow: /private/page.html    //禁止访问特定页面

我们可以把发布它到的网站根目录下。搜索引擎爬虫在访问您的网站时将会读取这个文件，并根据其中的规则进行索引。

注意：一些网站不存在robots文件时会返回200状态码和一些错误信息，而不是404状态码，这可能使搜索引擎蜘蛛错误解读robots文件信息，所以建议就算允许抓取所有内容，也要建一个空的robots文件，放在根目录下。

内链/外链

内链

内链是指在一个网站内部，将一个页面链接到同一网站内的其他页面。内链可以改善用户体验，增加页面浏览量，以及帮助搜索引擎爬虫更好地理解网站的结构和内容,提高搜索引擎对我们网站的收录和权重。

外链

外链是指两个不同网站之间相互链接,不单单只是提高网站的权重，也可以提高某个关键词的排名，但也需要谨慎使用，以避免被搜索引擎视为垃圾链接。

代码优化

HTML语义化

• <h1>全局只能存在一个不要滥用，合理使用 <h2><h3><h4>此类标签
• 跳转使用<a>标签,需要有 href 属性，不要使用js跳转
• 文章用<article>标签承载
• 所有<img>标签都需要添加 alt 属性值说明。

正确的TDK标签

TDK标签包括

• 标题标签title（T）：格式以关键词 - 副关键词 | 品牌名为标准，长度最好在50 ~ 60 个字符之间
• 网站的描述标签description（D）：长度最好在 155 ~ 160 个字符之间，尽量使用关键词和吸引用户的话术，每个网页创建不同的描述。
• 关键词标签keywords（K）：最好以5~10个之间，用逗号或者下划线隔开，搜索量大的在前，搜索量小的在后，不可以重复出现

避免爬虫陷阱

• Flash：使用 Flash 制作的网站无法被搜索引擎索引。
• 各种跳转：过多的页面重定向或跳转，会被爬虫认定为垃圾网站，降低排名。
• JS链接：搜索引擎爬虫不会执行 JavaScript代码，避免
• 要求登录：如果网站要求用户登录才能访问内容，搜索引擎爬虫可能无法访问。

URL设计

规范、简单、易理解的URL能让搜索引擎更好地抓取内容

1. 清晰性和可读性：URL应该清晰明了避免使用含有数字、特殊字符或随机字符，这样爬虫能够快速理解页面的主题。
2. 使用关键字：在URL中包含相关的关键字可以提高页面在搜索引擎中的排名。
3. 越短越好：过长的URL，会很混乱并且难以理解。
4. 连字符使用「-」分隔： 使用连字符（-）分隔单词，有助于提高可读性。
5. 避免参数字符串：太多的参数字符串，会使URL复杂，难以理解，并可能导致重复内容的问题。
6. 静态URL：尽量使用静态URL而不是动态URL，静态URL通常更容易理解和索引。
7. 规范化URL： 同一个页面，只对应一个url 。多个url可以采用301进行重定向，以避免重复内容。
8. HTTPS协议： 使用HTTPS协议保护网站，搜索引擎通常倾向于收录安全性高的网站。

性能优化

页面速度是重要的排名因素，也影响到爬虫的爬取效率。无论百度还是Google都已经有数次以页面打开速度为目标的算法更新

优化页面耗时

网站在搜索结果中的排名会受到页面打开速度的影响，例如百度在2017年10月推出闪电算法，针对页面的打开速度给予政策支持，页面的首屏加载速度越快往往会获得更高的排名以及更多的流量倾斜。谷歌也在2021年6月发布公告称，网页核心性能指标(CLS、FID、LCP)将被视为排名因素之一。

良好的首屏加载耗时不仅会受到搜索引擎的青睐，同时也能为浏览网站的用户提供更好的体验和服务。

优化页面体积(< 125 kb )

搜索引擎受限于自身的技术能力和计算资源，对于页面源码尺寸有限制（百度限制128kb，Bing限制125kb），超过的部分会进行截断处理。

网站地图（Sitemap）

Sitemap是一个XML文件，文件包含了网站上所有重要页面的URL，以及页面的元数据，Sitemap可通知搜索引擎他们网站上有哪些可供抓取的网页，以便搜索引擎可以更加智能地抓取网站。

<p align=center><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b96fe69e67414c5ba7e6c21855bdb9a5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=920&h=855&s=595046&e=png&b=fcfcfc" alt="image.png" /></p>

下面是一些常见的XML格式Sitemap要求：

• sitemaps.org的通用准则
• 谷歌的sitemap要求
• Bing的Sitemap要求
• 百度的Sitemap要求

结语

SEO确实是一个充满神秘感的领域，既有一定的规则可循，又充满了复杂性，有时甚至会显得有些玄学。在这个不断变化的数字世界里，积累经验似乎是最可靠的方法，而AB实验则是我们的有力工具。

本文分享了一部分我个人的SEO优化心得，但要了解SEO的全貌，我们还有很长的路要走。SEO不再局限于Web端，它已经涉足到APP内部，呈现出更多的可能性，我们需要更深入地探索它的奥秘。

然而，无论怎样，要做好SEO的最基本前提仍然是网站内容的丰富和有价值。没有优质的内容，SEO也难以施展其魔力。

希望我的经验和积累能够为大家带来一些启发，让我们一同在这个充满挑战和机遇的SEO世界中不断前行，追求更好的结果。

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！