Adding og images to VitePress

Question

I've seen that in the VitePress .md files you can add meta description and keywords like this,

head:
  - - meta
    - name: description
      content: my custom description

But I can't seem to figure out how to add og:title or og:image, it seems that the : throws an error when compiling.

Answer 1

Refer:

• YAML: Do I need quotes for strings in YAML?
• How to escape indicator characters (i.e. : or - ) in YAML

---

So you basically need to do:

head:
  - - meta
    - name: 'og:title'
      content: Foo Bar

---

Moreover, VitePress supports setting the frontmatter in JSON too. So this should also work:

{ "head": [["meta", { "name": "og:title", "content": "Foo Bar" }]] }