SEO 模組使用示例

基本 SEO 設置

這個頁面展示了如何使用 @nuxtjs/seo 模組的各種功能。

📝 頁面標題與描述

使用 useSeoMeta() 設置頁面特定的 SEO 標籤

🖼️ Open Graph 標籤

為社交媒體分享優化頁面顯示

🐦 Twitter Card

優化 Twitter 分享時的顯示效果

📊 結構化數據

添加 JSON-LD 結構化數據

代碼示例

基本 SEO 設置

// 在 setup() 中使用
useSeoMeta({
  title: '頁面標題',
  description: '頁面描述',
  keywords: '關鍵字1,關鍵字2,關鍵字3',
  author: '作者名稱'
})

Open Graph 設置

useSeoMeta({
  ogTitle: '社交媒體標題',
  ogDescription: '社交媒體描述',
  ogImage: '/og-image.jpg',
  ogType: 'website',
  ogLocale: 'zh_TW'
})

Twitter Card 設置

useSeoMeta({
  twitterCard: 'summary_large_image',
  twitterTitle: 'Twitter 標題',
  twitterDescription: 'Twitter 描述',
  twitterImage: '/twitter-image.jpg'
})

結構化數據

useJsonld({
  '@context': 'https://schema.org',
  '@type': 'Article',
  headline: '文章標題',
  author: {
    '@type': 'Person',
    name: '作者名稱'
  }
})