iT邦幫忙

2022 iThome 鐵人賽

DAY 7
0
Modern Web

Nuxt 3 - 因為還不穩定,所以來踩地雷系列 第 7

[Day 7] 認識 Nuxt3 環境配置 - SEO

  • 分享至 

  • xImage
  •  

SEO 基本設置就是 head 標籤裡的 meta 和 title,在 Nuxt3 中有兩種方式可以設定頁面的這些資訊

nuxt.config.ts

在環境配置中設定會套用到所有頁面,以下是 nuxt3 中的預設值:

"charset": "utf-8",
"viewport": "width=device-width, initial-scale=1"

以下是官方文件範例配置:

app: {
  head: {
    meta: [
      // <meta name="viewport" content="width=device-width, initial-scale=1">
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    noscript: [
      // <noscript>Javascript is required</noscript>
      { children: 'Javascript is required' }
    ]
  }
}

useHead

useHead 方法可以在個別頁面的 script 標籤裡面設置,而且也可以做動態配置,以下是官方範例:

<script setup>
  const description = ref('My amazing Nuxt app')

  useHead({
    meta: [
      {
        name: 'description',
        content: description
      }
    ]
    // 動態配置
    titleTemplate: '%s - Site Title',
    titleTemplate: (productCategory) => {
      return productCategory
        ? `${productCategory} - Site Title`
        : 'Site Title'
    }
  })
</script>

Head 的其他設定

除了可以設定 head 資訊外也可以撰寫 style 或引入外部的 css, js 檔案(就像一般 html 的 head 一樣 ),但是不太建議使用就是了。

style: [
  { children: ':root { color: red }', type: 'text/css' }
],
link: [
  { 
    rel: 'preconnect', 
    href: 'https://fonts.googleapis.com'
  },
  { 
    rel: 'stylesheet', 
    href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', 
    crossorigin: '' 
  }
],
script: [
  {
    src: 'https://third-party-script.com',
    // body 設置為 true 時會將 script 放在 body 最下方,最後載入
    body: true 
  }
]

上一篇
[Day 6] 認識 Nuxt3 專案結構 - 其他目錄介紹
下一篇
[Day 8] 認識 Nuxt3 環境配置 - nuxt.config
系列文
Nuxt 3 - 因為還不穩定,所以來踩地雷30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言