在这个技术和竞争激烈的时代，业务和应用程序的繁荣在很大程度上依赖于它们的在线存在。仅仅拥有一个网站已经不够了；还需要建立一个网站。它还必须易于被更广泛的受众发现。为了实现这一目标，您必须针对搜索引擎优化您的网站。本文探讨了 Next.js 元数据 API 的功能和实际用法，提供了有关利用此新 API 提高应用程序的 SEO 排名和网络可见性的宝贵见解。
今年早些时候，Next.js 团队发布了 13.2 版本，该版本通过使用名为 Metadata API 的新 API 内置了对 SEO 的支持。它专为与 App Router 一起使用而构建，通过使用简单且可组合的 API 来定义网页的元数据元素，从而增强我们的应用程序针对搜索引擎进行优化的方式（SEO 性能）。
元数据 API 是为应用程序添加元数据的绝佳工具。它提供两种配置元数据的方法：静态元数据和动态元数据。静态元数据涉及导出元数据配置对象，而动态元数据涉及使用函数生成页面所需的元数据配置。无论使用哪种类型的元数据，Next.js 都会在 HTML <head> 元素中自动创建必要的 <meta> 和 <link> 标记。不过，需要注意的是，只有服务器组件页面才能使用此 API。
到目前为止我们讨论的元数据类型就是所谓的基于配置的元数据。向应用程序添加元数据的另一种方法是通过基于文件的元数据。使用基于文件的元数据，您可以添加用于 SEO 优化的有用文件，例如站点地图、开放图形图像、robots.txt 等，Next.js 将自动在元素中生成适当的 HTML 标签<head>。
它与 Head组件相比如何？
在元数据 API 发布之前，向 <head> 元素添加 HTML 标签通常是通过将它们包含在 Head 组件中来完成的。让我们看看如何使用 Head 组件在以下代码中包含页面的标题和描述：
import Head from 'next/head'
function HomePage() {
return (
<div>
<Head>
<title>My page title</title>
<meta name="description" content="My page description">
</Head>
<p>Hello world!</p>
</div>
)
}
export default HomePage
使用元数据 API，可以通过以下代码获得相同的结果：
export const metadata = {
title: "My page title",
description: "My page description"
}
function HomePage() {
return (
<div>
<p>Hello world!</p>
</div>
)
}
export default HomePage
从上面的代码片段中，我们可以看到这种新方法如何提供一种更清晰的方式来修改页面的元数据，而无需将其与 UI 代码混合在一起，就像前面的代码片段一样。此外，元数据 API 比 Head 组件提供了更大的灵活性和易用性，组件需要对每个页面进行手动配置。这两种选项都有优点和缺点，应根据应用程序的具体需求来使用。
元数据 API 入门
我们已经介绍了元数据 API 的基本功能和功能。让我们探讨一下如何利用其中一些功能。虽然我们将使用演示在线商店网站项目作为示例，但我们的主要重点是指导您完成使用元数据 API 优化网站 SEO 的基本步骤。
项目设置
打开终端并运行以下命令以从 GitHub 存储库克隆入门项目：
git clone https://github.com/josephden16/metadata-api-demo.git cd ./metadata-api-demo git checkout start-here
接下来，您需要使用 npm 安装项目的依赖项。运行以下命令：
npm install
安装依赖项后，您可以通过运行以下命令启动开发服务器：
npm run dev
打开 Web 浏览器并导航到 http://localhost:3000 以访问该项目。
在 app/layout.tsx 中定义默认元数据
layout.tsx 文件是一个特殊文件，用于定义特定子段及其子段的 UI。由于 app/layout.tsx 文件将用作应用程序中所有路由段的根布局，因此最好定义一些将出现在所有页面上的默认元数据，而不是在所有页面上包含它们。
转到 src/app/layout.tsx 文件并添加以下代码：
// src/app/layout.tsx
export const metadata = {
title: "Online Store",
description: "The best online store on the internet.",
openGraph: {
title: "Online Store",
description: "The best online store on the internet.",
url: "https://example.com",
siteName: "Online Store",
type: "website",
images: [
{
url: "https://example.com/og-img.jpg",
},
],
},
};
让我们回顾一下我们在导出 metadata 对象中定义的一些属性：
title：这是网页的标题，通常出现在浏览器的标题栏或选项卡中。在本例中，它设置为“Online Store”。description：这是网页内容的简要描述。搜索引擎和社交媒体经常使用它来提供页面摘要。在这里，它被设置为“The best online store on the internet”。openGraph：此对象包含专门格式化用于在 Facebook 等社交媒体平台上共享的元数据。它有助于控制页面在这些平台上共享时的显示方式。title：Open Graph 标题，也设置为“Online Store”。description：Open Graph 描述，设置为与页面描述相同的值。url：网页的 URL，设置为“ https://online-store.com ”。siteName：网站或应用程序的名称，再次设置为“Online Store”。type：这指定了内容的类型，在本例中，它是一个“website”，表示它是一个通用网站。images：一个数组，可以包含一张或多张图像，在社交媒体上共享页面时用作预览。在此代码中，有一个指定了其 URL 的图像。
这些默认值包括页面标题、描述和社交媒体共享的开放图谱设置等基本属性。这可以帮助您避免冗余代码，并为有效的 SEO 和社交媒体共享提供基础。请记住，您始终可以使用稍后路由段中定义的元数据覆盖这些默认值，以根据需要定制特定页面。
在产品页面中生成动态元数据
元数据 API 提供对生成动态元数据的支持。这意味着您的网页的元数据可以根据特定页面动态调整和更改。例如，每个产品页面都必须在在线商店中具有唯一的元数据，包括标题、描述和图像。这种方法有助于为用户提供个性化信息，特别是当他们在社交媒体上分享信息或搜索引擎为您的页面建立索引以改进 SEO 时。
为了实现这一点，您需要导出一个名为的异步函数，generateMetadata 函数将处理该特定页面的元数据所需的数据获取。让我们用一个实际的例子来看看它是如何工作的。
转到 src/app/products/[id]/page.tsx 并包含以下代码：
// src/app/products/[id]/page.tsx
export async function generateMetadata({
params,
}: {
params: { id: string };
}): Promise<Metadata> {
const product = await getProduct(params.id);
return {
title: product.title,
description: product.description,
openGraph: {
title: product.title,
description: product.description,
images: [
{
url: product.image,
},
],
},
};
}
在上面的代码中， generateMetadata 函数使用路由参数中的产品 id，通过 API 调用检索产品信息。获取产品详细信息后，会生成一个 metadata 对象，与 app/layout.tsx 中的 metadata 对象类似。
在 generateMetadata 函数和 Page 组件中，我们使用 fetch API 请求相同的端点。虽然这应该会导致两个独立的 API 调用，但 React 会自动对同一组件树中向同一 API 端点发出的请求进行备忘。这意味着只需进行一次 API 调用，而作为开发人员，您不必担心在组件中对相同数据进行多次请求所带来的性能问题。同样值得注意的是，Next.js 在 generateMetadata 函数执行完成之前不会呈现页面，以确保流式响应的第一部分包含 <head> 标记。
这是已部署项目的预览，位于 metatags.io 上的 https://metadata-api-demo.vercel.app/products/3，以显示我们定义的元标记正在按预期工作。
使用元数据 API 生成动态站点地图
站点地图是网站上网页的结构化列表，为搜索引擎提供有关网站的组织、结构和内容的有价值的信息。它们充当搜索引擎爬虫的路线图，帮助他们有效地导航和索引网站。
通过元数据应用程序接口（Metadata API），在应用程序中添加网站地图的过程可谓天衣无缝。创建网站地图有两种方法。第一个选项是在 app 目录中创建一个静态 sitemap.xml 文件，列出所有网页。第二种方法是包含一个 sitemap.js / sitemap.ts 文件，其中包含动态生成网站地图的代码。
让我们通过使用以下代码将 sitemap.ts 文件添加到 app 目录来为在线商店应用程序创建动态站点地图：
// src/app/sitemap.ts
import { MetadataRoute } from "next";
async function fetchProducts() {
const res = await fetch("https://fakestoreapi.com/products");
const data = await res.json();
return data;
}
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
const products = await fetchProducts();
return [
{
url: "https://example.com",
lastModified: new Date(),
changeFrequency: "yearly",
priority: 1,
},
{
url: "https://example.com/products",
lastModified: new Date(),
changeFrequency: "weekly",
priority: 0.5,
},
...products.map((product: any) => ({
url: `https://example.com/products/${product.id}`,
lastModified: new Date(),
changeFrequency: "weekly",
priority: 0.5,
})),
];
}
sitemap() 函数负责创建应用程序的站点地图。它从外部 API 检索产品列表并生成表示 URL 的对象数组。每个 URL 对象都包含重要的元数据，例如上次修改日期、更改频率和优先级。站点地图包括主页、产品页面和单个产品页面。Next.js 使用 sitemap() 函数返回的对象数组来创建sitemap.xml文件。
如果您访问 http://localhost:3000/sitemap.xml，您将看到一个站点地图文件，如下图所示。
元数据 API 的优缺点
元数据 API 为管理 Next.js 应用程序中的元数据提供了一些改进，特别是在增强网站的搜索引擎优化及其在互联网上共享的能力方面。现在让我们探讨一下元数据 API 的优缺点：
优点：
- 简化的元数据管理：通过元数据 API，您现在可以轻松地直接在页面或布局中定义元数据。这简化了管理元数据的过程，使其更加简单直观。
- 动态元数据生成：元数据 API 提供对动态生成元数据的支持。这意味着您可以根据动态数据或特定条件创建元数据。这对于根据应用程序的内容生成标题、描述或其他元数据元素非常有用。
- 基于文件的元数据自定义：元数据 API 引入了新的文件约定，可以方便地自定义页面，以实现更好的 SEO 和在线共享。例如，您可以利用基于文件的元数据来合并特定页面的图标或开放图形图像。
缺点：
- 迁移工作：如果您当前使用不同的方法来管理现有 Next.js 应用程序中的元数据，则切换到元数据 API 可能需要一些额外的工作。您需要更新代码以实现新的 API，并重构与管理应用程序元数据相关的任何现有代码。
- 有限兼容性：元数据 API 仅限于在 Next.js 13.2 及更高版本上运行的项目。如果您现有的 Next.js 项目不包含这些功能，您将无法利用这个新 API 的优势。
元数据 API 提供了多项优势，可显着改善您的搜索引擎优化工作。尽管如此，还是应该在了解相关工作并考虑项目兼容性的情况下做出迁移决定。
小结
在本文中，我们介绍了元数据 API 的基本方面，演示了实际实现，并分析了其优点和缺点。使用 Next.js 进行 SEO 时，值得考虑使用元数据 API 来促进 SEO 优化。
我们很想了解您使用 Next.js 元数据 API 的体验，以及您为提高 Web 应用程序 SEO 所采取的任何策略。有问题或见解要分享吗？请随意在评论部分分享您的想法，因为我们很高兴从您的经验中学习并继续进行这一引人入胜的讨论。
相关资源：
评论留言