目標：希望在google 搜尋我的名字時，可以出現我的作品集網站。

1. SEO 基本觀念

• SEO（Search Engine Optimization）：讓網站更容易被 Google / Bing 等搜尋引擎收錄與排序。
• 目標：提高網站的搜尋排名 → 增加自然流量。
• 常見優化方式：
  • 網頁結構清晰（語意化 HTML、正確使用 <h1> ~ <h6>）。
  • 標題（<title>）、描述（<meta name="description">）要精準。
  • 圖片加上 alt 屬性，幫助搜尋引擎理解內容。
  • 網址結構（slug）簡短、可讀性高。
  • 提升網站速度、行動裝置友好。

2. Open Graph（OG）協議

• 作用：當網站被分享到 Facebook、LINE、Twitter 等社群時，顯示的縮圖、標題、描述。

3. 要在哪裡設定和資訊?

• 在 nuxt.config.ts 裡統一設定 SEO + OG：

export default defineNuxtConfig({
  app: {
    head: {
      title: '我的網站', // 顯示在瀏覽器頁籤上的文字
      meta: [
	      // 基本SEO
        { name: 'description', content: '這是我的網站介紹' },
        // Open Graph
        { property: 'og:title', content: '我的網站' },
        { property: 'og:description', content: '分享用的網站描述' },
        { property: 'og:image', content: '/og-image.png' },
      ],
      link: [
        // 顯示在瀏覽器頁籤上的icon，放在/public/favicon.ico 中
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      ]
    }
  }
})

• 在頁面層級使用 useHead 動態設定：

useHead({
  title: '文章標題',
  meta: [
    { name: 'description', content: '文章簡介' },
    { property: 'og:title', content: '文章標題' },
    { property: 'og:description', content: '文章簡介' },
    { property: 'og:image', content: '/article.png' }
  ]
})

4. 如何驗證？

檢查網頁原始碼打開，有出現設定的 <title> 和 <meta description>就有了！日後網站上線後，可以透過瀏覽器內建檢查、Google Search Console（GSC）、Google Analytics (GA4)來觀測搜尋成效、行爲分析。

• 瀏覽器內建檢查：Chrome DevTools → Lighthouse，可以看到SEO分數（不過是在本機測試，速度通常會比實際上線慢，所以分數會有點差～這之後推上線可以來調整