如何发现并解决网站中常见的技术性SEO问题

假设你已经建立了一个网站，你在设计上投入了大量精力，也购买了域名等等。但一个网站并不仅仅是指你在屏幕上看到的内容，实际上在幕后还有很多复杂的运作过程。你必须了解互联网的运行机制，以及搜索引擎优化（SEO）的工作原理。

速度也是其中非常重要的一个因素。如果一个网站的加载速度很慢，那么它的SEO效果就很可能不佳，因为现在大多数人都不会愿意花费太多时间等待页面加载完成。

网站的速度是一个广为人知的话题，而且其中也涉及到许多需要考虑的因素，比如“最大内容绘制时间”（LCP）、“累积布局偏移量”（CLS）以及服务器速度等等。不过这些内容我会在另一篇文章中详细讨论。

这篇文章主要探讨的是那些会阻碍搜索引擎访问和读取你网站页面的问题。

在我看来，技术性SEO要比常规的SEO更难实施。常规SEO主要关注内容和关键词，而技术性SEO通常需要开发者具备相关知识，而且可能需要对网站代码进行一些修改。如果你没有技术背景，这些修改过程可能会让你感到有些棘手。

某些技术性问题可能会在数月之内都被人们忽略，因为它们通常不会被直接看到。这些问题不属于设计方面的问题，只有通过特定的检测工具，比如Google PageSpeed Insights，才能发现它们。

在这个教程中，你将会在一个小型练习网站上找到并解决那些最常见的技术性问题。我并没有选择使用真实的网站来进行测试，以免让这些网站的主人感到不便，因此我专门建立了一个已经存在各种问题的练习网站。

目录

• 先决条件
• 什么是技术性SEO？
• 这些问题在真实网站中有多常见？
• 如何搭建练习网站
• 如何检查页面的HTTP状态码
  • 什么是“软404错误”？
• 如何查找并修复重定向链问题
• 如何确保robots.txt文件不会阻止重要页面的被访问
• 如何发现无意中设置的“noindex”标签
  • 如何检查robots meta标签
  • 如何检查X-Robots-Tag头信息
• 如何正确使用规范标签
• 如何修复缺失或重复的标题及元描述信息
• 如何确保你的链接能够被搜索引擎抓取
• 如何判断你的内容是否需要JavaScript才能显示
• 你能在五分钟内检查一个页面吗？
• 总结

先决条件

你不需要是经验丰富的程序员才能跟随这些步骤进行学习。你需要准备以下工具：

• 一个网页浏览器，比如Chrome、Firefox、Edge或Safari。在Safari中，请先进入“设置”>“高级设置”，然后开启“显示Web开发者功能”。
• 一个终端程序：macOS系统中使用Terminal，Windows系统中使用PowerShell，Linux系统中则可以使用任意终端程序。
• curl，这是一个用于下载网页的小程序。它预装在macOS、大多数Linux发行版中，同时也适用于Windows 10（1803版本及后续版本）和Windows 11系统。
• Node.js，用于运行练习网站中的代码。这些代码已经使用Node.js 26.8和curl 8.7进行了测试。

在Windows系统中使用PowerShell时，请输入curl.exe而不是curl，因为在那里curl实际上是一个指向其他命令的快捷方式。同时，请将| grep -i "text"替换为| Select-String "text"，并将/dev/null替换为NUL。

什么是技术性SEO？

谷歌拥有名为“爬虫”的程序，它们会持续在互联网上搜索新的网站和页面。当谷歌发现一个新的网页地址时，它会对这些页面进行抓取，并分析其中的内容（包括文本、图片和视频）。

如果谷歌认为某个页面值得被收录到索引中，它就会将该页面添加到一个庞大的网页数据库中。之后，在用户进行搜索时，谷歌会从这个索引中筛选出相关的页面作为搜索结果展示给用户。谷歌在关于搜索原理的说明中将这三个步骤称为“抓取”、“索引”和“呈现结果”。

因此，仅仅完成抓取步骤并不能保证页面会被收录到索引中，而被收录到索引中也并不一定能确保该页面会出现在搜索结果中。同样的指南还指出，即使某个网站完全遵守了谷歌的所有规定，谷歌也不能保证这三个步骤都能顺利完成。

