useHead 与 SEO 元数据管理

useHead({
  title: 'AI 视频平台',
  titleTemplate: '%s - AI Video Hub',  // 模板，%s 替换为 title
  meta: [
    { name: 'description', content: '用 AI 生成高质量视频' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
  ],
  link: [
    { rel: 'icon', href: '/favicon.ico' },
    { rel: 'canonical', href: 'https://example.com/videos' },
  ],
  script: [
    { src: 'https://analytics.example.com/script.js', defer: true },
  ],
  htmlAttrs: { lang: 'zh-CN' },
  bodyAttrs: { class: 'antialiased' },
})

// app.vue
useHead({ titleTemplate: '%s - AI Video Hub' })
 
// pages/index.vue
useHead({ title: '首页' })           // → "首页 - AI Video Hub"
 
// pages/videos/[id].vue
useHead({ title: video.value?.title })  // → "猫咪视频 - AI Video Hub"

const video = ref<Video | null>(null)
 
useHead({
  title: computed(() => video.value?.title || '加载中...'),
  meta: [
    { name: 'description', content: computed(() => video.value?.description || '') },
  ],
})

useSeoMeta({
  title: '猫咪AI视频合集',
  description: '用 AI 生成的可爱猫咪视频，每日更新',
  ogTitle: '猫咪AI视频合集',
  ogDescription: '用 AI 生成的可爱猫咪视频',
  ogImage: 'https://example.com/og/cats.jpg',
  ogType: 'website',
  twitterCard: 'summary_large_image',
  twitterTitle: '猫咪AI视频合集',
  twitterImage: 'https://example.com/og/cats.jpg',
})

// 只在服务端执行，客户端 bundle 中不包含这段代码
useServerSeoMeta({
  title: video.value?.title,
  description: video.value?.description,
  ogImage: video.value?.thumbnail,
})

useServerSeoMeta({
  ogType: 'video.other',
  ogVideo: `https://example.com/embed/${videoId}`,
  ogVideoType: 'text/html',
  ogVideoWidth: '1280',
  ogVideoHeight: '720',
  ogImage: video.thumbnail,
  ogImageWidth: '1280',
  ogImageHeight: '720',
})

useHead({
  script: [{
    type: 'application/ld+json',
    innerHTML: JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'VideoObject',
      name: video.value.title,
      description: video.value.description,
      thumbnailUrl: video.value.thumbnail,
      uploadDate: video.value.createdAt,
      duration: formatISO8601Duration(video.value.duration),
      contentUrl: video.value.url,
      embedUrl: `https://example.com/embed/${video.value.id}`,
      interactionStatistic: {
        '@type': 'InteractionCounter',
        interactionType: 'https://schema.org/WatchAction',
        userInteractionCount: video.value.views,
      },
    }),
  }],
})

// app/composables/useJsonLd.ts
export function useJsonLd(data: Record<string, any>) {
  useHead({
    script: [{
      type: 'application/ld+json',
      innerHTML: JSON.stringify({ '@context': 'https://schema.org', ...data }),
    }],
  })
}
 
// 使用
useJsonLd({
  '@type': 'BreadcrumbList',
  itemListElement: [
    { '@type': 'ListItem', position: 1, name: '首页', item: 'https://example.com' },
    { '@type': 'ListItem', position: 2, name: 'AI 视频', item: 'https://example.com/videos' },
    { '@type': 'ListItem', position: 3, name: video.value.title },
  ],
})

// pages/videos/[id].vue — <script setup>
const route = useRoute()
const { data: video } = await useFetch(`/api/videos/${route.params.id}`)
 
if (!video.value) showError({ statusCode: 404, statusMessage: '视频不存在' })
 
// 1. 基础 SEO Meta（仅服务端渲染，不占客户端内存）
useServerSeoMeta({
  title: video.value.title,
  description: video.value.description?.slice(0, 160),
  ogTitle: video.value.title,
  ogDescription: video.value.description?.slice(0, 160),
  ogImage: video.value.thumbnail,
  ogType: 'video.other',
  ogVideo: `https://example.com/embed/${video.value.id}`,
  twitterCard: 'player',
  twitterTitle: video.value.title,
  twitterImage: video.value.thumbnail,
})
 
// 2. 页面 Title（需要客户端响应式——SPA 导航时更新标签页标题）
useHead({ title: video.value.title })
 
// 3. Canonical URL（避免重复内容）
useHead({
  link: [{ rel: 'canonical', href: `https://example.com/videos/${video.value.id}` }],
})
 
// 4. JSON-LD 结构化数据（视频 + 面包屑）
useJsonLd({
  '@type': 'VideoObject',
  name: video.value.title,
  description: video.value.description,
  thumbnailUrl: video.value.thumbnail,
  uploadDate: video.value.createdAt,
  duration: `PT${Math.floor(video.value.duration / 60)}M${video.value.duration % 60}S`,
  contentUrl: video.value.url,
})

useHead({
  link: [
    { rel: 'alternate', hreflang: 'zh-CN', href: 'https://example.com/zh/videos/123' },
    { rel: 'alternate', hreflang: 'en', href: 'https://example.com/en/videos/123' },
    { rel: 'alternate', hreflang: 'x-default', href: 'https://example.com/videos/123' },
  ],
  htmlAttrs: { lang: currentLocale.value },
})