跳至主要内容

标题和元标签

更改标题标签​

你可以在生成的项目中的 public 文件夹中找到源 HTML 文件。你可以编辑其中的 <title> 标签，将标题从“React 应用”更改为其他任何内容。

请注意，通常情况下，你不会经常编辑 public 文件夹中的文件。例如，添加样式表 可以在不触碰 HTML 的情况下完成。

如果你需要根据内容动态更新页面标题，可以使用浏览器 document.title API。对于更复杂的场景，如果你想从 React 组件中更改标题，可以使用 React Helmet，这是一个第三方库。

如果您在生产环境中使用自定义服务器来运行您的应用程序，并且想要在发送到浏览器之前修改标题，您可以参考本节中的建议。或者，您可以将每个页面预先构建为静态 HTML 文件，然后加载 JavaScript 包，这在这里有介绍。

在服务器上生成动态 <meta> 标签​

由于 Create React App 不支持服务器渲染，您可能想知道如何使 <meta> 标签动态化并反映当前 URL。为了解决这个问题，我们建议在 HTML 中添加占位符，例如

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta property="og:title" content="__OG_TITLE__" />
    <meta property="og:description" content="__OG_DESCRIPTION__" />
  </head>
</html>

然后，在服务器上，无论您使用哪种后端，都可以将 index.html 读取到内存中，并将 __OG_TITLE__、__OG_DESCRIPTION__ 和任何其他占位符替换为根据当前 URL 的值。确保对插值的字符串进行清理和转义，以确保它们安全地嵌入到 HTML 中！

如果您使用的是 Node 服务器，您甚至可以共享客户端和服务器之间的路由匹配逻辑。但是，在基本情况下，重复它也很好。

将数据从服务器注入页面​

与上一节类似，您可以在 HTML 中保留一些占位符，用于注入全局变量，例如

<!doctype html>
<html lang="en">
  <head>
    <script>
      window.SERVER_DATA = __SERVER_DATA__;
    </script>

然后，在服务器上，您可以在发送响应之前将 __SERVER_DATA__ 替换为真实数据的 JSON。然后，客户端代码可以读取 window.SERVER_DATA 来使用它。请确保在将 JSON 发送到客户端之前对其进行清理，因为它会使您的应用程序容易受到 XSS 攻击。