前言

什么是SEO：SEO 是 Search Engine Optimization 的缩写，即搜索引擎优化。它是一种通过调整网站的内容、结构、外部链接等方面的优化手段，来提高网站在搜索引擎自然/免费搜索结果中的排名和可见度的过程

一、TDK

TDK是Title(标题)、Description（描述）和 Keywords（关键词）的缩写，是网站SEO的关键

1. title

Title：页面标题，是搜索引擎最重视的元素之一，它直接决定了页面在搜索结果中的标题显示

<title>标题</title>

注意点：

1. 避免过于冗长，大多数搜索引擎和浏览器中能完全显示的长度为 60-70 个字符，超出则会被截断

2. 冗长的标题可能导致关键词密度降低，从而影响搜索引擎对网页内容的判断

2. description

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

<meta name="description" content="网站的描述">

注意点：

1. 内容不宜过短，作为摘要信息展示的时候如果一行都显示不全，不利于吸引用户点击

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

3. keywords

keywords ：页面关键词

因为滥用等原因，大多数主流搜索引擎已经大幅降低了 keywords 元标签对网页排名的影响

<meta name="Keywords" content="网站的关键词">

注意点：

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

2. 关键词的数量应控制在4-8 个，过多可能会被搜索引擎认为是关键词堆砌，影响SEO效果

提示：对于不同页面，可设置不同的TDK，来增加关键词的收录量

二、OG 协议

Open Graph 协议是由 Facebook 提出的一种元数据标准，它允许页面成为丰富的社交对象。通过在网页中添加特定的 Open Graph 协议，可以帮助提供更丰富的预览信息。

常见的 Open Graph 标签包括：

<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="图片URL">
<meta property="og:url" content="页面URL">
<meta property="og:type" content="网页类型，如website，article">
<meta property="og:release_date" content="定义网页内容的发布时间">

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

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

三、HTML 语义化

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

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

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

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

1. 标题标签

HTML 中共有 6 种 h 标签，分别是 h1、h2、h3、h4、h5 和 h6。这些标签表示文字的大小和重要性，h1 最大最重要，h6 最小最次要。

相比其他标签，h 标签在页面中的权重非常高，所以使用时要注意不要滥用。

例如，h1 通常用来写网页的主标题，应该与网页 title 标签的内容保持一致，并在页面中展示。每个页面最好只有一个 h1 标签。h2 可用来写次级标题，h3-h6 依次用于更细分的标题

2. 强调标签

strong：标签一方面是强调，增加了权重；另一方面也能字体加粗，增强视觉效果

em：标签一方面是强调，增加了权重；另一方面也能字体变为斜体，增强视觉效果

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

3. 超链接标签

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

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

外链：在别的网站导入自己网站的链接。通过外链提升网站权重，提高网站流量。

2. a 标签的两个属性

带有rel=nofollow 属性的链接会告诉搜索引擎忽略这个链接。阻止搜索引擎对该页面进行追踪。从而避免权重分散

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

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

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

4. 图片标签

: 图像标签的 alt 属性有助于图像 SEO，并在网络故障时，代替图片显示

5. 段落标签

p 标签虽然权重较低，但作为页面基础内容结构很重要。页面中用长文字描述的内容，都可以使用p标签代替原先的div标签

6. 列表标签

ul：标签表示无序列表

ol：标签表示有序列表

li：标签表示列表的一项

搜索引擎能够通过这些标签更好地理解信息的层次结构和关联性，从而更准确地评估网页的内容和价值

7. 布局标签

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

nav：定义导航

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

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

aside：定义侧边栏

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

四、sitemap 站点地图

sitemap 站点地图一般是xml格式的文件，用于帮助搜索引擎更好地发现和抓取网站上的所有页面，并提供页面优先级和更新频率的信息，帮助搜索引擎更好地分配抓取资源

