# VuePress 設定 HTML meta

SEO 其中有一環就是要正確地設定 HTML meta ,這樣可以幫助搜尋引擎了解你的網頁。

# 整個網站的 meta

整個網站的 meta 可以在 .vuepress/config.jshead 內設定,那其實 head 這個部分就是允許在 HTML head 內自訂 tag ,所以不僅可以自訂 meta 也可以自訂 favicon ,官方文件 (opens new window)

head: [
  ['link', { rel: 'icon', href: '/logo.png' }],
  ['meta', { property: 'fb:app_id', content: 'your_app_id' }]
]

# 每篇文章的 meta

除了可以設定整個網站的 meta ,每篇文章也可以獨立設定 meta ,可以在每篇文章的 Frontmatter 加上 meta 屬性,像下面這面,官方文件 (opens new window)

---
meta:
  - name: description
    content: hello
  - name: keywords
    content: super duper SEO
---

# Facebook Open Graph Protocol

另外 Facebook Open Graph Protocol 也是要透過 meta 來設定,像是下面這樣。

---
meta:
  - name: og:title
    content: VuePress 設定 HTML meta
---

這邊可以看到 og:title 這個屬性,這個屬性是用來設定文章的 title ,那基本上 VuePress 會抓取文章內的 H1 header 作為文章的 title ,同時存在 $page.title 這個 VuePress 變數。但是 Frontmatter 必須要用文字的方式設定,這樣就沒辦法取用 $page.title 這個 VuePress 變數,所以就會變成要多設一個一樣的 title ,這樣其實有點麻煩。這個不方便的地方可以用 vuepress-plugin-seo 來協助設定 Facebook Open Graph Protocol 的 meta ,詳細的部分可以到這邊繼續閱讀

Last Updated: 11/24/2020, 11:13:08 PM
贊助商連結
(adsbygoogle = window.adsbygoogle || []).push({});