4808 字
24 分钟
十分钟搞懂腾讯公益404
2026-05-01
技术教程
公益
/
腾讯公益404
/
建站教程
/
前端开发
/
失踪儿童

十分钟搞懂腾讯公益404#

前言#

做网站的人都遇到过404页面，也就是”页面找不到”的提示。正常情况下，我们会写一些”抱歉，页面不存在”之类的文案然后就没了。但你知道吗，其实404页面还有一种更有意义的玩法——接入腾讯公益404。

腾讯公益404是腾讯推出的一项公益功能，当你网站的某个页面找不到时，页面会显示失踪儿童的信息。如果有用户刚好看到这个页面，说不定就能提供线索帮助这些孩子回家。相比于传统的”404 - Page Not Found”，这种设计明显更有温度。

这篇文章就来聊聊怎么给自己的网站加上这个功能，不管你用的是Astro、WordPress还是Hexo，都能找到对应的解决方案。

一、什么是腾讯公益404#

1.1 腾讯公益404是什么#

腾讯公益404是腾讯搜索和腾讯公益联合推出的一项公益产品。这个产品的核心理念是：让每一个404页面都变成帮助失踪儿童回家的希望。

具体的实现方式是，当网站接入这个功能后，一旦有用户访问一个不存在的页面，页面就会展示失踪儿童的照片、姓名、性别、年龄等信息。同时页面上会有”宝贝回家”的字样和跳转链接，方便有心人直接联系宝贝回家官方提供线索。

根据腾讯公益2025年发布的数据，腾讯公益404项目自上线以来，已经帮助超过200名失踪儿童回家。这个数字背后是200多个家庭的团聚，想想就觉得这是一件特别有意义的事情。

1.2 为什么网站应该接入#

可能有小伙伴会问，我的网站就是个个人博客，又不是什么大平台，接入这个有什么用？

其实这个想法挺常见的误区。首先，流量大小不是衡量公益价值的唯一标准。哪怕你的网站每天只有100个访问者，假设其中有一个人刚好认识某个失踪儿童的家庭，那就能产生奇迹。

其次，接入腾讯公益404的成本几乎为零。不需要你掏一分钱，也不需要你写多少代码，十分钟就能搞定。但就是这么一个小小的举动，说不定就能改变一个孩子的命运。

再说了，404页面反正都是要做的，与其做得很敷衍，不如做得有意义一点。还能给自己网站的用户传达一种”我们关心社会议题”的形象，一举多得。

1.3 工作原理#

从技术角度来说，腾讯公益404的原理很简单：

  1. 腾讯提供了一个JavaScript脚本，地址是 //qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js
  2. 把这个脚本引入到你的404页面中
  3. 当页面加载时，脚本会自动调用腾讯的接口，获取失踪儿童的信息并展示出来
  4. 用户如果发现相关线索，可以通过页面上的联系方式进行举报

整个过程是纯前端实现的，不需要后端配合，对服务器也没有额外的要求。

二、手动接入方法#

2.1 最简单的方法：直接引入JS#

不管你用的是什么建站框架，最基础的方法就是直接在404页面里引入腾讯公益提供的脚本。

标准的引入代码是这样的：

<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8"></script>

只需要这一行代码，就能完成接入。脚本会自动在页面上渲染出失踪儿童的信息，你不需要写任何额外的HTML或CSS。

如果你想在页面加载后延迟一点再显示，可以使用以下代码：

<script type="text/javascript">
// 延迟3秒后显示公益404内容
setTimeout(function() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js';
    script.charset = 'utf-8';
    document.body.appendChild(script);
}, 3000);
</script>

这样设计的好处是，如果用户只是暂时网络不好导致页面加载失败，稍等一会儿刷新就能正常访问。但如果真的等了3秒还没反应，那大概率是真的找不到了，这时候再显示公益信息就合情合理。

2.2 静态页面手动创建404#

如果你用的是纯静态的网站，比如直接用HTML文件搭建的那种，那你需要手动创建一个404.html文件。

