SEO优化技巧_【前端进阶】更容易理解的 SEO 全方面优化

[]

SEO是什么：SEO是搜索引擎优化的简称。它是一种优化方法，通过改进网站的内容、结构、外部链接等方面，目的是提升网站在搜索引擎自然排名中的位置，增强网站的可见性。

例如在站长工具：/，中查看掘金的收录情况

图中能看出掘金网站收录量相当理想,可以通过查阅官方统计信息,或者,在各个搜索平台的输入框里键入"site:掘金"这样的指令,来查询收录情况

一、TDK

TDK代表标题、描述以及关键词，这三个部分是网站SEO的重要构成要素

1. title

页面标题是搜索引擎极为看重的部分，它直接关系到页面在搜索结果里的标题呈现方式，对搜索排名有着显著影响。

注意点：

语句不宜过长，多数搜索引擎和浏览器仅能展示60至70个字符，超出部分将无法呈现

过长的标题可能会减少关键词的集中程度，进而妨碍搜索引擎对页面信息的评估

2.

：页面描述，内容通常会被用作页面的摘要信息展示

注意点：

信息量充足，这样在摘要页面上不容易被完整呈现，从而降低用户的点击意愿

内容最好控制在160 个字符以内

3.

：页面关键词

由于不当使用等因素，众多主要网络检索平台已显著削弱了元标识符在页面排序中的权重

注意点：

不同页面的关键词应该尽量不重复，避免关键词相互竞争

关键词的数目不宜过多，建议维持在4到8个之间，否则可能会被搜索引擎当作关键词堆砌，进而对SEO表现造成负面影响

提示：针对不同页面，可以设定不同的TDK，以此提升关键词的检索收录效果

二、OG 协议

Open Graph 规范是一种元数据体系，由相关方制定，能让网页转化为具备丰富展示特性的社交内容。在网页里嵌入符合该规范的特定信息，能够辅助呈现更加详尽的页面概况。

常见的 Open Graph 标签包括：

例如在bing搜索掘金，看到掘金的最新相关信息

点开第一条搜狐的，看title头部，发现使用的og协议如下

其中og:image的图片链接，就是截图中右侧的图片

三、HTML 语义化

HTML语义化主要作用有以下几点：

方便其他设备进行解析，例如盲人阅读器

有利于SEO，搜索引擎更容易理解语义化页面的内容结构和主题

便于团队开发和维护，语义化更具有可读性

1. 标题标签

HTML 一共设有六个 h 标签，具体包括 h1、h2、h3、h4、h5 以及 h6。这些标签用来标示文本的尺寸和层级，其中 h1 代表最大且最关键的文本，而 h6 则表示最小且相对不重要的内容。

h标签在页面中的重要性远超其他标签，因此应用时需谨慎，避免过度使用。

主页面首要的标题一般采用 h1 标签来设定，这个标题需要和网页的 title 元素信息相吻合，同时也要在页面中清晰地呈现出来，一个页面内 h1 标签的使用数量以一个为佳，不宜过多，次一级的标题可以使用 h2 标签来定义，而 h3 到 h6 标签则按顺序用于更细致的标题层级划分

2. 强调标签

标签具有双重作用，首先用于突出重点，从而提升其重要性；其次可以令文字显示更为醒目，改善可辨识度。

em这个标记具有双重作用，首先用于突出显示内容，从而提升其重要性；其次能够使文字呈现倾斜状态，以此改善整体观感。

强调标签权重虽比h标签低，但也比其他标签权重高

3. 超链接标签

1. a 标签分为“内链”和“外链”

内部链接，就是从一个站点内的页面链接到另一个页面，利用这种链接，能够使站点内部构成网络形态，从而让爬虫的覆盖范围和访问深度实现最大化。

外部链接：将自身网站地址放置于其他平台之上。借助外部链接增强站点排名，增加页面访问量。

2. a 标签的两个属性

含有rel=属性的连接会提示搜索引擎无视这个连接。禁止搜索引擎追踪该页面，以此防止权重流失

js复制代码百度

这个属性的字面含义是“外部链接”，当应用于a标签时，表明该链接指向站外资源，并非当前网站内容，访问时会切换到新页面，其作用等同于=""属性。该属性能够向搜索引擎传递明确信息，标识出这是一个指向外部站点的链接。

js复制代码百度

4. 图片标签

图片的 alt 属性有助于优化图片搜索排名，在网络连接中断的情况下，能够替代图片内容进行展示

5. 段落标签

