在這個技術和競爭激烈的時代，業務和應用程式的繁榮在很大程度上依賴於它們的線上存在。僅僅擁有一個網站已經不夠了；還需要建立一個網站。它還必須易於被更廣泛的受眾發現。為了實現這一目標，您必須針對搜尋引擎優化您的網站。本文探討了 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 所採取的任何策略。有問題或見解要分享嗎？請隨意在評論部分分享您的想法，因為我們很高興從您的經驗中學習並繼續進行這一引人入勝的討論。
相關資源：
評論留言