解决技术性问题并不一定能让你的网站在谷歌搜索结果中排在第一位，但这些问题得到解决确实会增加你的网站获得更高排名的可能性，因为每一个被修复的问题都会让你的网站变得更好。

技术性SEO必须与常规的SEO策略相结合，比如关键词优化、外部链接建设、社交媒体互动等。

这些问题在真实的网站上有多常见？

以下数据是我使用自己开发的网站审计工具进行审计后得出的结果。每个网站只被计算一次，数据统计时间截至10月25日。

“抓取测试”会检查一个网站中的多个页面（这里平均检查10个页面），而“单页审计”则只会检查一个页面，通常是首页。

这些都是技术上的问题，但它们的重要性并不相同。缺失规范标签的问题最为严重，不过谷歌其实并不要求必须使用规范标签，因此没有这种标签的页面并不会导致搜索排名出现问题。然而，当同一内容或非常相似的内容可以通过多个URL访问时，这个问题就会变得很重要了——这一点在关于规范标签的部分会有详细说明。

重复标题也是我曾经遇到过的问题：在编写代码时，很容易忽略这类细节。正因为如此，才有了专门用于检测这些问题的工具。

让我们一起来逐一看看这些问题，确保大家都能理解它们：

• 缺失规范标签：规范标签其实是你在HTML的〈head〉标签中添加的各种标签之一。当两个或三个页面的内容几乎相同时，规范标签可以帮助搜索引擎（比如谷歌）判断哪个URL是原始版本、主要版本，也就是你希望被收录的版本。不过，使用规范标签并不是强制性的；如果没有这个标签，谷歌也会自行选择主要版本。因此，这种标签主要适用于那些存在重复内容的页面。
• 重复标题：很容易就会出现两个页面拥有相同的标题的情况。重复标题是不应该出现的，因为这既没有帮助，还可能让谷歌感到困惑。每个页面都应该清楚地说明自己所介绍的内容。
• 缺失元描述：元描述非常重要，因为它不仅能帮助搜索引擎，还能辅助像ChatGPT这样的AI工具理解页面内容。元描述的作用是简要说明页面的主题和用途。如果你在谷歌上搜索某个网站，就会在链接下方看到它的元描述。
• 指向404错误页面的链接：这意味着你设置了一个失效的链接，这个链接会引导用户访问一个根本不存在的页面。因此，这样的链接应该被修改为指向类似内容或确实存在的页面，这样才能保证链接的有效性。
• 主要使用JavaScript构建的页面：谷歌能够执行JavaScript代码，所以仅仅因为页面使用了JavaScript，并不会导致它无法被谷歌收录。但是，只有当JavaScript代码加载并运行完成后，页面内容才会显示出来，而这个过程可能会消耗更多时间，也有可能出现错误。此外，并不是所有的搜索引擎爬虫都能执行JavaScript代码。因此，对于那些最重要的页面，我更倾向于使用〈a href="https://www.freecodecamp.org/news/server-side-rendering-in-next-js-for-improved-seo/">服务器端渲染技术。
• 搜索引擎无法跟随的链接：这个问题并不是特别严重，其影响主要取决于链接的目标页面。不过，如果你写了一篇很好的文章，并希望它能够帮助你在谷歌上获得好的排名，但如果搜索引擎无法跟随这个链接访问该文章，那么你为这篇文章投入的所有时间和精力可能就会白费了，因为很少有人会看到这篇文章。
• robots.txt文件中的错误：robots.txt文件的作用是帮助你向搜索引擎传达一些指令。如果这个文件中存在错误，就可能会阻止搜索引擎爬取那些你希望被收录在搜索结果中的页面。
• 被“noindex”或robots.txt文件阻止被收录的页面：这两者其实是不同的概念。“noindex”规则是要求搜索引擎不要将某个页面纳入搜索结果，而robots.txt文件则只是阻止搜索引擎爬取该页面而已。关于这两者的区别以及它们为何重要，你将在本教程的后半部分学到更多内容。

那些属于“软404错误”、重定向链问题以及错误的规范标签并没有被记录在表格中，因为审计流程并不会检测这些问题。

如何搭建测试网站

