如何创建自动生成图片的API端点并实现谷歌图片收录

基础实现逻辑 #

你提到的「创建对应API端点 + 页面配置指向自有端点的meta标签」是核心实现思路，完全可行，仅需补充部分细节即可满足多宽高比适配和谷歌收录需求。

多宽高比适配方法 #

Open Graph协议本身支持声明多张同页面关联的分享图，你可以按需求为每个宽高比分别配置完整的OG图片标签组，除了og:image外，配套补充og:image:width、og:image:height、og:image:type属性，让搜索引擎和社交平台准确识别每张图片的参数，参考配置如下：

<!-- 16:9 比例分享图 -->
<meta property="og:image" content="https://你的站点域名/api/v1/images/share/16x9/赛事唯一标识.png"/>
<meta property="og:image:width" content="1920"/>
<meta property="og:image:height" content="1080"/>
<meta property="og:image:type" content="image/png"/>

<!-- 1:1 比例分享图 -->
<meta property="og:image" content="https://你的站点域名/api/v1/images/share/1x1/赛事唯一标识.png"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="1200"/>
<meta property="og:image:type" content="image/png"/>

<!-- 9:16 比例分享图 -->
<meta property="og:image" content="https://你的站点域名/api/v1/images/share/9x16/赛事唯一标识.png"/>
<meta property="og:image:width" content="1080"/>
<meta property="og:image:height" content="1920"/>
<meta property="og:image:type" content="image/png"/>

API端点设计直接把宽高比、资源唯一标识作为路径参数即可，收到请求后根据参数生成/返回对应裁剪比例的图片即可。

谷歌收录注意事项 #

要保证生成的图片可以被谷歌正常收录，还需要满足以下要求：

• API接口返回图片时需设置正确的Content-Type响应头，不能返回非图片类型的内容
• 图片接口不要设置访问权限校验，允许谷歌爬虫无限制访问
• 建议添加Cache-Control响应头设置合理的缓存时间，降低服务器压力同时提升爬虫抓取效率
• 可在站点地图中提交所有分享图的路径，加快收录速度
• 图片内容要和所属页面主题强相关，单张图片最小尺寸建议不低于1200px，保证收录质量

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