如何为API添加Open Graph类元标签？实现移动端分享预览

直接给API接口添加Open Graph（OG）元标签是行不通的——因为API通常返回JSON、XML这类结构化数据，而主流分享平台的爬虫只会解析HTML页面里的meta标签来生成预览内容。你需要通过搭建中间跳转HTML页面的方式来实现需求，具体方案如下：

• 第一步：创建适配分享爬虫的HTML跳转页
  这个页面可以是静态文件，也可以由后端动态生成，核心是嵌入OG元标签，示例代码如下：

  <!DOCTYPE html>
  <html>
  <head>
    <!-- 基础OG标签 -->
    <meta property="og:title" content="你的应用名称">
    <meta property="og:description" content="这里放分享内容的描述文本">
    <meta property="og:image" content="https://你的域名/应用图标或专属分享图地址">
    <meta property="og:url" content="当前跳转页的完整URL">
    <meta property="og:type" content="website">
    
    <!-- 针对不同平台的扩展标签（可选） -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="你的应用名称">
  </head>
  <body>
    <!-- 可选：添加加载提示，避免用户看到空白页 -->
    <p>正在跳转...</p>
  </body>
  </html>
  如果分享的内容是动态的（比如不同用户分享不同内容），可以通过URL参数传递内容ID，后端渲染页面时动态替换OG标签的内容。
  
  

• 第二步：实现自动跳转逻辑
  在跳转页中加入JS代码，让用户打开页面时自动跳转到实际目标（APP内对应页面、网页版内容等），示例：

  <script>
    // 从URL参数中获取目标地址
    const params = new URLSearchParams(window.location.search);
    const targetUrl = params.get('target');
    if (targetUrl) {
      // 延迟跳转，确保爬虫有足够时间抓取OG标签
      setTimeout(() => {
        window.location.href = decodeURIComponent(targetUrl);
      }, 500);
    }
  </script>
  

  也可以添加meta刷新标签作为降级方案：

  <meta http-equiv="refresh" content="1; url=你的实际目标地址">
  

• 第三步：替换应用内的分享链接
  把原本分享API接口的链接，替换成这个跳转页的URL，并带上必要参数。比如：
  https://你的域名/share-page.html?contentId=123&target=xxx

额外注意事项：

• 确保分享爬虫能正常访问跳转页，不要设置IP限制、登录验证等拦截规则，否则平台无法抓取OG标签生成预览。
• 分享图片要符合平台要求：建议尺寸1200x630像素，文件大小不超过2MB，避免被平台过滤。
• 部分平台（如微信）需要提前完成域名备案和平台验证，否则预览可能无法正常显示。

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