14
章节14
元数据
元数据是网站内容的摘要，用于为网站添加标题、描述和图片。
标题
标题标签是最重要的 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
Open Graph 协议最初由 Facebook 开发，规范了任何给定网页上元数据的使用方式。您可以提供尽可能少或尽可能多的信息，但所有 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 的词汇表可以与许多不同的编码一起使用，包括 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 方法，使其完全动态化。
延伸阅读
这有帮助吗？