Nuxt.js 3.x Meta Tags and SEO

本篇文章同步發表於 2023 iThome 鐵人賽:Nuxt.js 3.x 筆記-打造 SSR 專案

Nuxt3 搭配 Unhead 套件,讓我們可以在應用程式中動態控制 <head> 標籤,定義 meta 資訊、樣式表、程式碼片段等在網頁中需要的內容,有助於 SEO 搜尋引擎優化

廣告

動態控制函式:

Composables 組合式函式

  • useHead() & useHeadSafe()
  • useSeoMeta() & useServerSeoMeta()

Components 內建元件

  • <Title><Style><Meta><Link><Body><Html><Head>

Composables:useHead & useHeadSafe

能夠定義完整 <head> 內容。 useHeadSafe()useHead() 的包裝函式,對輸入內容進行檢核,能夠避免潛在的安全風險,像是 XSS 攻擊等安全漏洞

<script setup>
useHead({
title: 'My Website',
htmlAttrs: {
lang: 'zh-TW'
},
meta: [
{ name: 'description', content: 'Hello this is my site.' }
],
script: [],
link: []
})
</script>

Composables:useSeoMeta & useServerSeoMeta

專門用來定義 meta tags,物件結構簡潔扁平。

如果我們的資料非響應式,可以使用 useServerSeoMeta(),在 server 端預先處理完 meta 相關邏輯,提升網頁效能

<script setup>
useSeoMeta({
title: 'My Website',
ogTitle: 'My Website',
description: 'Hello this is my site.',
ogDescription: 'Hello this is my site.',
ogImage: 'https://mysite/image.png',
twitterCard: 'summary_large_image'
})
</script>

Components

Nuxt3 內建 <Title><Style><Meta><Link><Body><Html><Head> 等元件讓我們可以直接在 template 配置 <head> 內容

<template>
<div>
<Head>
<Title>{{ title }}</Title>
<Meta name="description" :content="title" />
</Head>
</div>
</template>

<script setup>
const title = 'About Page';
</script>

實作:全域配置

方法一:nuxt.config

nuxt.config 配置不支援響應式資料,因此官方文件建議在 app.vue 中使用 useHead() 等方法定義

// nuxt.config.js
export default defineNuxtConfig({
app: {
head: {
title: 'My Website',
htmlAttrs: {
lang: 'zh-TW'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
}
}
})

方法二:app.vue

app.vue 中使用 useHead() 等方法定義 <head> 預設值,可以在其他 pages 頁面中定義相同的 meta 屬性覆寫預設值

// app.vue
<template>
<div>
<NuxtPage />
</div>
</template>

<script setup>
useHead({
title: 'My Website',
meta: [
{ name: 'description', content: 'Hello this is my site.' }
]
});
</script>

實作:局部配置

在頁面上定義,能夠覆蓋在 app.vue 配置的 <head> 預設值,以下範例搭配 useHead()

// pages/about.vue
<template>
<div>
...
</div>
</template>

<script setup>
useHead({
title: 'About Page',
meta: [
{ name: 'description', content: 'Hello this is about page.' }
]
});
</script>

延伸:透過後端 API 動態取得 meta 內容

範例情境:每次進入頁面時請求該頁 meta 資料

使用 useAsyncData() 搭配 $fetch 方法實作,並搭配 useSeoMeta() 進行配置

需先具備 Nuxt3 data fetching 相關知識,可以參考 這篇文章

// pages/about.vue
<template>
<div>
...
</div>
</template>

<script setup>
useAsyncData('seo', async () => {
const { title, description, image } = await $fetch('/api/seo/about');
useSeoMeta({
title,
ogTitle: title,
description,
ogDescription: description,
ogImage: image
});
});
</script>

參考資源:

https://nuxt.com/docs/getting-started/seo-meta
https://unhead.harlanzw.com/

廣告
Nuxt.js 3.x 套件應用-VeeValidate v4.x 表單驗證 Nuxt.js 3.x Stylelint SCSS 程式碼檢查與自動排版

評論

廣告
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×