如何配置Quarto网站链接分享时显示自定义缩略图

要让WhatsApp等通讯软件识别并显示Quarto网站的分享图片，核心是配置Open Graph（OG）和Twitter Card元标签，Quarto已经内置了这些标签的支持，不需要手动编写HTML，直接通过配置文件和文章元数据设置即可：

1. 全局（首页）图片配置 #

在网站根目录的_site.yml文件中，找到website节点，添加opengraph和twitter-card配置项：

website:
  title: "你的网站名称"
  # 保留已有其他配置...
  opengraph:
    image: "/images/global-share-image.jpg"  # 图片路径，相对于网站根目录
    image-alt: "网站的简短描述"
  twitter-card:
    image: "/images/global-share-image.jpg"
    image-alt: "网站的简短描述"

2. 单篇博客文章的自定义图片 #

在每篇博客文章开头的YAML元数据块中，单独设置该文章的分享图片：

---
title: "你的文章标题"
date: 2024-05-20
# 保留已有其他元数据...
opengraph:
  image: "/images/post-specific-image.jpg"
  image-alt: "这篇文章的主题描述"
twitter-card:
  image: "/images/post-specific-image.jpg"
  image-alt: "这篇文章的主题描述"
---

注意事项 #

• 图片路径必须正确：建议把图片放在网站根目录的static或images文件夹中，使用绝对路径（以/开头）确保通讯软件能抓取到
• 图片尺寸参考：推荐使用1200x630像素的图片（符合OG标准），最小不低于300x200像素，避免被拉伸或压缩
• 确保图片可公开访问：不要设置访问权限，也不要使用本地路径或未部署的图片链接
• 配置后验证：可以直接用WhatsApp发送测试链接，确认图片是否正常显示

内容的提问来源于stack exchange，提问作者dzegpi