SEO：元數據 | Next.js

元數據是網站內容的摘要，用於為網站附加標題、描述和圖片。

標題 (Title)

標題標籤是最重要的 SEO 元素之一，主要有兩個原因：

首先，這是使用者從搜尋結果點擊進入您的網站時看到的內容。

其次，這是 Google 用來理解您頁面內容的主要元素之一。建議在標題中使用關鍵字，因為這通常能提高搜尋引擎排名。

以下是一個範例：

<title>iPhone 12 XS Max For Sale in Colorado - Big Discounts | Apple</title>

此頁面包含所有主要關鍵字，並透過顯示明確的價值主張（折扣！）來吸引使用者。

描述 (Description)

描述元標籤是另一個重要的 SEO 元素，但其重要性低於標題。根據 Google 的說法，此元素不會影響排名，但可能會影響搜尋結果的點擊率。

使用描述元標籤來補充標題中的資訊。如果有些關鍵字無法放入標題，可以在描述中加入更多關鍵字。如果使用者的搜尋包含這些關鍵字，它們會以粗體顯示。

HTML 中的描述元標籤範例：

<meta
  name="description"
  content="Check out iPhone 12 XR Pro and iPhone 12 Pro Max. Visit your local store and for expert advice."
/>

這是它在搜尋引擎結果頁面 (SERP) 上顯示的樣子：

包含標題與描述的 SERP 片段範例

在 Next.js 中，我們透過 Head 組件設定標題和描述。以下是 Next.js 中元標題和描述標籤的範例：

import Head from 'next/head';
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>
          iPhone 12 XS Max For Sale in Colorado - Big Discounts | Apple
        </title>
        <meta
          name="description"
          content="Check out iPhone 12 XR Pro and iPhone 12 Pro Max. Visit your local store and for expert advice."
          key="desc"
        />
      </Head>
      <h1>iPhones for Sale</h1>
      <p>insert a list of iPhones for sale.</p>
    </div>
  );
}
 
export default IndexPage;

Head 組件可以用於應用程式中的任何頁面，以描述或提供頁面內容的相關資訊。

Open Graph

Open Graph 協議最初由 Facebook 開發，用於標準化網頁元數據的使用方式。您可以提供任意數量的資訊，但所有 Open Graph 元素共同構成了網站的代表。

其他社交媒體公司（如 Pinterest、Twitter、LinkedIn 等）也可能使用 Open Graph 來顯示分享 URL 時的豐富卡片。Twitter 還有自己的 Twitter 卡片標籤。

雖然這些 Open Graph 標籤與 SEO 相關標籤有許多相似之處，但它們對搜尋引擎排名沒有任何幫助。不過，仍然建議使用它們，因為人們可能會在社交媒體或 WhatsApp、Telegram 等私人通訊工具上分享您的內容。

您可以透過在 Head 組件內的 meta 標籤中定義 property 屬性來添加 Open Graph 標籤。例如：

import Head from 'next/head';
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>Cool Title</title>
        <meta name="description" content="Checkout our cool page" key="desc" />
        <meta property="og:title" content="Social Title for Cool Page" />
        <meta
          property="og:description"
          content="And a social description for our cool page"
        />
        <meta
          property="og:image"
          content="https://example.com/images/cool-page.jpg"
        />
      </Head>
      <h1>Cool Page</h1>
      <p>This is a cool page. It has lots of cool content!</p>
    </div>
  );
}
 
export default IndexPage;

擁有一個提供描述和標題的可分享連結，以及代表頁面內容的圖片，雖然不會直接影響 SEO 排名，但會間接提高連結的點擊率，最終為您的網站帶來更多訪客。

結構化數據與 JSON-LD

結構化數據有助於搜尋引擎理解您的頁面。多年來，已經有幾種詞彙表被使用，但目前主要的是 schema.org。

根據該網站的描述，schema.org 是一個「協作性社區活動，旨在創建、維護和推廣用於互聯網、網頁、電子郵件等領域的結構化數據模式」。

Schema.org 的詞彙表可以與多種編碼方式一起使用，包括 RDFa、Microdata 和 JSON-LD。

不同的搜尋引擎可能會採用 schema.org 中的不同詞彙表，且沒有任何搜尋引擎涵蓋該網站詞彙表中描述的所有用例。請務必檢查每種情況下接受的詞彙表。

以下是一個產品頁面添加 JSON-LD 產品模式數據的範例：

import Head from 'next/head';
 
function ProductPage() {
  function addProductJsonLd() {
    return {
      __html: `{
      "@context": "https://schema.org/",
      "@type": "Product",
      "name": "Executive Anvil",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
       ],
      "description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
      "sku": "0446310786",
      "mpn": "925872",
      "brand": {
        "@type": "Brand",
        "name": "ACME"
      },
      "review": {
        "@type": "Review",
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": "4",
          "bestRating": "5"
        },
        "author": {
          "@type": "Person",
          "name": "Fred Benson"
        }
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.4",
        "reviewCount": "89"
      },
      "offers": {
        "@type": "Offer",
        "url": "https://example.com/anvil",
        "priceCurrency": "USD",
        "price": "119.99",
        "priceValidUntil": "2020-11-20",
        "itemCondition": "https://schema.org/UsedCondition",
        "availability": "https://schema.org/InStock"
      }
    }
  `,
    };
  }
  return (
    <div>
      <Head>
        <title>My Product</title>
        <meta
          name="description"
          content="Super product with free shipping."
          key="desc"
        />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={addProductJsonLd()}
          key="product-jsonld"
        />
      </Head>
      <h1>My Product</h1>
      <p>Super product for sale.</p>
    </div>
  );
}
 
export default ProductPage;

在此範例中，數據是硬編碼為字串的，但您可以輕鬆將數據傳遞給 addProductJsonLd 方法，使其完全動態化。

元數據

標題 (Title)

描述 (Description)

Open Graph

結構化數據與 JSON-LD

延伸閱讀

On this page