sitemap.xml 内容格式如下：

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
      <loc>https://acme.com</loc>
      <lastmod>2023-04-06T15:02:24.021Z</lastmod>
      <changefreq>yearly</changefreq>
      <priority>1</priority>
    </url>
    <url>
      <loc>https://acme.com/about</loc>
      <lastmod>2023-04-06T15:02:24.021Z</lastmod>
      <changefreq>monthly</changefreq>
      <priority>0.8</priority>
    </url>
  </urlset>

loc：页面地址

lastmod：内容最后修改时间

changefreq：预计更新频率

priority：页面相对于其他页面优先级，它的值范围是0.0到1.0，其中1.0表示最高优先级

sitemap.xml 一般放在网站的根目录下，可以通过“域名+/sitemap.xml”的形式直接访问到。但每个 sitemap文件最多包含 50,000 个 URL 标签，如果网站页面超过 50,000 个，则应该将 Sitemap 文件拆分成多个。

例如在根目录下新建sitemap.xml，并新建sitemap文件夹用于统一管理页面的站点地图信息

// sitemap.xml
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap>
    <loc>https://example.com/sitemap/sitemap1.xml</loc>
    <lastmod>2023-04-01</lastmod>
  </sitemap>
  <sitemap>
    <loc>https://example.com/sitemap/sitemap2.xml</loc>
    <lastmod>2023-04-15</lastmod>
  </sitemap>
</sitemapindex>

<sitemapindex>: 用于包含多个 sitemap文件的索引。

如果sitemap.xml没有放在根目录，即不能通过“域名+/sitemap.xml”的形式直接访问到，需在 robots.txt 中指明Sitemap位置，否则搜索引擎可能无法找到

五、 robots 文件

robots.txt 文件是一个网站用来告诉搜索引擎机器人(又称爬虫或蜘蛛)应该如何抓取和索引该网站的一种标准

robots.txt 文件需放置在网站的根目录下，以“域名+/robots.txt”的形式直接访问到

User-Agent: *
Disallow: /private/

Sitemap: https://acme.com/sitemap.xml

User-agent: 该项的值用于描述搜索引擎蜘蛛的名字。如果该项的值设为*，则该协议对任何机器人均有效

Disallow：这条指令明确地告诉爬虫不要访问 /private/ 路径及其下的所有内容。这是 robots.txt 文件的核心功能之一，用于保护网站中不希望被搜索引擎索引的页面或内容。

Sitemap：提供网站 sitemap 的 URL 地址，帮助搜索引擎爬虫更有效地发现和索引这些页面

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

除了robots.txt + sitemap.xml 方式增加网址被收录的可能性外，还可以在各搜索引擎站长平台手动提交网址，以缩短爬虫发现网站链接时间，加快爬虫抓取速度

百度：ziyuan.baidu.com/

谷歌：developers.google.com/search?hl=z…

搜狗：zhanzhang.sogou.com/

360：zhanzhang.so.com/

必应：www.bing.com/webmasters/…

七、服务端渲染

爬虫只能抓取到网页的静态源代码，而无法执行其中的JavaScript脚本。当网站采用Vue或React构建SPA项目时，页面上的大部分DOM元素实际上是在客户端通过JavaScript动态生成的。这意味着爬虫能够直接抓取和分析的内容会大幅减少

熟悉vue的，可使用Nuxt

爬虫除了不会抓取JavaScript脚本的内容，也不会抓取iframe中的内容，因此项目中少用iframe

八、网址规范化

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

https://example.com/article.html
https://example.com/article
https://www.example.com/article

这些 URL 指向同一个页面内容。但是，我们应该指定其中一个作为该页面的规范化 URL

在每个非规范版本的 HTML 网页的<head>部分中，添加一个 rel="canonical" 链接来进行指定规范网址

<link rel="canonical" href="https://www.example.com/article"/>

九、网站性能

网站打开速度越快，识别效果越好，否则爬虫会认为该网站对用户不友好，降低爬取效率

结尾