需求：希望在分享H5网页时，能够和微信分享一样，显示为卡片形式并带有标题、描述和缩略图。

一、使用基础的Meta标签设置

此方法适用于所有平台，在HTML的<head>中添加以下Open Graph协议

    <meta charset="utf-8">
    <title>中成药整合证据链评价平台</title>
    <meta name="description" content="中成药整合证据链评价平台"/>
    <meta name="keywords" content="中成药整合证据链评价平台，圆融科技，首都医科大学，首都医科大学中医药学院">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  
    <!-- 通用OG协议 -->
    <meta property="og:title" content="中成药整合证据链评价平台">
    <meta property="og:description" content="中成药整合证据链评价平台">
    <meta property="og:image" id="ogImage" content="http://iec.idrugsafety.online/index/images/share_logo.png">
    <meta property="og:url" id="ogUrl">
    <meta property="og:type" content="website">
    
    <!-- 补充协议增强兼容性 -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="中成药整合证据链评价平台">
    <meta name="twitter:image" content="http://iec.idrugsafety.online/index/images/share_logo.png">
    
    <!-- 微信专属 -->
    <meta itemprop="name" content="中成药整合证据链评价平台">
    <meta itemprop="description" content="中成药整合证据链评价平台">
    <meta itemprop="image" content="http://iec.idrugsafety.online/index/images/share_logo.png">
    
    <!-- 动态生成meta（针对SPA应用） -->
    <script>
        // 动态添加当前页面URL
        var fullUrl = window.location.href;
        var ogUrl = document.getElementById('ogUrl');
        ogUrl.content = fullUrl
        
        // 通过链接参数强制更新微信缓存
        // 获取当前时间戳
        var timestamp = new Date().getTime();
        // 修改OG图片标签
        var ogImage = document.getElementById('ogImage');
        ogImage.content = "http://iec.idrugsafety.online/index/images/share_logo.png?v="+timestamp;
    </script>

上面共5种写法：

1：默认写法。

2：通用OG协议（推荐）：此方法适用于所有浏览器和社交平台（QQ、微博等），非微信环境。微信会定期爬取页面并缓存OG标签，所以可能会有延迟，如果对于分享标题、链接等经常变化，修改后需要等待一段时间才生效。

3：微信专属：没有测试过。

4：动态生成meta：因为微信会定期爬取页面并缓存OG标签，可以通过链接参数强制更新，但是同样也会出现第二种修改后延迟的情况。

综上，如果不使用JS-SDK，推荐使用第二种方法通用OG协议。

效果图

第一张卡片是通过手机浏览器分享时的状态，第二张卡片是微信浏览器分享时的状态（不知道是不是微信还没有爬取到，所以不显示图标）

二、微信分享配置

此方法需要使用微信的JS-SDK，此方法不在介绍，参考【PHP+微信开发】JS-SDK + php 实现分享朋友/朋友圈，QQ/QQ空间_php 分享到好友-CSDN博客

# 前端
Logo
魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

cover

全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程

avatar 魔乐社区

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda

avatar 魔乐社区

如何快速上手 hvac：HashiCorp Vault Python 客户端零基础入门指南

**hvac** 是 HashiCorp Vault 的 Python 3.X 客户端库，专为开发者提供简单高效的 Vault 交互方式。无论你是需要管理密钥、配置身份验证，还是实现安全的秘密数据存储，hvac 都能帮助你轻松搞定 Vault 的各项操作。本文将带你零基础快速入门，从安装到基础操作，让你在几分钟内即可上手使用这个强大的工具。[![hvac 客户端 Logo](https://r

avatar 魔乐社区