next-元数据创建、更新 SEO 优化

在创建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
    </>
}