跳至主要內容
版本：3.5.2

搜尋引擎最佳化 (SEO)

Docusaurus 提供各種不同的搜尋引擎最佳化方式。

全域性元資料​

透過 網站設定 來提供整個網站的全域性 meta 屬性。元資料全部會在 HTML <head> 中呈現，作為 prop 的名稱和值。metadata 屬性是一個便利的捷徑，可以用來宣告 <meta> 標籤，但也可以用 headTags 屬性來在 <head> 中插入任意的標籤。

docusaurus.config.js
export default {
  themeConfig: {
    // Declare some <meta> tags
    metadata: [
      {name: 'keywords', content: 'cooking, blog'},
      {name: 'twitter:card', content: 'summary_large_image'},
    ],
  },
  headTags: [
    // Declare a <link> preconnect tag
    {
      tagName: 'link',
      attributes: {
        rel: 'preconnect',
        href: 'https://example.com',
      },
    },
    // Declare some json-ld structured data
    {
      tagName: 'script',
      attributes: {
        type: 'application/ld+json',
      },
      innerHTML: JSON.stringify({
        '@context': 'https://schema.org/',
        '@type': 'Organization',
        name: 'Meta Open Source',
        url: 'https://opensource.fb.com/',
        logo: 'https://opensource.fb.com/img/logos/Meta-Open-Source.svg',
      }),
    },
  ],
};

Docusaurus 預設會加入一些元資料。例如，如果您已設定 國際化，您就可以取得 hreflang 備份連結。

要閱讀更多關於 meta 標籤類型的資訊，請瀏覽 MDN 文件。

單頁式的 meta 資料​

與 全域 meta 資料 類似，Docusaurus 也允許對個別頁面新增 meta 資訊。請依循 這個指南 來設定 <head> 標籤。簡而言之：

my-markdown-page.mdx
# A cooking guide

<head>
  <meta name="keywords" content="cooking, blog" />
  <meta name="twitter:card" content="summary_large_image" />
  <link rel="preconnect" href="https://example.com" />
  <script type="application/ld+json">
    {JSON.stringify({
      '@context': 'https://schema.org/',
      '@type': 'Organization',
      name: 'Meta Open Source',
      url: 'https://opensource.fb.com/',
      logo: 'https://opensource.fb.com/img/logos/Meta-Open-Source.svg',
    })}
  </script>
</head>

Some content...

Docusaurus 會自動在每個 Markdown 頁面中加入 description、title、正規 URL 連結和其它有用的 meta 資料。這些資訊可以透過 前置設定 來進行設定。

---
title: Title for search engines; can be different from the actual heading
description: A short description of this page
image: a thumbnail image to be shown in social media cards
keywords: [keywords, describing, the main topics]
---

當你在建立 React 頁面時，在 Layout 中新增這些欄位也能改善 SEO。

提示

對於像 description 和 keywords 等欄位，請優先使用 前置設定：Docusaurus 會自動將這兩者套用到 description 和 og:description 中，而使用 <head> 標籤時，你必須手動宣告兩個 meta 資料標籤。

資訊

官方的擴充功能都支援下列 前置設定：title、description、keywords 和 image。如需額外的 前置設定 支援，請參閱它們各自的 API 文件：

對於 JSX 頁面，你可以使用 Docusaurus <Head> 元件。

my-react-page.jsx
import React from 'react';
import Layout from '@theme/Layout';
import Head from '@docusaurus/Head';

export default function page() {
  return (
    <Layout title="Page" description="A React page demo">
      <Head>
        <meta property="og:image" content="image.png" />
        <meta name="twitter:card" content="summary_large_image" />
        <link rel="preconnect" href="https://example.com" />
        <script type="application/ld+json">
          {JSON.stringify({
            '@context': 'https://schema.org/',
            '@type': 'Organization',
            name: 'Meta Open Source',
            url: 'https://opensource.fb.com/',
            logo: 'https://opensource.fb.com/img/logos/Meta-Open-Source.svg',
          })}
        </script>
      </Head>
      {/* ... */}
    </Layout>
  );
}
提示

為了方便起見，預設佈景主題的 <Layout> 元件接收 title 和 description 作為 props。

靜態 HTML 產生​

Docusaurus 是一個靜態網站產生器，會為每個 URL 路徑靜態產生 HTML 檔案，這能幫助搜尋引擎更容易地探索你的內容。

圖片 meta 描述​

圖片的替代文字標籤會告訴搜尋引擎圖片的內容，並且會在無法以視覺方式觀看圖片時使用，例如使用螢幕閱讀器時或圖片損毀時。Markdown 通常支援替代文字標籤。

你也可以為圖片新增標題—這並不會對 SEO 產生太大影響，但在圖片上方懸停時會顯示為提示，通常用於提供提示。

![Docusaurus banner](./assets/docusaurus-asset-example-banner.png 'Image title')
https://127.0.0.1:3000

Docusaurus banner

豐富搜尋資訊​

Docusaurus 部落格支援 豐富搜尋結果，能提供絕佳的搜尋引擎體驗。這些資訊會根據部落格/全球設定中的元資訊建立。若要獲得豐富搜尋資訊的優點，請填寫有關文章發表日期、作者、圖片等資訊。在此處深入了解元資訊 在此處。

robots 檔案​

robots.txt 檔案可規範搜尋引擎的行為，關於哪些應顯示或哪些不應顯示。你可以將它提供為 靜態資源。以下會允許所有子頁面接受所有要求

static/robots.txt
User-agent: *
Disallow:

在 Google 文件中深入了解 robots 檔案。

警告

重要事項：robots.txt 檔案並不會阻止 HTML 頁面建立索引。

若要避免索引 Docusaurus 整個網站，請使用 noIndex 網站設定。某些 主機提供商 也可能可讓你設定 X-Robots-Tag: noindex HTTP 標頭（GitHub Pages 不支援這個標頭）。

若要避免索引單一頁面，請使用 <meta name="robots" content="noindex"> 作為 頁面元資料。深入了解 robots 元標籤。

Sitemap 檔案​

Docusaurus 提供 @docusaurus/plugin-sitemap 外掛程式，它會在預設情況下隨 preset-classic 運送。它會自動產生一個 sitemap.xml 檔案，而且在生產版本建立後會在 https://example.com/[baseUrl]/sitemap.xml 中提供。這個 Sitemap 元資料可幫助搜尋引擎的爬蟲程式更精確地爬行你的網站。

提示

網站地圖外掛程式會自動過濾含有 noindex robots meta 指示訊息 的頁面。

例如，/examples/noIndex 並未包含於 Docusaurus sitemap.xml 檔案 中，因為它含有下列 頁面中繼資料

<head>
  <meta name="robots" content="noindex, nofollow" />
</head>

Docusaurus 使用你的檔案名稱作為連結，但你可以隨時使用縮寫名稱來變更此名稱，請參閱此 教學 以取得更多詳細資料。

結構化內容​

搜尋引擎依賴於 HTML 標記，例如 <h2>、<table> 等，以瞭解網頁的結構。當 Docusaurus 呈現你的頁面時，語意標記（例如 <aside>、<nav>、<main>）會用來區分頁面的不同區塊，協助搜尋引擎找到側欄、導覽條和主頁面內容等部分。

大部分 CommonMark 語法具有相應的 HTML 標籤。透過在專案中一致地使用 Markdown，將有助於搜尋引擎瞭解你的頁面內容。

編輯此頁面
上次更新時間於 由 Sébastien Lorber 更新