SEO：元数据 | Next.js

元数据是网站内容的摘要，用于为网站附加标题、描述和图片。

标题

标题标签是最重要的 SEO 元素之一，主要有两个原因：

首先，它是用户从搜索结果点击进入您的网站时看到的内容。

其次，它是 Google 用来理解页面内容的主要元素之一。建议在标题中使用关键词，因为这通常有助于提升在搜索引擎中的排名位置。

以下是一个示例：

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

这个页面包含了所有主要关键词，并通过展示明确的价值主张（折扣）来吸引用户。

描述

描述元标签是另一个重要的 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 Cards 标签。

虽然这些 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 方法以使其完全动态化。

元数据

标题

描述

Open Graph

结构化数据与 JSON-LD

延伸阅读

On this page