跳到主要內容

標題和 Meta 標籤

變更標題標籤​

您可以在已產生專案的 public 資料夾中找到 HTML 原始檔。在其中編輯 <title> 標籤，即可將標題從「React App」改成其他名稱。

請注意，通常您不會頻繁地編輯 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 讀入記憶體中，根據當前 URL，以不同的值取代 __OG_TITLE__、__OG_DESCRIPTION__ 和其它佔位符。請務必清除並轉譯插入的值，以確保它們可以安全地嵌入於 HTML！

如果你使用 Node 伺服器，你甚至可以在用戶端和伺服器端之間共享路由比對的邏輯。但是，在基本情境中重複這個邏輯就可以了。

從伺服器端注入資料到頁面中​

類似於前一章節，你可以在 HTML 中留一些佔位符來注入全域變數，例如

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

然後，在伺服器端，你可以在發送回應之前取代 __SERVER_DATA__ 為真實資料的 JSON。用戶端程式碼接著可以讀取 window.SERVER_DATA 來使用它。務必在將 JSON 傳送給用戶端之前 清除 JSON，因為它會讓你的應用程式容易受到 XSS 攻擊。