R2m1liA
0265ea4978
All checks were successful
deploy to server / build-and-deploy (push) Successful in 3m4s
48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
/**
|
||
* 设置页面级 SEO 元数据（包含 title、description、OG/Twitter 等常用字段）。
|
||
*
|
||
* 该函数基于 `useSeoMeta` 封装，可用于 Nuxt 3 / Nuxt 4
|
||
* 配合 SSR/CSR 动态更新，可安全用于异步数据场景（如 CMS 内容页）。
|
||
*
|
||
* @param {Object} meta - 页面 SEO 配置对象
|
||
* @param {string} meta.title - 页面标题（会同时应用到 title / og:title）
|
||
* @param {string} [meta.description] - 页面描述（会应用到 description / og:description）
|
||
* @param {string} [meta.image] - 用于分享卡片的预览图（og:image / twitter:image）
|
||
*
|
||
* @example
|
||
* // 用于普通页面
|
||
* usePageSeo({
|
||
* title: '产品中心 - 金申机械',
|
||
* description: '查看全系列纸管机械产品',
|
||
* image: '/images/og/products.png'
|
||
* })
|
||
*
|
||
* @example
|
||
* // 用于动态内容（如产品详情页）
|
||
* const product = await fetchProduct()
|
||
* usePageSeo({
|
||
* title: product.name,
|
||
* description: product.summary,
|
||
* image: product.coverImage
|
||
* })
|
||
*
|
||
* @remarks
|
||
* - 自动生成以下 meta：`title`, `description`, `og:title`, `og:description`, `og:image`, `twitter:card`
|
||
* - 默认使用 `summary_large_image` 作为 Twitter 卡片类型
|
||
* - 推荐与 `useHead()` 配合增加 canonical / alternate hreflang 等额外 SEO 标签
|
||
*/
|
||
export function usePageSeo(meta: {
|
||
title: string;
|
||
description?: string;
|
||
image?: string;
|
||
}) {
|
||
useSeoMeta({
|
||
title: meta.title,
|
||
ogTitle: meta.title,
|
||
description: meta.description,
|
||
ogDescription: meta.description,
|
||
ogImage: meta.image,
|
||
twitterCard: 'summary_large_image',
|
||
});
|
||
}
|