哈哈，说到SEO这事儿，咱就得从TDK说起啊。你懂的，Title、Description、Keywords这三大件是搜索引擎的Zui爱。要是这几个玩儿不转，再牛的内容也白搭。

TDK就是Title、Description、Keywords的缩写。说白了就是网页的名片嘛，让搜索引擎知道你这个页面在讲什么。

- Title：页面标题，出现在浏览器标签和搜索结果里 - Description：简短描述，告诉用户这个页面有啥价值 - Keywords：关键词列表，虽然现在影响不大但还是要写

还有OG标签呢？那是Facebook发明的玩意儿。当你分享链接到微信朋友圈或QQ空间时那张漂亮的小卡片就是靠它生成的。

在App Router下特别简单！你只需要在page.tsx或layout.tsx文件里export一个metadata对象就行了。

export const metadata = {
  title: '我的超级网站',
  description: '这是一个关于前端技术的网站',
  keywords: 
}

kan见没？这么简单！不过要注意： 1. 根布局中的metadata是全局默认值 2. 子路由Ke以覆盖或 父路由的metadata

有时候我们需要根据不同参数动态生成TDK。比如商品详情页需要显示具体商品名称。这时候就要用generateMetadata函数啦。

export async function generateMetadata {
  const product = await fetchProduct
  return {
    title: `${product.name} - 商品详情`,
    description: product.description,
    keywords: 
  }
}

注意这个函数是服务端渲染执行的哦！所以Ke以直接调用数据库或API接口获取数据。 警告！别在这里Zuo复杂运算啊！性Neng会hen差！ 提示：fetchasync/await await requests 哈那个...我记得还有个metadataBase,把它设置好后相对路径图片URL会自动变绝对地址哦~ 模板合并技巧 那这个真的太方便了！ jsx // layout.tsx export const metadata = { title: { default: '我的博客', template: '%s - 前端技术博客' } } // page.tsx export const metadata = { title: 'React入门教程' } // 生成后实际title会是"React入门教程 - 前端技术博客" 是不是hen智Neng？子页面只需要写短标题就行了！ Open Graph深度解析 老兄们注意啦！OG标签可是影响社交分享体验和点击率的关键因素！ 你要理解OG图片hen重要。当用户分享你网站时kan到的是什么？一张好kan吸引人的图片Neng让点击率翻倍！ 基础配置方式 jsx export const metadata = { openGraph: { images: } } 高级使用场景

多图展示Ke以添加多个图片URL jsx images: