如何实现LinkedIn等平台复制URL时显示名称、描述和图片的功能？

这个功能核心靠**Open Graph（OG协议）**这类网页元数据协议实现——目标网站会在HTML头部提前定义标题、描述、图片这类信息，你的页面只需要完成「监听粘贴→抓取解析元数据→渲染卡片」三步即可：

1. 监听页面粘贴事件 #

给页面绑定paste事件，捕获用户粘贴的内容，判断是否为合法URL：

• 用正则快速匹配URL，比如：const urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;
• 示例代码：

document.addEventListener('paste', async (e) => {
  const text = e.clipboardData.getData('text');
  const urlMatch = text.match(urlRegex);
  if (urlMatch) {
    e.preventDefault(); // 阻止直接粘贴文本的默认行为
    const previewData = await fetchUrlPreview(urlMatch[0]);
    renderPreviewCard(previewData);
  }
});

2. 抓取并解析目标URL的元数据 #

浏览器存在同源限制，前端无法直接请求外部URL，需要后端做代理：

• 后端请求目标URL的HTML源码，解析<head>里的OG标签：
  • 标题对应<meta property="og:title" content="xxx">
  • 描述对应<meta property="og:description" content="xxx">
  • 图片对应<meta property="og:image" content="xxx">
• 如果目标网站未添加OG标签，就降级抓取<title>标签、<meta name="description">的内容，甚至页面中的第一张图片。
• 后端将解析好的标题、描述、图片地址打包成JSON返回给前端。

3. 动态渲染预览卡片 #

拿到后端返回的数据后，生成对应DOM元素展示：

• 示例结构：

<div class="url-preview-card">
  <img src="图片地址" alt="预览图" class="preview-img">
  <div class="preview-content">
    <h3 class="preview-title">页面标题</h3>
    <p class="preview-desc">页面描述</p>
    <span class="preview-url">原URL地址</span>
  </div>
</div>

• 给卡片添加CSS样式，比如圆角、阴影、合理排版，对齐参考图的效果。

额外优化点 #

• 增加加载动画：抓取数据时显示加载状态，避免用户无反馈等待
• 错误处理：若URL无效、抓取失败，直接粘贴原URL或提示用户
• 兼容多协议：除OG外，适配Twitter Cards、Schema.org结构化数据，覆盖更多网站

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