How do I add a thumbnail to my quarto blog post that will work on Facebook Messenger?

[rempsyc]

Question: How do I add a thumbnail to my blog post that will work on Facebook Messenger?

---

Quarto site (blog post): https://insights.remi-theriault.com/posts/intuition/

Observations:

1. Thumbnail works on Facebook as a post
2. Thumbnail works on Facebook Messenger when copying links from the desktop for other urls (e.g., YouTube)
3. Thumbnail works on Facebook Messenger when copying link from the mobile app
4. Thumbnail does not work on Facebook Messenger when copying link from the desktop
5. Seems like thumbnail should work based on this opengraph previewer:
6. Twitter card preview loads correctly:

7. Facebook debugger seems to work but indicates the following warning:

Warnings That Should Be Fixed
Missing Properties
The following required properties are missing: og:url, og:type, fb:app_id

This is the begining of my _quarto.yml:

project:
  type: website
  output-dir: docs

website:
  site-url: https://insights.remi-theriault.com/
  title: "The Insights Diary"
  favicon: images/favicon.jpg
  open-graph:
    image: "images/image.jpg"
  twitter-card:
    image: "images/image.jpg"
    creator: "@rempsyc"
    site: "@rempsyc"

This is the index.qmd of my blog post:

---
title: "Intuitions About Intuition"
author: "Rémi Thériault"
date: "2026-01-03"
subtitle: "Deep Listening, Mind Sensations, and the Cocktail Party Effect"
categories: [insight, phenomenology, intuition, psychology]
description: "Reflections on deep listening, the integrated self, and the nature of intuition."
lightbox: true
image: "image.jpg"
cover-image: image.jpg
twitter-card:
  image: "image.jpg"
open-graph:
  image: "image.jpg"
---

META TAG CODES:

<!-- HTML Meta Tags -->
<title>Intuitions About Intuition – The Insights Diary</title>
<meta name="description" content="Reflections on deep listening, the integrated self, and the nature of intuition.">

<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://insights.remi-theriault.com/posts/intuition">
<meta property="og:type" content="website">
<meta property="og:title" content="Intuitions About Intuition – The Insights Diary">
<meta property="og:description" content="Reflections on deep listening, the integrated self, and the nature of intuition.">
<meta property="og:image" content="https://insights.remi-theriault.com/posts/intuition/image.jpg">

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="insights.remi-theriault.com">
<meta property="twitter:url" content="https://insights.remi-theriault.com/posts/intuition">
<meta name="twitter:title" content="Intuitions About Intuition – The Insights Diary">
<meta name="twitter:description" content="Reflections on deep listening, the integrated self, and the nature of intuition.">
<meta name="twitter:image" content="https://insights.remi-theriault.com/posts/intuition/image.jpg">

<!-- Meta Tags Generated via https://www.opengraph.xyz -->

Complete files can be accessed directly at the repo: https://github.com/rempsyc/insights-diary/

quarto --version
1.6.43

Thanks for any help.

[mcanouil]

Important

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

[rempsyc]

Thank you, I have added alt text to both this discussion original post and to my website.

[mcanouil]

Quarto implements the OpenGraph specification and Twitter/X specification.
Look at what your target guidelines are and what could be missing.

Use your favourite browser console/developer mode and you'll see:

<meta property="og:type" content="article">
<meta property="og:url" content="https://insights.remi-theriault.com/posts/intuition/">
<meta property="og:title" content="Intuitions About Intuition – The Insights Diary">
<meta property="og:description" content="Reflections on deep listening, the integrated self, and the nature of intuition.">
<meta property="og:image" content="https://insights.remi-theriault.com/posts/intuition/image.jpg">
<meta property="og:site_name" content="The Insights Diary">
<meta name="twitter:title" content="Intuitions About Intuition – The Insights Diary">
<meta name="twitter:description" content="Reflections on deep listening, the integrated self, and the nature of intuition.">
<meta name="twitter:image" content="https://insights.remi-theriault.com/posts/intuition/image.jpg">
<meta name="twitter:creator" content="@rempsyc">
<meta name="twitter:site" content="@rempsyc">
<meta name="twitter:card" content="summary_large_image">

Then if all needed information are there, there is nothing to be done on Quarto side.
Note that you can inject yourself whatever you want as a workaround.

Also, You really should upgrade to 1.8. Your version is quite old.

[rempsyc]

Thank you, I have updated my quarto version and re-rendered the website.

quarto --version
1.8.26

Additionally, I understand that all tags should be there, but I wonder why it still triggers a warning on the Facebook debugger and why the thumbnail still doesn't show on Facebook Messenger, whereas other URLs like YouTube work. Is there nothing we can do on the Quarto side? Clearly, if other sites were able to make it work, there must be something that can be done? That could be a feature request for the future, for example, if really there is no way to fix it. Is there any example of any quarto blog that works with thumbnails on Facebook Messenger? If so, perhaps I could see how they were able to fix this issue.

[mcanouil]

There is no point to make a feature request "i want it to work".
There is nothing actionable about it.

What you need to do in order to see what can be done was already explained:

• look at what Messenger expects (maybe it does not support PNG)
• look at what is provided by Quarto and other website (and compare with Messenger expectations)
• be sure you are not hitting any DNS cache issues

Again the OpenGraph specification and how it works or is being used has nothing to do with Quarto.

To be clear, Quarto is providing everything needed per the OpenGraph specification. It cannot work in one place and not in another as it's the exact same information. Thus the issue is no there.