p标签虽然其重要性不如其他标签突出，但它对于页面基础内容的组织方式起着关键作用。页面里那些用大段文字表达的内容，都可以选用p标签来替换原本的div标签

6. 列表标签

ul：标签表示无序列表

ol：标签表示有序列表

li：标签表示列表的一项

搜索引擎借助这些标识，可以更清晰把握资料间的层级关系和内在联系，进而更精准判断页面的实质内涵和重要程度

7. 布局标签

：定义页眉，通常包含网站标志、主导航、搜索框等

nav：定义导航

：定义独立的、完整的内容块，如博客文章、新闻报道等

：定义页面上的独立的、有语义的内容块，如章节

aside：定义侧边栏

：定义页脚，通常包含版权信息、联系方式、备案信息等

四、 站点地图

站点地图通常采用xml格式，旨在协助搜索引擎有效识别并检索网站的全部页面，同时包含页面重要程度和更新周期的数据，以便搜索引擎合理规划抓取任务

.xml 内容格式如下：

js复制代码

https://acme.com2023-04-06T15:02:24.021Z
yearly
1


https://acme.com/about2023-04-06T15:02:24.021Z
monthly
0.8

loc：页面地址

：内容最后修改时间

：预计更新频率

该页面的优先级别高于其他页面，其数值介于0.0和1.0之间，数值为1.0时代表拥有最高优先级

该文件通常存放在站点的主目录里，用户能够利用站点地址加后缀名直接打开它。不过单个文档里url元素的个数最多只能有五万，当页面的数量超过这个限制时，就需要把文档分成几份来处理

在主目录中创建一个.xml文件，另外再建立一个文件夹，这个文件夹专门用来集中存放有关页面结构图的所有资料

js复制代码//sitemap.xml

该网址指向一个名为sitemap1.xml的文件，位于example.com的sitemap目录下。2023-04-01


这个网址指向一个网站地图文件，具体路径是二级目录下的xml格式文档，域名是example.com，文件名包含了sitemap和xml后缀，可以通过这个链接访问到相关数据。2023-04-15

: 用于包含多个 文件的索引。

当.xml文件不位于根目录，也就是无法使用“域名+/.xml”这种路径直接访问时，必须在.txt文件里标示出它的具体存放路径，否则搜索引擎或许无法检索到

五、 文件

.txt文件是一种标准文档，它向搜索引擎的自动化程序，也就是爬虫或蜘蛛，说明如何检索和收录该网站的内容

该.txt文档要存放在网站的主目录里，可以通过“网址+/.txt”这样的方式直接打开

使用js实现代码复制功能，识别用户代理信息，禁止访问私有目录下的站点地图，其链接地址为https://acme.com/sitemap.xml

该字段标示搜索爬虫的名称，如果该字段内容为星号，则该规则适用于所有爬虫

这条指令清晰地指示网络爬虫禁止进入 // 路径及其包含的所有资源。这是 .txt 文件的一项关键作用，旨在防止搜索引擎收录网站中不想公开的页面或信息。

请输入网站网址，以便搜索引擎机器人能更好地找到并收录这些网页

六、各搜索引擎提交站点收录

增加网址被检索的几率，除了采用 .txt 与 .xml 格式之外，亦可在各大搜索引擎的官方渠道，自行递交网址信息，借此减少网络爬虫探索网址所需时长，提升其数据采集的效率

百度：/

谷歌：/?hl=z…

搜狗：/

360：/

必应：//…

七、服务端渲染

网络爬虫只能获取到页面的固定代码文本，无法运行里面的程序代码。如果站点运用了Vue或React来制作单页应用，那么页面上很多结构元素都是等用户打开后才会生成的。这样一来，爬虫能直接获取并研究的数据就会变得非常少

熟悉vue的，可使用Nuxt

了解React的，可以选用Next, 对Next有兴趣的，可以阅读我写的另一篇内容，关于如何为上市公司从无到有建立Next.js14项目

网络爬虫程序不获取脚本文件的信息，也不处理其中的数据，所以项目开发时应当尽量减少这种做法

八、网址规范化

例如，一个页面可能有多个 URL 地址，比如：

那个网址是https://example.com/article.html, 另一个网址是https://example.com/article, 还有一个网址是https://www.example.com/article

这些网址都指向同一个网页，然而，我们应当选定一个作为该页面的标准网址

在所有不符合标准的 HTML 页面片段里，插入一个指向预设规范地址的连接符号

九、网站性能

网页加载时间越短，解析结果就越好，否则程序会判定该站点对访客不够友好，从而减慢数据采集进程