首先在网站根目录创建一个名为404.html的文件，然后把下面的代码粘贴进去：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - 页面不存在</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
        }
        .container {
            text-align: center;
            max-width: 600px;
        }
        h1 {
            font-size: 72px;
            margin: 0;
            color: #ee4a4a;
        }
        p {
            font-size: 18px;
            line-height: 1.6;
            margin: 20px 0;
        }
        a {
            color: #007bff;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>404</h1>
        <p>抱歉，您访问的页面不存在或已被删除。</p>
        <p><a href="/">返回首页</a></p>
    </div>
    <!-- 腾讯公益404 -->
    <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8"></script>
</body>
</html>

然后把文件上传到你的服务器就行了。需要注意一点，服务器要能够正确返回404状态码，而不是200。否则搜索引擎会认为你这个页面是真实存在的，对SEO不利。

2.3 注意事项#

接入腾讯公益404的时候，有几个小细节需要注意：

第一个是脚本加载失败的问题。由于腾讯公益的脚本托管在腾讯的服务器上，国内访问通常没问题。但如果你的网站有海外用户，他们可能加载不出来。针对这种情况，建议在脚本加载失败时提供一个兜底方案，比如显示一个默认的404提示：

<script type="text/javascript">
try {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js';
    script.charset = 'utf-8';
    script.onerror = function() {
        // 脚本加载失败时的兜底处理
        console.log('公益404加载失败');
    };
    document.body.appendChild(script);
} catch (e) {
    console.log('公益404初始化失败:', e);
}
</script>

第二个是页面的HTTP状态码。404页面必须返回404状态码，否则搜索引擎会把你这个不存在的页面当真实页面处理，可能导致各种奇怪的问题。

第三个是移动端适配。虽然腾讯公益的脚本本身已经做了移动端适配，但如果你的网站有自己的404页面样式，最好也确保在手机上显示正常。

三、Astro框架接入教程#

3.1 Astro项目结构#

Astro是这几年特别火的静态网站框架，很多个人博客都用它。它的好处是默认输出纯HTML，对SEO很友好，而且支持各种框架的组件。

在Astro项目里添加404页面很简单。Astro默认会识别src/pages/404.astro作为404页面的模板，所以我们只需要创建这个文件就行。

先看一下你的Astro项目结构，通常是这样的：

src/
  pages/
    index.astro
    404.astro    <-- 需要创建这个文件
    about.astro
  layouts/
    Layout.astro
  components/
    Header.astro
    Footer.astro

3.2 创建404.astro#

在src/pages/目录下创建一个名为404.astro的文件，内容如下：

---
import Layout from '../layouts/Layout.astro';
---


<Layout title="404 - 页面未找到">
  <main class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
    <div class="text-center px-4">
      <h1 class="text-6xl font-bold text-red-500 mb-4">404</h1>
      <p class="text-xl text-gray-600 dark:text-gray-300 mb-8">
        抱歉，您访问的页面不存在或已被删除。
      </p>
      <a href="/" class="inline-block px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
        返回首页
      </a>
    </div>
  </main>


  <!-- 腾讯公益404 -->
  <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8"></script>
</Layout>

这个是最基础的版本，足够用了。不过如果你想做得更完善一点，可以参考下面的代码，加入更多的样式和功能：

---
import Layout from '../layouts/Layout.astro';
---


<Layout title="404 - 页面未找到" description="您访问的页面不存在">
  <main class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 px-4">
    <div class="max-w-lg w-full text-center">
      <div class="mb-8">
        <span class="text-9xl font-black text-transparent bg-clip-text bg-gradient-to-r from-red-400 to-pink-500">
          404
        </span>
      </div>


      <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">
        页面不存在
      </h1>


      <p class="text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
        别慌，这只是说明你要找的页面可能在火星上度假去了。<br>
        不如先回到首页看看，说不定有意外收获呢？
      </p>


      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="/"
           class="px-8 py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-full font-medium hover:from-blue-600 hover:to-blue-700 transition shadow-lg hover:shadow-xl">
          返回首页
        </a>
        <a href="/blog"
           class="px-8 py-3 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-full font-medium border border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 transition">
          浏览文章
        </a>
      </div>


      <p class="mt-12 text-sm text-gray-400">
        如果你认为这是一个错误，请
        <a href="mailto:your-email@example.com" class="text-blue-500 hover:underline">
          联系站长
        </a>
      </p>
    </div>
  </main>


  <!-- 腾讯公益404 - 延迟加载 -->
  <script is:inline>
    window.addEventListener('load', function() {
      setTimeout(function() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = '//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js';
        script.charset = 'utf-8';
        script.async = true;
        document.body.appendChild(script);
      }, 2000);
    });
  </script>
</Layout>

3.3 配置服务器#

Astro默认的静态输出会生成一个404.html文件，大多数托管平台会自动识别它。但如果你用的是Node.js服务器或者部署到自己服务器上，可能需要额外配置。

以Express为例，在服务器入口文件中添加：

const express = require('express');
const app = express();


app.use(express.static('dist'));


// 404处理
app.use((req, res, next) => {
  res.status(404).sendFile(__dirname + '/dist/404.html');
});


app.listen(3000);

3.4 Vercel部署#

如果你的Astro网站部署在Vercel上，需要在项目根目录创建一个vercel.json文件来指定404页面：

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/404" }
  ]
}

这样当用户访问不存在的页面时，Vercel就会自动显示你的404页面。

四、WordPress接入方法#

4.1 主题文件方式#

WordPress是占有率最高的CMS系统，接入腾讯公益404也很简单。

