在這篇文章中，我們將介紹在 Nuxt 3 專案實作搜尋引擎優化（SEO）相關的功能，包括設定 meta 標籤與 Open Graph（og）標籤，讓社群平台與搜尋引擎正確解析網站資訊，以及說明如何建立網站地圖（sitemap），幫助搜尋引擎爬蟲更有效率地收錄網站資訊，提升網站的曝光度與搜尋排名。
這是一個專為搜尋引擎最佳化（SEO）設計的 composable 功能，適用於設定 Open Graph 和 Twitter Card 等社群分享的 <meta> 資訊，例如：ogDescription、twitterCard 等 meta 標籤。使用 useSeoMeta() 可以根據設定的 key 自動產生對應的 HTML <meta> 或 <title>，不用再手動處理屬性名稱或格式轉換，是為了 SEO 優化量身打造的語法非常方便設定，共同的部份可以統一寫在 App.vue 裡，設定範例如下：
<script setup>
useSeoMeta({
title: 'Sea Museum 海洋博物館｜展覽介紹・海洋保育・參觀資訊',
ogTitle: 'Sea Museum 海洋博物館｜展覽介紹・海洋保育・參觀資訊',
description: 'Sea Museum 海洋博物館｜展覽介紹・海洋保育・參觀資訊',
ogDescription: 'Sea Museum 海洋博物館擁有最科技創新的技術展覽，寓教於樂的展覽體驗，帶你認識海洋、保育海洋！',
ogImage: 'https://.........../xxx.png',
twitterCard: 'summary_large_image',
})
</script>
如果需要在 <head> 中設定其他自訂義的標籤，例如：<script>、<style>、<link>、<favicon>、<meta> 等，可以透過 useHead 設定。useHead() 提供更完整的靈活性，讓開發者能夠手動、精確地控制 <head> 中的每一個細節，適用於非語意化 SEO 的其他 <head> 標籤設定，一樣共同的部份可以統一寫在 App.vue 裡，如下範例：
<script setup>
useHead({
title: 'Sea Museum 海洋博物館｜展覽介紹・海洋保育・參觀資訊',
link: [
{ rel: 'canonical', href: 'https://......' },
{ rel: 'icon', href: '/favicon.ico' }
],
meta: [
{ property: 'og:type', content: 'website' },
{ name: 'twitter:card', content: 'summary_large_image' },
{ name: 'twitter:title', content: 'Sea Museum 海洋博物館' },
{ name: 'twitter:description', content: 'Sea Museum 海洋博物館擁有最科技創新的技術展覽，寓教於樂的展覽體驗，帶你認識海洋、保育海洋！' },
{ name: 'twitter:image', content: 'https://.........../xxx.png' }
],
script: [
{ children: 'alert("網站維護中")', type: 'text/javascript' }
],
})
</script>
設定好後查看原始碼，可以檢視設定的結果：
又或者是，我們可以將專案網址的可見度設定為「公用」，再到這個網站查看目前的 SEO 設定狀況 ➡ Meta Tags Toolkit。
（額外補充：想知道怎麼在開發階段從 VS Code 建立 https 網址，可以參考第十六篇，裡面有提到如何建立哦。）
接下來介紹如何建立網站地圖（sitemap），請先安裝套件 @nuxtjs/sitemap。
npm i @nuxtjs/sitemap
安裝完成後，開啟專案根目錄的 nuxt.config.ts，加入以下設定區塊：
export default defineNuxtConfig({
modules: [
'@nuxtjs/sitemap',
],
})
接著在瀏覽器輸入本地開發網址 https://xxx/sitemap.xml，就可以看到自動產生的 sitemap 結果，預設會自動列出 pages/ 資料夾底下所有的靜態路由（不包含動態路由）。
若有某些路由不想包含在 sitemap 中，可以透過 exclude 選項移除不需要的路徑。
export default defineNuxtConfig({
sitemap: {
exclude: [
'/signup',
],
}
})
設定完成後重新查看 sitemap，就可以看到 /signup 路徑已經從清單中移除了。
反過來說，如果希望 sitemap 中額外加入自訂網址，可以透過 urls 選項手動指定要加入的路徑。
export default defineNuxtConfig({
sitemap: {
...,
urls: [
{ loc: '/custom-page' }
]
}
})
訪問 https://xxx/sitemap.xml 時，如果想查看原始的 XML 結構，沒有美化成樣式表的樣子，可以做以下設定：
export default defineNuxtConfig({
sitemap: {
...,
xsl: false
}
})
同樣訪問 https://xxx/sitemap.xml，就可以看到未美化的 XML 原始碼。
在這篇文章中，我們透過 Nuxt 3 提供的 useSeoMeta 與 useHead，實作了語意化且高效的 SEO 標籤設定，讓網站能更好地被搜尋引擎與社群平台正確解讀。以及導入了 @nuxtjs/sitemap 模組，自動產出網站地圖，並學會如何排除與補充路由、查看原始 XML 結構，讓爬蟲可以更快速、正確地索引網站內容。
這些 SEO 設定對於形象官網、電商這類型的網站是非常重要的，在未來也可以搭配 Google Analytics、Google Search Console 等行銷工具，持續優化搜尋表現！
⑴ Nuxt SEO and Meta 參考來源
⑵ Meta Tags Toolkit 來源
⑶ Nuxt Sitemap 參考來源
iThome鐵人賽
看影片追技術