在使用APP内嵌浏览器进行网页分享时，为了分享美观，大部分APP会自行进行卡片化处理。但各个APP生成卡片的逻辑稍有不同，在此稍作整理。
由于微信分享条件严苛，本文不涉及微信分享的配置，如有需要，参阅微信开放文档。
这篇文章也有较为详细的步骤介绍。
手机QQ
手机QQ的分享配置有SDK、meta两种，但由于 QQ 不是业务的主要使用场景，使用 qq-js-sdk 显得代价过于高昂，使用meta标签也能够起到同样的作用：
<meta itemprop="name" content="这是分享的标题" />
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png" />
<meta name="description" itemprop="description" content="这是要分享的内容" />
存在的问题是，meta方式无法对分享链接进行自定义，只能分享当前链接。
阿里系APP
钉钉、支付宝等阿里系APP支持基于Open Graph Data协议的分享配置策略，同样支持的APP还有Twitter、Facebook、Google+、Pinerest等，看起来是性价比非常高的配置，是非常值得写上的。
摘自钉钉开放平台文档：
钉钉会尝试抓取和分析聊天输入框中的链接的网页内容，并根据Open Graph Data协议提取其中的标签作为分享标签的内容。
Open Graph Data协议是一套Metatags的规格（以下简称OGP），用来标注你的页面，告诉我们你的网页快照。帮助社交app高效、准确的获取网页中核心的链接、标题、主图、正文摘要信息，使得该网页在社交分享中有更好的展现体验。
如果网页不支持OGP，那么基于算法和规则来提取网页中标题、主图、正文摘要，准确性无法做到100%，体验也不能充分保证。尤其是有部分页面html采用前端js渲染，而不是服务端渲染，会导致无法提取主图、正文摘要，链接卡片体验比较糟糕。
注意事项：Metatags必须在服务端渲染，不能由前端js渲染。原因是出于性能和体验考虑，链接转卡片服务不支持执行HTML中的js。
<!-- open graph data start -->
<meta property="og:title" content="Neal's Pandora's Box" />
<meta property="og:url" content="https://winzipsdo.github.io" />
<meta property="og:image" content="https://winzipsdo.github.io/share-img.jpg" />
<meta property="og:description" content="welcome to my page" />
<!-- open graph data end -->
可以对我的个人博客进行分享以查看分享效果（不含微信分享配置）。
