Feature: social images (twitter/og)

jbandi commented 2 years ago

Is your feature request related to a problem? Please describe.

It would be nice if sites based on VitePress could support social link preview images with the corresponding meta tags (Twitter and OpenGraph).

I personally try to build my Blog based on VitePress, and for a Blog I think social link preview images are important.

Currently VitePress does not support tilte and descripption for social link previews (Twitter and OpenGraph) but not Images.

This can for instance be observed with the following site: https://www.opengraph.xyz/url/https%3A%2F%2Fblog.vuejs.org%2Fposts%2Fvue-3-as-the-new-default.html/

Describe the solution you'd like

I suggest that a default social image can be specified in .vitepress/config.ts. This image is then referenced in meta tags for Twitter and OpenGraph like this:

 <meta name="twitter:image" content="/images/example.png">
 <meta property="og:image" content="/images/example.png">

The above image can be overridden in each Markdown page by specifying a specific social image in frontmatter like this:

---
image: ./images/vue.png
---

I am using a version of VitePress that contains PR #498 here: https://blog.jonasbandi.net/posts/20211231-a-new-beginning.html (Source: https://github.com/jbandi/blog.jonasbandi.net)

As you can see here the social link image preview is working: https://www.opengraph.xyz/url/https%3A%2F%2Fblog.jonasbandi.net%2Fposts%2F20211231-a-new-beginning.html/

Describe alternatives you've considered

No response

Additional context

No response

Validations

[X] Follow our Code of Conduct
[X] Read the docs.
[X] Read the Contributing Guidelines.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

brc-dd commented 2 years ago

I have certain concerns regarding this feature request and your PR #498.

First, one can still do this using frontmatter:

head:
  - - meta
    - property: 'og:image'
      content: https://foo.bar/baz.png

Can also be set for the whole site using head property in the site config.

Second, your demo site has meta tag like this:

<meta property="og:image" content="/images/vue.png">

Relative links are not valid candidates for content of og:image (ref), though many platforms resolve them properly.

Also, you've forgot to wrap image with withBase so it won't work properly when base other than / is set in the config.

These four changes are not required. (Click to expand.)

Regarding twitter:title and twitter:image -- twitter:title fallbacks to og:title so that's unnecessary too, same for twitter:image (ref). Also, Twitter cards need meta tag with name="twitter:card" to work. You can validate your blog here. It won't show up anything.

kiaking commented 2 years ago

Slightly different but https://github.com/vuejs/vitepress/issues/551 is trying to solve same problem in a more big picture.

Let's discuss further over there on how to tackle this issue.

vuejs / vitepress