Head / SEO 类

函数	用途	响应式	XSS 安全
`useHead`	通用 Head 管理	✅	❌
`useHeadSafe`	安全版 Head 管理	✅	✅
`useSeoMeta`	SEO 元标签	✅	✅
`useServerSeoMeta`	仅服务端 SEO	✅	✅

useHead

动态设置页面 <head> 属性，支持所有 HTML head 标签。

useHead({
  title: '页面标题',
  titleTemplate: '%s - 我的网站',
  meta: [
    { name: 'description', content: '描述' },
    { property: 'og:title', content: '社交标题' },
  ],
  link: [
    { rel: 'icon', href: '/favicon.ico' },
    { rel: 'canonical', href: 'https://example.com/page' },
    { rel: 'preload', href: '/fonts/inter.woff2', as: 'font', type: 'font/woff2', crossorigin: '' },
  ],
  script: [
    { src: '/js/analytics.js', defer: true },
    { type: 'application/ld+json', children: JSON.stringify({ /* JSON-LD */ }) },
  ],
  style: [
    { children: 'body { margin: 0; }' },
  ],
  htmlAttrs: { lang: 'zh-CN' },
  bodyAttrs: { class: 'dark' },
})

支持响应式值：computed、ref、getter 函数。

TIP

详见 Head 管理完整教程

useHeadSafe

安全版 useHead，过滤 XSS 风险内容（如 innerHTML）。

useHeadSafe({
  script: [
    { src: '/js/trusted.js' },              // ✅ 安全
    { innerHTML: 'alert("xss")' },          // ❌ 被过滤
  ],
})

何时用 useHeadSafe？

当 Head 数据来自用户输入或第三方来源时。

useSeoMeta

专门设置 SEO 元标签，API 更简洁、类型更安全。

useSeoMeta({
  title: '页面标题',
  description: '页面描述',
  ogTitle: '社交分享标题',
  ogDescription: '社交分享描述',
  ogImage: 'https://example.com/og.png',
  ogUrl: 'https://example.com/page',
  ogType: 'article',
  ogSiteName: '我的网站',
  ogLocale: 'zh_CN',
  twitterCard: 'summary_large_image',
  twitterTitle: 'Twitter 标题',
  twitterDescription: 'Twitter 描述',
  twitterImage: 'https://example.com/twitter.png',
  robots: 'index, follow',
  canonical: 'https://example.com/page',
})

useSeoMeta vs useHead 设置 SEO 标签

useSeoMeta：ogTitle: 'xxx' → 简洁，有类型提示
useHead：meta: [{ property: 'og:title', content: 'xxx' }] → 繁琐

TIP

推荐用 useSeoMeta 设置 SEO 标签

useServerSeoMeta

仅在服务端设置 SEO 元标签，不发送到客户端，减小 Payload 体积。

useServerSeoMeta({
  title: '页面标题',
  description: '页面描述',
  ogTitle: '社交分享标题',
  ogImage: 'https://example.com/og.png',
})

为什么用 useServerSeoMeta？

搜索引擎只读 HTML 源码，SEO 标签在服务端设置就够了。不发送到客户端可以减小 Payload。

TIP

详见 SEO Meta 完整教程

Head / SEO 类 ​

useHead ​

useHeadSafe ​

useSeoMeta ​

useServerSeoMeta ​

Head / SEO 类

useHead

useHeadSafe

useSeoMeta

useServerSeoMeta