next-後設資料建立、更新 SEO 最佳化

攀上顶峰發表於2024-05-15

在建立Next.js專案時，根頁面會自動生成一個metadata物件，其中包含標題和描述等關鍵資訊。每當頁面被訪問時，這個metadata物件會被讀取並應用到HTML的預設配置中，確保頁面的基本資訊得以正確展示。在存在單獨頁面需要採用獨特的標題或描述時，這些特定頁面的後設資料將優先於根元素所設定的全域性後設資料，從而進行替換操作。透過為這些頁面設定獨特的後設資料，我們可以確保訪問者或搜尋引擎在訪問這些頁面時能夠獲取到最準確、最相關的資訊。因此，在設計和開發網站或應用程式時，我們需要考慮如何為每個頁面設定獨特的後設資料，並在需要時優先使用這些後設資料，以提供最佳的使用者體驗和搜尋引擎最佳化效果。

  • 支援對title和description進行獨立的配置，以靈活滿足各類頁面需求。
  • 在配置優先順序方面，我們遵循頁面層級深度原則，即頁面最深層級的設定將具有最高的優先順序，而位於app/layout下的設定則享有最低的優先順序。這一規則設計旨在確保頁面級別的特定設定能夠覆蓋全域性或佈局級別的通用設定，從而更加精確地控制頁面的標題和描述內容。
  • 僅適用於服務端渲染場景，以確保在伺服器端進行頁面渲染時能夠正確應用優先順序設定。
//app/layout.tsx 根元素中預設生成的
export const metadata: Metadata = {
  title: "defaultTitle",
  description: "I am description",
};


//app/about/details.tsx  在指定頁面設定metadata
export const metadata: Metadata = {
  title: "xxxxdetails", //可以單獨修改
  description: " 我是 xxxx 詳情描述",//可以單獨修改 ⚠️該欄位只會進行合併不會進行替換
};

個性化 metadata

export const metadata: Metadata = {
    title: {
        default:'', //預設的
        absolute:'', //絕對的
        template:'%s | test' //使用模板符 進行替換
    },
}

//當前頁面需要更新 title 的時候，可以根據根元素配置的 title 型別來進行個性化展示
//示例：
    // app/layout.tsx
    export const metadata: Metadata = {
        title: '子頁面 title', //最終會跟頁面配置的template(%s)，進行替換
    }
    
    //app/about/details.tsx
    export const metadata: Metadata = {
        title: {
            absolute: '絕對子頁面 title', //最終會替換跟頁面的 title 直接展示
        },
    }

非同步更新 metadata

import {Metadata} from "next";

//上級路由攜帶進來的引數
type Props = {
    params: { id: string }
    searchParams: { [key: string]: string | string[] | undefined }
}

//改函式支援非同步請求
export const generateMetadata = async ({params, searchParams}: Props): Promise<Metadata> => {
    const title: string = await new Promise(resolve => {
        setTimeout(() => {
            resolve(`async title ${params.id}`)
        }, 200)
    }) 
    return {
        title: 'staticTitle' || title || params.id //取決於父級傳遞過來的引數
    }
}
export default function Page() {
    return <>
        示例 code
    </>
}

相關文章