👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。

添加網站頁面的標題

調整 ./app.vue 檔案：

<script setup>
useHead({
  title: 'Nuxt 3 Blog'
})
</script>

調整 ./pages/articles/[id].vue 檔案：

useHead({
  title: article.value.title
})

添加網站頁面的標題模板

調整 ./app.vue 檔案中的 useHead 函式所傳入的物件：

<script setup>
useHead({
    title: 'Nuxt 3 Blog',
    titleTemplate: (title) => (title ? `${title} - Nuxt 3 Blog` : 'Nuxt 3 Blog'),
})
</script>

添加網站頁面 HTML Head 區塊中的標籤

調整 ./app.vue 檔案中的 useHead 函式所傳入的物件：

useHead({
  title: 'Nuxt 3 Blog',
  titleTemplate: (title) => (title ? `${title} - Nuxt 3 Blog` : 'Nuxt 3 Blog'),
  htmlAttrs: {
    lang: 'zh-TW'
  },
  link: [
    {
      rel: 'icon',
      href: '/favicon.ico'
    }
  ]
})

添加 SEO 搜尋引擎最佳化相關的 Meta Tags

調整 ./app.vue 檔案中：

useSeoMeta({
  description: '歡迎來到使用 Nuxt 3 開發的部落格網站',
  ogTitle: 'Nuxt 3 Blog',
  ogDescription: '歡迎來到使用 Nuxt 3 開發的部落格網站',
  ogUrl: 'http://localhost:3000/',
  ogImage: 'https://i.imgur.com/AVNujNC.png'
})

調整 ./pages/articles/[id].vue 檔案：

<script setup>
// ...

const description = article.value.content.replace(/\n/g, ' ').substring(0, 300)

useSeoMeta({
  description,
  ogTitle: article.value.title,
  ogDescription: description,
  ogImage: article.value.cover,
  ogUrl: () => `http://localhost:3000/articles/${article.value.id}`,
  twitterTitle: article.value.title,
  twitterDescription: description,
  twitterImage: article.value.cover,
  twitterUrl: () => `http://localhost:3000/articles/${article.value.id}`,
  twitterCard: 'summary_large_image'
})
</script>

感謝大家的閱讀，歡迎大家給予建議與討論，也請各位大大鞭小力一些：）
如果對這個 Nuxt 3 系列感興趣，可以訂閱接收通知，也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。

範例程式碼

• Nuxt 3 SEO 搜尋引擎最佳化 - 實戰部落格系列 Part 5