diff --git a/app/composables/usePageSeo.ts b/app/composables/usePageSeo.ts new file mode 100644 index 0000000..e5ccb70 --- /dev/null +++ b/app/composables/usePageSeo.ts @@ -0,0 +1,47 @@ +/** + * 设置页面级 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', + }); +} diff --git a/app/layouts/default.vue b/app/layouts/default.vue index 63a2fcc..ac45b6e 100644 --- a/app/layouts/default.vue +++ b/app/layouts/default.vue @@ -12,6 +12,17 @@ + +