如何为Antora文档页面设置OG图片以在社交平台正常渲染？

完全可以通过在AsciiDoc文件顶部定义自定义属性，配合Antora的页面模板配置，实现为每个指南单独设置社交平台OG图片。具体操作步骤如下：

1. 在AsciiDoc文件头部添加自定义属性 #

在你的adoc文件标题之前，添加og-image自定义属性，指定当前页面的OG图片路径：

:og-image: /images/shift-hours-overtime-og.png
[#shiftHoursAndOvertime]
= 班次时长与加班

车辆司机有固定班次...

注意：图片路径需基于Antora组件的资源目录，比如图片存放在组件的images文件夹下，就按上述格式填写路径。

2. 修改Antora页面模板 #

找到Antora使用的页面模板（通常是page.hbs这类Handlebars模板文件），在页面的<head>区域添加OG图片的元标签逻辑，读取自定义属性值：

{{#if page.attributes.og-image}}
<meta property="og:image" content="{{site.url}}{{page.attributes.og-image}}">
<meta property="twitter:image" content="{{site.url}}{{page.attributes.og-image}}">
{{else}}
<!-- 可选：设置默认OG图片 -->
<meta property="og:image" content="{{site.url}}/images/default-og.png">
{{/if}}

这样配置后，当页面定义了og-image属性时，会自动加载指定的图片；未定义时则使用默认图片（如果配置了的话）。

3. 验证效果 #

重新构建Antora站点后，检查对应页面的元数据，确认OG图片标签已正确生成并指向目标图片。

内容的提问来源于stack exchange，提问作者Geoffrey De Smet