使用 `useServerSeoMeta` 最佳化您的網站 SEO

Amd794發表於2024-07-31
Server網站

title: 使用 useServerSeoMeta 最佳化您的網站 SEO
date: 2024/7/31
updated: 2024/7/31
author: cmdragon

excerpt:
摘要：本文介紹了Nuxt3框架中的useServerSeoMeta函式，它用於伺服器端渲染(SSR)中設定SEO元標籤，以最佳化效能和搜尋引擎排名。內容包括其基本用法、詳細示例及各引數說明，強調了伺服器端設定元標籤對效能的提升和程式碼簡化的好處。

categories:

  • 前端開發

tags:

  • SEO最佳化
  • Nuxt3
  • 伺服器渲染
  • 網站效能
  • OpenGraph
  • Twitter卡
  • 元標籤設定

image
image

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

什麼是 useServerSeoMeta？

在 Nuxt3 框架中，useServerSeoMeta 是一個用於設定 SEO 元標籤的函式。與 useSeoMeta 不同的是，useServerSeoMeta
主要用於伺服器端渲染（SSR）。它允許您在伺服器端設定頁面的 SEO 元標籤，從而提升效能並最佳化搜尋引擎排名。

為什麼使用 useServerSeoMeta？

1. 效能最佳化

useServerSeoMeta 主要用於在伺服器端設定元標籤。由於搜尋引擎機器人只會掃描頁面的初始載入內容，所以元標籤不需要在客戶端動態更新。這樣做可以減少客戶端的處理負擔，提高頁面載入效能。

2. 簡化程式碼

由於 useServerSeoMeta 不需要在客戶端進行響應式更新，它使得 SEO 配置更加簡潔。您可以專注於在伺服器端定義所有需要的 SEO
元標籤，簡化了客戶端的程式碼和處理。

如何使用 useServerSeoMeta？

基本用法

在 Nuxt3 專案中，您可以在頁面元件的 <script setup> 塊中使用 useServerSeoMeta 來設定 SEO 元標籤。以下是一個簡單的示例：


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

<script setup lang="ts">

  useServerSeoMeta({
    title: '我的網站',
    description: '這是我的網站頁面描述。',
    keywords: '網站, SEO, Nuxt3',
    robots: 'index, follow',
    canonical: 'https://example.com',
  });
</script>

詳細示例

為了更好地理解 useServerSeoMeta，讓我們看一個更復雜的示例，涵蓋 Open Graph 標籤、Twitter Card 標籤等。


<template>
  <div>
    <h1>探索我們的新產品</h1>
    <p>瞭解更多關於我們的新產品的資訊。</p>
  </div>
</template>

<script setup lang="ts">

  useServerSeoMeta({
    title: '我們的新產品 - 神奇網站',
    description: '我們的新產品具有創新的功能，旨在提升您的體驗。',
    keywords: '新產品, 創新, 技術',
    robots: 'index, follow',
    canonical: 'https://example.com/new-product',

    ogTitle: '探索我們的新產品',
    ogDescription: '我們的新產品具有創新的功能，旨在提升您的體驗。',
    ogImage: 'https://example.com/new-product-image.png',
    ogImageAlt: '新產品影像',
    ogType: 'product',
    ogUrl: 'https://example.com/new-product',
    ogSiteName: '神奇網站',

    twitterCard: 'summary_large_image',
    twitterTitle: '探索我們的新產品',
    twitterDescription: '我們的新產品具有創新的功能，旨在提升您的體驗。',
    twitterImage: 'https://example.com/new-product-image.png',
    twitterImageAlt: '新產品影像',
    twitterSite: '@mywebsite',
    twitterCreator: '@creator',

    fbAppId: '1234567890',
    fbPages: 'https://facebook.com/mywebsite',

    viewport: 'width=device-width, initial-scale=1',
    appleMobileWebAppTitle: '神奇網站的新產品',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black-translucent',
    favicon: '/favicon.ico',
    appleTouchIcon: '/apple-touch-icon.png',
    msapplicationTileImage: '/mstile-144x144.png',
    themeColor: '#ffffff',

    schema: {
      '@context': 'https://schema.org',
      '@type': 'Product',
      'name': '我們的新產品',
      'description': '我們的新產品具有創新的功能，旨在提升您的體驗。',
      'url': 'https://example.com/new-product',
      'image': 'https://example.com/new-product-image.png'
    }
  });
</script>

引數說明

  • title: 頁面標題。
  • description: 頁面描述。
  • keywords: 頁面關鍵詞。
  • robots: 指示搜尋引擎如何處理頁面（如 index, follow）。
  • canonical: 規範化 URL。
  • ogTitle: Open Graph 標題。
  • ogDescription: Open Graph 描述。
  • ogImage: Open Graph 影像 URL。
  • ogImageAlt: Open Graph 影像替代文字。
  • ogType: Open Graph 型別（如 product）。
  • ogUrl: 當前頁面的 URL。
  • ogSiteName: 網站名稱。
  • twitterCard: Twitter 卡片型別（如 summary_large_image）。
  • twitterTitle: Twitter 標題。
  • twitterDescription: Twitter 描述。
  • twitterImage: Twitter 影像 URL。
  • twitterImageAlt: Twitter 影像替代文字。
  • twitterSite: Twitter 賬戶使用者名稱。
  • twitterCreator: 內容作者的 Twitter 賬戶使用者名稱。
  • fbAppId: Facebook 應用 ID。
  • fbPages: Facebook 頁面 URL。
  • viewport: 視口設定。
  • appleMobileWebAppTitle: iOS 應用的標題。
  • appleMobileWebAppCapable: 是否允許全屏模式（yes 或 no）。
  • appleMobileWebAppStatusBarStyle: 狀態列樣式。
  • favicon: 網站圖示。
  • appleTouchIcon: iOS 應用圖示。
  • msapplicationTileImage: Windows 8/10 觸控式螢幕圖示。
  • themeColor: 移動裝置瀏覽器工具欄的主題顏色。
  • schema: JSON-LD 格式的結構化資料。

總結

useServerSeoMeta 允許您在伺服器端為頁面設定 SEO 元標籤，從而最佳化效能和搜尋引擎排名。透過將所有的 SEO
設定放在伺服器端，您可以減少客戶端的處理負擔，並確保搜尋引擎爬蟲抓取到準確的頁面資訊。

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

往期文章歸檔：

  • 使用 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

相關文章