Obsidian Publish - Preview image when sharing on Social Media

Hello lovely Obsidian People

If I share an obsidian Publish page, let’s say a blog entry — it is possible to use an Image or Photo in the Thumbnail of the Obsidian Publish page, like for example on X.

My goal would be to achieve something that Steph has on his personal site.

Thanks and all the best, Felix

4 Likes

Is there someone taking a look at this question? :pray:

Social media link preview is not working for me either, and I have tried everything I know to make it work.

One can add an image using the “image” or “cover” metadata/property. However, I don’t see any reference to the image by inspecting the published note webpage and *social media platform posting window HTML code.

Is there any way to check the overriding process between the note’s YAML metadata and the final meta tag, the one with “og:image”?

2 Likes

I have the same issue. I tried to share a link on Linkedin but the social preview as I want it (with my own description and image overriding the meta tags) does not work. Is this a bug or me who do not understand how it works? for information, I created both description and image properties. and I tried several URLs for the image: absolute and relative links, within " ".

2 Likes

Same issue here - even with the image:url_to_image parameter in the metadata the image doesn’t display with the post on LinkedIn. Is there a fix to this issue?

Can everyone affected by this issue post a screenshot of the source mode version of their cover/image art in the frontmatter? I’ll need this for testing purposes. Thank you!

2 Likes

Hi, @Sigrunixia, thanks for picking up this thread~
I’m experiencing the same issue.

I’ve tried a few iterations of this so far:

  • following the documentation exactly Social media link previews - Obsidian Help
  • switching between image and cover properties
  • switching between png and svg
  • using the [[link]] format
  • using a URL directly to a hosted image
  • url encoding references

Here’s the raw text of the page that isn’t working for e:

---
image: '"Math and Computation/Databases/Postgres/assets/ex_aggregate.png"'
publish: true
---

- **Description**: Performs aggregation functions like SUM, AVG, COUNT, etc
- **Performance**: CPU-intensive for complex aggregations.
- **Factors**: Size of dataset, number of groups, aggregation complexity.
- **Cost**: `cpu_tuple_cost * number of tuples + cpu_operator_cost * number of groups`
- ![[ex_aggregate.svg|200x200]]
- **Operates on**: [[Result Set]]

And the Obsidian page that’s generated:

There is a lot of quotations marks… I use the path without quotes and it works for me.

This is an example from my web site using
cover: Sequere/Hipertext/files/_entregasequere.jpg