渲染和排名
元数据
元数据是网站内容的摘要，用于为网站附加标题、描述和图片。
标题
标题标签是最重要的 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) 的一部分时，它在页面上的显示方式如下
在 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
最初由 Facebook 开发的Open Graph 协议，标准化了如何在任何给定的网页上使用元数据。你可以提供尽可能多或尽可能少的信息，但所有 Open Graph 部分组合在一起，共同创建了与其关联的网站的表示形式。
其他社交媒体公司（如 Pinterest、Twitter、LinkedIn 等）也可能使用 Open Graph 在分享 URL 时显示丰富的卡片。Twitter 也有其自己的标签 Twitter 卡片.
虽然这些 Open Graph 标签与 SEO 相关的标签有很多相似之处，但它们对搜索引擎排名没有任何好处，但仍然建议使用，因为人们可能会在社交媒体或 WhatsApp 或 Telegram 等私人消息工具上分享你的内容。
你可以通过在 Head 组件内的元标签中定义 `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 内采用不同的词汇表，并且没有哪个搜索引擎涵盖了网站词汇表中描述的所有用例。请务必检查每种情况下接受哪些词汇表。
添加 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` 方法以使其完全动态。