提升 VitePress 網站 SEO 的建議

執行 SEO 是為了讓網站更容易被搜尋引擎找到，進而提升網站的流量。如果想要了解 SEO 的詳細內容，可以參考這篇文章。

前言

隨著網站規模的擴大，網站流量也越來越重要，而 SEO 是提升網站流量的重要方式之一。要提升 SEO 的方式有很多，以下是我在使用 VitePress 架設網站時，提升網站 SEO 時所做的筆記。

提升 VitePress 網站 SEO 的建議

1. 優化 `meta` 標籤

meta 標籤是 SEO 中非常重要的一部分，它可以告訴搜尋引擎網站的主題和內容。以下是一些優化 meta 標籤的建議：

在 VitePress 中，除了在 frontmatter 中新增 title 和 description 外，也可以在 config.mjs 中新增 head 設定，讓 meta 標籤更完整。

bash

docs
├─ .vitepress
│  └─ config.mjs
└─ index.md

bash

export default defineConfig({
  title: "網站名稱",
  description: "網站描述",
  lang: 'zh-TW',
  head: [
    ['meta', { name: 'author', content: '網站作者' }],
    ['meta', { name: 'keywords', content: '網站關鍵字' }],
    ['meta', { property: 'og:type', content: 'website' }],
    ['meta', { property: 'og:title', content: '網站名稱' }],
    ['meta', { property: 'og:description', content: '網站描述' }],
    ['meta', { property: 'og:image', content: 'https://your-domain.com/og-image.jpg' }],
    ['link', { rel: 'canonical', href: 'https://your-domain.com' }]
  ],
  // ... 其他配置
})

2. 結構化資料

結構化資料是一種標準化的格式，用於向搜索引擎提供有關網頁內容的詳細信息。它有助於搜索引擎更好地理解您的網頁內容，並可能在搜索結果中顯示更豐富的資訊。

💡 什麼是結構化資料？

它是一種使用特定詞彙（通常是 Schema.org）來標記網頁內容的方法。
它使用 JSON-LD、Microdata 或 RDFa 格式來實現。
最常用和推薦的格式是 JSON-LD。

💡 結構化資料的優點

提高搜索引擎對網頁內容的理解。
可能會在搜索結果中顯示更豐富的資訊。
有助於提高網站的權威性和可信度。
潛在地提高點擊率和網站可見性。

結構化資料的實現（以 Article 為例）

bash

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "文章標題",
  "author": {
    "@type": "Person",
    "name": "作者名稱"
  },
  "datePublished": "2024-02-19T08:00:00+08:00",
  "dateModified": "2024-08-14T10:30:00+08:00",
  "description": "文章摘要或簡短描述",
  "image": "https://example.com/article-image.jpg"
}

在網頁中添加結構化資料

將 JSON-LD 格式放在 <script type="application/ld+json"> 標籤中。
通常放在 <head> 部分或 <body> 的末尾。

以下是我在 VitePress 中實現的結構化資料：

在 .vitepress/theme/components 中新增 StructuredData.vue 元件

bash

docs
├─ .vitepress
│  └─ theme
│     └─ components
│        └─ StructuredData.vue
└─ index.md

bash

<script setup>
import { computed, onMounted } from 'vue'
import { useData } from 'vitepress'

const { frontmatter, page } = useData()

const structuredData = computed(() => {
  const data = {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": frontmatter.value.title || page.value.title,
    "dateModified": page.value.lastUpdated,
    "author": {
      "@type": "Person",
      "name": "Your Name" // 這邊改成自己的名字
    }
  }

  if (frontmatter.value.date) {
    data.datePublished = frontmatter.value.date
  }

  return JSON.stringify(data)
})

onMounted(() => {
  const script = document.createElement('script')
  script.setAttribute('type', 'application/ld+json')
  script.textContent = structuredData.value
  document.head.appendChild(script)
})
</script>

<template></template>

在 .vitepress/theme/index.js 中引入 StructuredData.vue 元件

bash

docs
├─ .vitepress
│  └─ theme
│     └─ index.js
└─ index.md

bash

import StructuredData from './components/StructuredData.vue'

export default {
  enhanceApp({ app, router, siteData }) {
    app.component('StructuredData', StructuredData)
  }
}

在文章中使用 StructuredData 元件並設定 frontmatter

bash

---
title: 文章標題
date: 2024-08-14
---

<StructuredData />

💡 注意事項

title 如果沒有在 frontmatter 中設定，會使用文件名稱當作 title。
date 為文章的發布日期，格式為 YYYY-MM-DD，如果沒有在 frontmatter 中設定，發布日將會留空。

3. sitemap.xml

VitePress 預設會生成 sitemap.xml，並提交給搜尋引擎。如果想要更詳細的控制 sitemap.xml，可以參考 VitePress 官方文件。

結語

提升 VitePress 網站 SEO 的方式還有很多，像是使用 alt 來描述圖片、增加網站內相關內容的內部連結...等。以上是我在使用 VitePress 架設網站時，實際使用到以及另外新增元件的方式，如果您也有一些更好的想法也歡迎一起討論。

提升 VitePress 網站 SEO 的建議 ​

前言 ​