这个测试网站是一个专为虚构的“Acme Shoes”鞋店设计的简单网站。该网站的每个页面都包含一些预设的技术性SEO问题，但你并不需要了解其中每一行代码的具体含义。

创建一个新文件夹，添加一个名为server.js的文件，然后将以下代码粘贴到其中：

// server.js：一个包含常见技术性SEO问题的简单测试网站
const http = require('node:http');

const PORT = 8080;
const BASE = 'http://localhost:' + PORT;

// 创建一个简单的HTML页面。如果某个字段被省略了，相应的标签也会被忽略。
function page({ title, description, canonical, robots, body, script }) {
  return [
    '<!doctype html>',
    '<html lang="en">',
    '<head>",
    '<meta charset="utf-8">',
    title && '<title>' + title + '</title>',
    description && '<meta name="description" content="' + description + '">',
    canonical && '<link rel="canonical" href="' + BASE + canonical + '">',
    robots && '<meta name="robots" content="' + robots + '">',
    '</head>",
    '<body>',
    body,
    script && '<script>' + script + '</script>',
    '</body>',
    '</html>',
  ]
    .filter(Boolean)
    .join('\n');
}

const routes = {
  '/': {
    html: page({
      title: 'Acme Shoes：适合所有跑者的跑鞋',
      description: '轻便的公路及越野跑鞋，支持免费退货。",
      canonical: '',
      body: [
        '<h1>Acme Shoes</h1>',
        '<a href="/products/blue-runner">>Blue Runner<./a>',
        '<span onclick="location.href=\\'/sale\'\">夏季促销活动</span>',
      ].join('\n'),
    }),
  },
  // 问题：标题模糊且没有元描述
  '/products/blue-runner': {
    html: page({
      title: 'Acme Shoes',
      canonical: '/products/blue-runner',
      body: '<h1>Blue Runner</h1>',
    }),
  },
  // 问题：页面中缺少产品信息，但响应状态仍为“200 OK”（属于软404错误）
  '/products/red-runner': {
    html: page({
      title: 'Acme Shoes',
      body: '<h1>很抱歉，该商品无法找到。 /sale-2025 -> /sale
  '/old-sale': { redirect: '/sale-2025' },
  '/sale-2025': { redirect: '/sale' },
  '/sale': {
    html: page({
      title: '夏季促销：跑鞋最高优惠40% | Acme Shoes',
      description: "在8月31日之前，购买上一季的跑鞋可享受最高40%的折扣。",
      canonical: '/sale',
      body: '<h1>夏季促销活动</h1>',
    }),
  },
  // 问题：页面中设置了“noindex”头信息，但用户根本看不到
  '/about': {
    headers: { 'X-Robots-Tag': 'noindex' },
    html: page({
      title: '关于Acme Shoes',
      description: "一个由两个人组成的工作室是如何发展成一家跑鞋品牌的。",
      canonical: '/about',
      body: '<h1>关于我们</h1>',
    }),
  },
  // 问题：使用的规范标签指向的是首页
  '/blog/choosing-trail-shoes': {
    html: page({
      title: '如何选择越野跑鞋 | Acme Shoes',
      description: "抓地力、重量和舒适度：挑选越野跑鞋时需要注意的因素。",
      canonical: '',
      body: '<h1>如何选择越野跑鞋</h1>',
    }),
  },
  // 问题：只有在JavaScript代码执行完成后，内容才会显示出来
  '/catalog': {
    html: page({
      title: '所有跑鞋产品 | Acme Shoes',
      description: "浏览Acme品牌的所有跑鞋系列。",
      canonical: '/catalog',
      body: '<div id="app">>正在加载中…</div>',
      script:
        "fetch('/api/products').then((r) => r.json()).then((products) => {
          "document.getElementById('app').innerHTML = products.map((p) => '<h2>&' + p + '</h2>&'.join('');"
        });
      },
    }),
  },
  '/api/products': {
    type: 'application/json',
    html: JSON.stringify(['Blue Runner', 'Trail Grip 2', 'City Glide'],
  },
  // 问题："Disallow: /blog"这条规则会阻止所有以/blog开头的路径被访问
  '/robots.txt': {
    type: 'text/plain',
    html: 'User-agent: *\nDisallow: /blog\n',
  },
};

http
  .createServer((req, res) => {
    const path = new URL(req.url, BASE).pathname;
    const route = routes[path];

    if (!route) {
      res.writeHead(404, { 'Content-Type': 'text/html; charset=utf-8' });
      return res.end(page({ title: '页面未找到', body: '<h1>页面未找到</h1>' }));
    }
    if (route.redirect) {
      res.writeHead(301, { Location: routeredirect });
      return res.end();
    }
    res.writeHead(200, {
      'Content-Type': (route.type || 'text/html') + '; charset=utf-8',
      ...route.headers,
    });
    res.end(route.html);
  })
  .listen(PORT, () => console.log('测试网站已启动，地址为 ' + BASE));

请从同一个文件夹中启动服务器：

node server.js

你应该会看到如下输出：

练习网站正在运行，地址为 http://localhost:8080

让服务器保持运行状态，然后打开另一个终端来执行下面的命令。当你修改了 server.js 文件后，请使用 Ctrl+C 停止服务器，然后再重新启动它。

如何检查页面的 HTTP 状态码

我记得刚开始构建网站的时候，我会尝试制作各种小功能。作为一名全栈开发者，我总是喜欢不断进行各种实验。

有一次我在服务器端遇到了问题，通过 “网络” 标签页发现系统返回了 500 错误代码；还有一次，我故意删除了一个页面，想看看是否会收到 404 错误或其他异常信息。如果你经常对自己的网站进行各种测试，那么从这些结果中你一定能学到很多东西。

搜索引擎首先会读取 HTTP 状态码。这些状态码其实是服务器与客户端（比如你的浏览器）之间进行通信的方式。状态码被分为五个范围：1xx、2xx、3xx、4xx 和 5xx。其中，5xx 类型的状态码表示服务器端出现了问题，而 4xx 类型的状态码则表示客户端存在问题。

404 是最常见的错误代码，它表示网站中不存在该页面。你会经常遇到 404 错误，而解决这个问题的方法通常就是及时维护你的网站并检查链接是否正确。

在本教程中会遇到的一些常见的 HTTP 状态码包括：

• 200 OK：页面已经成功加载。
• 301 Moved Permanently：该页面已移动到其他地址。
• 404 Not Found：该页面不存在。

根据谷歌的相关文档，如果一个 URL 返回的是 4xx 状态码，那么谷歌不会对该页面进行索引。

要想查看练习网站首页的 HTTP 状态码，可以使用 -I 选项来仅显示响应头信息，同时使用 -s 选项来隐藏 curl 的进度条：

curl -sI http://localhost:8080/

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Date: Sun, 25 Oct 2026 17:42:53 GMT
Connection: keep-alive
Keep-Alive: timeout=5

现在，试着访问一个不在 routes 中列出的地址，看看正确的 404 错误响应是什么样的：

curl -sI http://localhost:8080/products/does-not-exist

HTTP/1.1 404 Not Found
Content-Type: text/html; charset=utf-8
Date: Sun, 25 Oct 2026 17:42:53 GMT
Connection: keep-alive
Keep-Alive: timeout=5

在浏览器中，打开开发者工具（按 F12 键，或在 Mac 上按 Cmd+Option+I），然后进入 “网络” 标签页，重新加载页面。此时，“状态” 列会显示相应的 HTTP 状态码。

什么是“软404错误”？

测试一下商店中已不再出售的商品：

curl -sI http://localhost:8080/products/red-runner

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Date: Sun, 25 Oct 2026 17:42:53 GMT
Connection: keep-alive
Keep-Alive: timeout=5

在浏览器中，会看到这样的提示：“抱歉，该商品无法找到。”

“软404错误”本质上就是“页面未找到”，但服务器仍然会返回200状态码。这种情况会让谷歌感到困惑，因为地址依然存在，但页面内容已经过时了。

为了解决这个问题，应该让这些不存在的页面真正返回404状态码，这也是谷歌所推荐的。在测试环境中，可以将'/products/red-runner'这条链接从routes配置文件中删除，这样服务器就会返回404状态码。

失效的链接也会导致同样的问题。在我们的测试数据中，53个被爬取的网站中有18.9%的网站至少包含一个会返回404状态码的链接。

因此，请不要留下那些指向不存在内容的链接。应该将它们更新为指向类似内容或确实存在的内容。

如果某个页面的位置发生了变化，就需要在旧地址和新地址之间设置301重定向规则。只有当页面真的已经消失时，才应该使用404状态码。

如何查找并修复重定向链

重定向的本质就是将一个URL链接指向另一个URL链接。例如，当你将域名从example-x.com更改为example-y.com时，就需要设置重定向规则，这样所有输入example-x.com的访问者都会被自动重定向到example-y.com。

正确使用重定向规则是非常有用的。301状态码表示页面已经永久性迁移；而302状态码则表示迁移是暂时的。谷歌在重定向规则说明中详细解释了如何处理这些不同的情况，而且它的爬虫会跟踪最多10次重定向操作。

但是，当一个旧地址（比如你之前使用过的域名）首先重定向到一个新地址，而这个新地址又继续进行其他重定向时，就会形成所谓的“重定向链”。少量的重定向并不会造成太大问题，但如果有五次、六次甚至七次重定向，那就真的会带来麻烦了。

curl -sIL http://localhost:8080/old-sale

HTTP/1.1 301 Permanent Move
Location: /sale-2025
Date: Sun, 25 Oct 2026 17:42:53 GMT
Connection: keep-alive
Keep-Alive: timeout=5

HTTP/1.1 301 Permanent Move
Location: /sale
Date: Sun, 25 Oct 2026 17:42:53 GMT
Connection: keep-alive
Keep-Alive: timeout=5

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Date: Sun, 25 Oct 2026 17:42:53 GMT
Connection: keep-alive
Keep-Alive: timeout=5

下面的第一个命令会显示整个重定向链的每一个步骤，而第二个命令则能提供简短的总结。

curl -sIL -L http://localhost:8080/old-sale

HTTP/1.1 301 Permanent Move
Location: /sale-2025
Date: Sun, 25 Oct 2026 17:42:53 GMT
Connection: keep-alive
Keep-Alive: timeout=5

HTTP/1.1 301 Permanent Move
Location: /sale
Date: Sun, 25 Oct 2026 17:42:53 GMT
Connection: keep-alive
Keep-Alive: timeout=5

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Date: Sun, 25 Oct 2026 17:42:53 GMT
Connection: keep-alive
Keep-Alive: timeout=5

curl -sL -o /dev/null -w "%{num_redirects} 重定向操作，最终指向 %{url_effective}\n" http://localhost:8080/old-sale

如何确保 robots.txt 不会阻止重要页面被索引

如何发现意外设置的 “noindex” 规则

在本次检测的数据中，457个被审核的页面中有11个（占比2.4%）包含了noindex这个robots元标签。有两种方法可以设置这个标签，你需要检查这两种方法是否都已被正确应用。

如何检查robots元标签

第一种方法是在页面的标签中添加相应代码：

<meta name="robots" content="noindex">

你可以通过以下命令在浏览器中查看该页面是否包含这个元标签：

curl -s http://localhost:8080/about | grep -i noindex

curl -sI http://localhost:8080/about

https://example.com/blog/choosing-trail-shoes
https://example.com/blog/choosing-trail-shoes?utm_source=newsletter
https://www.example.com/blog/choosing-trail-shoes

<link rel="canonical" href="https://example.com/blog/choosing-trail-shoes">

curl -s http://localhost:8080/blog/choosing-trail-shoes | grep -i canonical

<link rel="canonical" href="http://localhost:8080/">

canonical: '/blog/choosing-trail-shoes',

curl -s http://localhost:8080/products/blue-runner | grep -i -E "<title>|name=\"description\""

<>title>Acme Shoes<>/title>

标题：Blue Runner公路跑鞋 | Acme Shoes，
描述：这款公路跑鞋采用轻质材料制成，鞋底具有缓冲功能，且支持免费退货。

curl -s http://localhost:8080/

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>>Acme Shoes：适合所有跑者的跑鞋
<link rel="canonical" href="http://localhost:8080/">
</head>
<body>
<h1>Acme Shoes
<a href="/products/blue-runner">>Blue Runner
<span onclick="location.href('/sale'">>夏季促销活动
</body>>
</html>

'夏季促销活动'