使用 useSeoMeta 進行 SEO 配置

Amd794發表於2024-07-30

title: 使用 useSeoMeta 進行 SEO 配置
date: 2024/7/30
updated: 2024/7/30
author: cmdragon

excerpt:
摘要：本文介紹了Nuxt3中的useSeoMeta組合函式，用於簡化和最佳化網站的SEO配置。透過這個工具，開發者可以在Nuxt3專案中方便地設定頁面元標籤，包括標題、描述以及Open Graph和Twitter Card標籤等，支援靜態與動態後設資料配置，提升網站在搜尋引擎和社交媒體上的表現。

categories:

  • 前端開發

tags:

  • SEO最佳化
  • Nuxt3
  • Web開發
  • 程式碼示例
  • 元標籤
  • 動態配置
  • 前端技術

image
image

掃描二維碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

在建立現代網站時，搜尋引擎最佳化（SEO）是不可忽視的一個環節。良好的 SEO 配置不僅能提升你的網站在搜尋引擎中的排名，還能在社交媒體上更好地展示你的內容。Nuxt3
提供了一個強大的工具 useSeoMeta 來幫助你實現這一目標。

什麼是 useSeoMeta？

useSeoMeta 是 Nuxt3 提供的一個組合函式（composable），用於定義網站的 SEO 元標籤。透過使用 useSeoMeta
，你可以以型別安全的方式指定各種元標籤，包括標題、描述、Open Graph 標籤等。這有助於避免常見的錯誤，如拼寫錯誤或使用錯誤的屬性名，同時確保你的標籤配置符合標準並具有
XSS 安全性。

如何使用 useSeoMeta

1. 安裝 Nuxt3

首先，你需要有一個 Nuxt3 專案。如果還沒有專案，可以使用以下命令建立一個新的 Nuxt3 專案：

npx nuxi@latest init my-nuxt3-app
cd my-nuxt3-app
npm install

2. 配置 useSeoMeta

在 Nuxt3 專案中，你通常會在頁面元件中配置 SEO 元標籤。以下是一個簡單的 app.vue 檔案示例，展示瞭如何使用 useSeoMeta
來設定頁面的元標籤。

示例 1: 靜態元標籤

在這個示例中，我們設定了一些靜態的 SEO 元標籤：


<template>
  <div>
    <h1>歡迎來到我的網站</h1>
  </div>
</template>

<script setup lang="ts">

  useSeoMeta({
    title: '我的神奇網站',
    ogTitle: '我的神奇網站',
    description: '這是我的神奇網站，讓我告訴你關於它的一切。',
    ogDescription: '這是我的神奇網站，讓我告訴你關於它的一切。',
    ogImage: 'https://example.com/image.png',
    twitterCard: 'summary_large_image',
  });
</script>

在上面的程式碼中，我們使用 useSeoMeta 來設定以下元標籤：

  • title: 網頁的標題
  • ogTitle: Open Graph 的標題，用於社交媒體分享
  • description: 網頁的描述
  • ogDescription: Open Graph 的描述，用於社交媒體分享
  • ogImage: Open Graph 的影像 URL，用於社交媒體分享
  • twitterCard: Twitter 卡片的型別，如 summary_large_image
示例 2: 動態元標籤

有時候，你可能需要根據元件的狀態動態生成元標籤。以下是如何使用計算屬性來實現這一點：


<template>
  <div>
    <h1>{{ title }}</h1>
    <input v-model="title" placeholder="修改標題"/>
  </div>
</template>

<script setup lang="ts">

  const title = ref('我的標題');

  useSeoMeta({
    title,
    description: computed(() => `這是 ${title.value} 的描述`),
  });
</script>

在這個示例中，我們使用 ref 來建立一個響應式的標題，並且透過 computed 來動態生成描述。這樣，當標題發生變化時，描述也會自動更新。

引數列表

useSeoMeta 支援超過 100 個引數，用於定義各種元標籤。以下是一些常見的引數：

基本元標籤

  • title: 頁面標題
  • description: 頁面描述
  • keywords: 頁面關鍵詞
  • robots: 指示搜尋引擎爬蟲如何處理頁面（如index, follow,noindex, nofollow）

Open Graph 標籤

  • ogTitle: Open Graph 標題
  • ogDescription: Open Graph 描述
  • ogImage: Open Graph 影像 URL
  • ogImageAlt: Open Graph 影像替代文字
  • ogType: Open Graph 型別（如website,article,profile）
  • ogUrl: 當前頁面的 URL
  • ogSiteName: 網站名稱
  • ogLocale: Open Graph 語言區域（如en_US）

Twitter Card 標籤

  • twitterCard: Twitter 卡片型別（如summary,summary_large_image,app,player）
  • twitterTitle: Twitter 標題
  • twitterDescription: Twitter 描述
  • twitterImage: Twitter 影像 URL
  • twitterImageAlt: Twitter 影像替代文字
  • twitterSite: Twitter 賬戶使用者名稱（通常是@開頭）
  • twitterCreator: 內容作者的 Twitter 賬戶使用者名稱（通常是@開頭）
  • twitterPlayer: Twitter 播放器 URL（用於影片卡片）