首先登录WordPress后台，进入”外观” -> “主题文件编辑器”，然后在右侧找到”404模板（404.php）“。如果你的主题没有这个文件，就需要创建一个。

在404.php文件中加入以下代码：

<?php
/**
 * The template for displaying 404 pages (not found)
 */


get_header();
?>


<style>
.error-404 {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}
.error-404 h1 {
    font-size: 120px;
    font-weight: bold;
    color: #ff6b6b;
    margin: 0;
    line-height: 1;
}
.error-404 h2 {
    font-size: 24px;
    margin: 20px 0;
    color: #333;
}
.error-404 p {
    color: #666;
    max-width: 400px;
    line-height: 1.6;
}
.error-404 .btn {
    display: inline-block;
    margin-top: 30px;
    padding: 12px 30px;
    background: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    transition: background 0.3s;
}
.error-404 .btn:hover {
    background: #0056b3;
}
</style>


<main class="error-404">
    <h1>404</h1>
    <h2>页面走丢了</h2>
    <p>哎呀，你访问的页面可能去火星度假了，或者已经被删除。不如回到首页找找看？</p>
    <a href="<?php echo home_url(); ?>" class="btn">返回首页</a>
</main>


<!-- 腾讯公益404 -->
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8"></script>


<?php
get_footer();

4.2 插件方式#

如果不想改代码，可以用插件。推荐使用”Custom 404 Pro”或者”404page”这两个插件。

安装并激活插件后，在插件设置中找到”404 Page Content”或类似的选项，把腾讯公益的脚本添加进去就行。

不过插件方式可能不支持直接添加JavaScript代码，这种情况下可以创建一个自定义的404页面模板，然后在插件中指定使用这个模板。

五、Hexo接入方法#

Hexo是另一个流行的静态博客框架，基于Node.js开发。

Hexo的404页面需要在source目录下创建一个404.md或404.html文件。

5.1 使用Markdown方式#

在source/目录下创建404.md：

---
title: 404 - 页面未找到
date: 2026-04-19
layout: 404
---


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - 页面未找到</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .container { text-align: center; padding: 20px; }
        h1 { font-size: 150px; margin-bottom: 20px; }
        p { font-size: 20px; margin-bottom: 30px; opacity: 0.9; }
        a {
            display: inline-block;
            padding: 15px 40px;
            background: #fff;
            color: #667eea;
            text-decoration: none;
            border-radius: 30px;
            font-weight: bold;
            transition: transform 0.3s;
        }
        a:hover { transform: scale(1.05); }
    </style>
</head>
<body>
    <div class="container">
        <h1>404</h1>
        <p>哎呀，页面走丢了，让我们回到首页吧</p>
        <a href="/">返回首页</a>
    </div>
    <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8"></script>
</body>
</html>

5.2 部署到GitHub Pages#

如果你的Hexo博客部署在GitHub Pages上，GitHub会自动识别404.html文件。但需要注意，Hexo默认不会把source目录下的HTML文件复制到public目录，所以需要在_config.yml中配置：

skip_render:
  - 404.html

这样Hexo在构建时就会把404.html原封不动地复制到输出目录。

六、其他平台接入方法#

6.1 GitHub Pages#

GitHub Pages会自动处理404页面。你只需要在仓库的根目录（或docs目录，取决于你的配置）创建一个404.html文件，内容和前面提到的静态页面一样就行。

不过GitHub Pages的404页面有一些限制，比如不能使用服务器端脚本（PHP之类的），纯前端方案是完全支持的。

6.2 Netlify#

Netlify也支持自定义404页面。只需要在项目根目录创建404.html即可，Netlify会自动识别并使用它。

有意思的是，Netlify还支持在构建时动态生成404页面，比如根据Netlify的Identity功能显示不同的内容。不过对于腾讯公益404来说，普通的HTML文件就够了。

6.3 宝塔面板#

如果你是用宝塔面板管理服务器，创建404页面就更容易了。

  1. 登录宝塔面板
  2. 进入网站设置
  3. 找到”默认文档”设置，确保里面有404.html
  4. 或者在”配置文件”中手动添加 error_page 404 /404.html;

宝塔支持直接编辑404页面的HTML内容，你可以在面板的可视化编辑器里粘贴腾讯公益的脚本。

七、常见问题解答#

7.1 脚本加载失败怎么办#

有时候用户访问404页面时，腾讯公益的脚本可能会加载失败（网络问题、CDN故障等）。为了不影响用户体验，建议添加一个加载失败的兜底处理：

<script type="text/javascript">
(function() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js';
    script.charset = 'utf-8';
    script.onerror = function() {
        // 脚本加载失败时显示默认的404提示
        var fallback = document.createElement('div');
        fallback.innerHTML = '<div style="text-align:center;padding:50px;"><h2>页面未找到</h2><p>抱歉，您访问的页面不存在。</p><a href="/">返回首页</a></div>';
        document.body.appendChild(fallback);
    };
    document.body.appendChild(script);
})();
</script>

