VuePress 設定 HTML meta

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

整個網站的 meta

整個網站的 meta 可以在 .vuepress/config.js 的 head 內設定，那其實 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 ，詳細的部分可以到這邊繼續閱讀。