Web Share API问题：分享至Facebook时标题、文本及URL丢失

核心原因 #

Facebook对Web Share API的参数处理逻辑与WhatsApp存在差异：

• 当分享请求包含files（本地文件/Blob）时，Facebook会优先处理图片文件，直接忽略title、text、url这类文本参数。
• Facebook的分享系统更依赖页面的Open Graph（OG）标签抓取内容，而非直接读取Web Share API传递的参数，尤其是分享本地文件时，这种优先级差异会更明显。

解决方案 #

1. 配置Open Graph标签

在HTML页面的<head>中添加OG标签，让Facebook能正确识别分享所需的标题、描述、链接等信息：

<meta property="og:title" content="你的页面标题">
<meta property="og:description" content="你的分享文本内容">
<meta property="og:url" content="当前页面的完整URL">
<meta property="og:image" content="图片的公网可访问URL"> <!-- 若图片有在线地址则填写 -->
<meta property="og:type" content="article">

2. 合并文本参数

如果必须分享本地Blob图片，可将title、text、url合并到text字段中，提升Facebook读取到完整内容的概率：

async function share() {
  const imageQuote = '<?=$image_quote; ?>';
  const response = await fetch(imageQuote);
  const blob = await response.blob();

  let pageTitle = 'The Page';
  let pageText  = document.getElementsByClassName("quote")[0].innerText;
  let pageUrl   = window.location.href; 

  // 合并所有文本内容到text字段
  const combinedText = `${pageTitle}\n${pageText}\n${pageUrl}`;
    
  const filesArray = [
    new File(
      [blob],
      'panion.jpg',
      {
        type: blob.type,
        lastModified: new Date().getTime()
      }
   )
  ];
  const shareData = {
    text: combinedText,
    files: filesArray,
};
  if (navigator.share) {
    navigator
      .share(shareData)
      .then(() => console.log("Successful share"))
      .catch((error) => console.log("Error sharing", error));
  } else {
    console.error("Browser doesn't support Web Share API");
  }
  console.log(shareData);
}
    
function shareThisQuote() {
    return share();
}

3. 区分平台的分享逻辑（可选）

针对不同平台做差异化处理：对Facebook采用链接分享（依赖OG标签），对WhatsApp保留文件+文本的分享方式：

async function share() {
  const imageQuote = '<?=$image_quote; ?>';
  const response = await fetch(imageQuote);
  const blob = await response.blob();

  let pageTitle = 'The Page';
  let pageText  = document.getElementsByClassName("quote")[0].innerText;
  let pageUrl   = window.location.href; 

  // 优先尝试分享链接（适配Facebook）
  if (navigator.canShare && navigator.canShare({ url: pageUrl })) {
    await navigator.share({
      title: pageTitle,
      text: pageText,
      url: pageUrl
    });
  } else {
    // 其他平台分享文件+合并文本
    const combinedText = `${pageTitle}\n${pageText}\n${pageUrl}`;
    const filesArray = [
      new File(
        [blob],
        'panion.jpg',
        {
          type: blob.type,
          lastModified: new Date().getTime()
        }
     )
    ];
    await navigator.share({
      text: combinedText,
      files: filesArray
    });
  }
}

补充说明 #

• 若修改OG标签后分享内容未更新，需等待Facebook的缓存刷新，通常耗时数小时。
• 部分浏览器无法精准检测分享目标平台，可考虑提供两个独立分享按钮：一个用于分享图片（适配WhatsApp），一个用于分享链接（适配Facebook）。

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