7.2 不显示失踪儿童信息怎么办#

有些小伙伴反馈说加上代码后页面还是显示默认的”Page Not Found”，而不是腾讯公益的失踪儿童信息。

这种情况通常有几个原因：

第一个是页面没有返回404状态码。你可以打开浏览器开发者工具，查看Network标签，看看404页面的HTTP状态码是不是404。

第二个是脚本被广告拦截器拦截了。一些广告拦截插件可能会把腾讯公益的脚本也当成广告拦截掉。这种情况需要用户在浏览器里把网站加入白名单。

第三个是浏览器缓存问题。试试清除浏览器缓存，或者用无痕模式访问。

7.3 是否会影响SEO#

这是很多站长关心的问题。

答案是不会。搜索引擎的爬虫在遇到404页面时会自动识别，不会把404页面当成正常页面收录。而且腾讯公益的脚本是在页面加载后才执行的，不会影响页面的初始内容和搜索引擎的抓取。

不过需要注意的是，网站上不要有太多的死链接，这会对SEO产生负面影响。建议定期使用Google Search Console或百度站长工具检查网站的死链接情况。

7.4 可以自定义显示样式吗#

腾讯公益提供的脚本是统一标准的，样式没办法自定义。不过如果你有一定的技术能力，可以通过CSS覆盖一些样式：

/* 尝试覆盖一些样式，但可能不生效 */
#search_children_404 {
    /* 你的自定义样式 */
}

实际上腾讯公益的脚本渲染出来的DOM结构是固定的，样式覆盖的效果可能有限。如果你想完全自定义样式，可能需要自己调用腾讯公益的API来获取数据，然后自己渲染页面。不过这样做比较复杂，不推荐新手尝试。

八、进阶玩法#

8.1 结合Analytics统计#

如果你想统计一下404页面的访问情况，可以在页面上加入统计代码：

<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>


<!-- 腾讯公益404 -->
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8"></script>

这样你就能在Google Analytics里看到404页面的访问数据了，包括访问来源、搜索关键词等信息。通过分析这些数据，你可以了解用户是怎么迷路到你网站的，然后优化网站的导航结构。

8.2 自动提交死链到百度#

如果你的网站有死链被百度收录了，还可以通过百度搜索资源平台提交死链。百度提供了一个死链提交的功能，你只需要把网站上存在的死链整理成一个文本文件，然后提交给百度就行。

格式是这样的，每行一条死链：

https://example.com/page-not-exist
https://example.com/old-page
https://example.com/misspelled-url

把这个文件上传到网站根目录，然后在百度搜索资源平台的”死链提交”功能里提交这个文件的地址就行。

8.3 和其他公益项目结合#

腾讯公益404只是公益404的一种形式，其实还有其他的公益404项目可以接入：

第一个是字节跳动的”头条寻人”公益项目，也是类似的功能，可以在今日头条的404页面展示寻人信息。

第二个是阿里巴巴的”团圆系统”，主要是通过地理位置推送失踪儿童信息给附近的人。

如果你的网站流量比较大，可以考虑同时接入多个公益项目，让404页面发挥更大的价值。

九、总结#

接入腾讯公益404真的是一件特别简单但又特别有意义的事情。十分钟不到就能搞定，不需要任何费用，也不影响网站性能和用户体验。

404页面是每个网站都会遇到的情况，传统做法就是简单粗暴地告诉用户”页面不存在”。但加上腾讯公益404之后，同样的情况就多了一层含义——说不定哪个迷路的用户就因为这个页面帮助了一个家庭团聚。

这种”举手之劳做公益”的理念我觉得特别赞。不需要你捐钱，不需要你花时间精力，只要把一行代码加到404页面里，就能让每一次404都变成一份希望。

所以还在等什么呢，赶紧给你网站加上这个功能吧。十分钟的事情，可能改变一个孩子的命运。

如果你在接入过程中遇到任何问题，欢迎在评论区留言，我会尽量解答。也欢迎已经接入的小伙伴分享你们的经验和心得，大家一起交流进步。

最后，希望天下所有走失的孩子都能早日回家。

十分钟搞懂腾讯公益404
https://240900.xyz/posts/十分钟搞懂腾讯公益404/
作者
临明小狐狸
发布于
2026-05-01
许可协议
CC BY-NC-SA 4.0
Markdown语法兼容性测试
不再维护napcat插件转而制作基于Python的高性能插件系统
© 2026 临明小狐狸. All Rights Reserved. / RSS / Sitemap
Powered by Astro & Fuwari
萌ICP备20250341号