Facebook 和其他社交平臺標籤

  • fbAppId: Facebook 應用 ID
  • fbPages: Facebook 頁面 URL（如果有多個，使用逗號分隔）

結構化資料

  • schema: JSON-LD 格式的結構化資料（如schema.org型別）

    • @context: JSON-LD 上下文
    • @type: 資料型別（如WebPage,Product,Article）
    • name: 名稱
    • description: 描述
    • url: URL
    • image: 影像 URL
    • author: 作者資訊
    • publisher: 釋出者資訊
    • datePublished: 釋出日期
    • dateModified: 修改日期

連結相關標籤

  • canonical: 規範化 URL
  • alternate: 指定其他語言版本的 URL（如hrefLang）
  • rel: 連結關係（如nofollow,noopener）

視口和移動裝置標籤

  • viewport: 視口設定（如width=device-width, initial-scale=1）
  • appleMobileWebAppTitle: iOS 應用的標題
  • appleMobileWebAppCapable: 是否允許全屏模式（yes或no）
  • appleMobileWebAppStatusBarStyle: 狀態列樣式（如black-translucent）

網站圖示和徽標

  • favicon: 網站圖示（通常在<link rel="icon">中設定）
  • appleTouchIcon: iOS 應用圖示（<link rel="apple-touch-icon" href="/path/to/icon.png">）
  • msapplicationTileImage: Windows 8/10 觸控式螢幕圖示
  • themeColor: 移動裝置瀏覽器工具欄的主題顏色

安全和隱私相關標籤

  • Content-Security-Policy: 內容安全策略
  • X-Content-Type-Options: 防止 MIME 型別嗅探
  • X-Frame-Options: 防止點選劫持（如DENY,SAMEORIGIN）
  • X-XSS-Protection: 啟用或禁用 XSS 保護

預載入和預渲染

  • preload: 預載入資源（如<link rel="preload" href="/path/to/resource" as="script">）
  • prefetch: 預取資源（如<link rel="prefetch" href="/path/to/resource">）
  • prerender: 預渲染頁面（如<link rel="prerender" href="/path/to/page">）

影像最佳化

  • imageSrcSet: 影像的不同解析度（用於響應式設計）
  • imageSizes: 影像的大小（用於響應式設計）

自定義後設資料

  • applicationName: 應用程式名稱
  • themeColor: 瀏覽器的主題顏色
  • ogVideo: Open Graph 影片 URL
  • ogVideoType: Open Graph 影片型別（如video/mp4）

更多引數可以參閱官方文件或原始碼中的引數列表。SEO Starter HTML Tags · HTML Tag Collections · zhead

總結

使用 useSeoMeta 是在 Nuxt3 中設定 SEO 元標籤的一種推薦方式。它不僅支援
TypeScript，並且透過型別安全的配置避免了許多常見錯誤。無論是靜態還是動態的元標籤配置，useSeoMeta 都能提供清晰的 API
來幫助你完成任務。

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：使用 useSeoMeta 進行 SEO 配置 | cmdragon's Blog

往期文章歸檔：

  • Nuxt.js必讀：輕鬆掌握執行時配置與 useRuntimeConfig | cmdragon's Blog
  • Nuxt.js 路由管理：useRouter 方法與路由中介軟體應用 | cmdragon's Blog
  • useRoute 函式的詳細介紹與使用示例 | cmdragon's Blog
  • 使用 useRequestURL 組合函式訪問請求URL | cmdragon's Blog
  • Nuxt.js 環境變數配置與使用 | cmdragon's Blog
  • 服務端渲染中的資料獲取：結合 useRequestHeaders 與 useFetch | cmdragon's Blog
  • 使用 useRequestEvent Hook 訪問請求事件 | cmdragon's Blog
  • 使用 useNuxtData 進行高效的資料獲取與管理 | cmdragon's Blog
  • Nuxt 3 使用指南：掌握 useNuxtApp 和執行時上下文 | cmdragon's Blog
  • 使用 useLazyFetch 進行非同步資料獲取 | cmdragon's Blog
  • 使用 useLazyAsyncData 提升資料載入體驗 | cmdragon's Blog
  • Nuxt.js 中使用 useHydration 實現資料水合與同步 | cmdragon's Blog
  • useHeadSafe：安全生成HTML頭部元素 | cmdragon's Blog
  • Nuxt.js頭部魔法：輕鬆自定義頁面元資訊，提升使用者體驗 | cmdragon's Blog
  • 探索Nuxt.js的useFetch：高效資料獲取與處理指南 | cmdragon's Blog
  • Nuxt.js 錯誤偵探：useError 組合函式 | cmdragon's Blog
  • useCookie函式：管理SSR環境下的Cookie | cmdragon's Blog

相關文章