尧图网络科技YAOTU DIGITAL 获取报价
获取报价
首页 / 资讯中心 / 文章详情

陌陌自定义卡片链接全攻略:Open Graph标签与抓取避坑指南

发布时间:2026/9/29 15:32:08

资讯中心
01
ARTICLE

陌陌自定义卡片链接全攻略:Open Graph标签与抓取避坑指南

陌陌自定义卡片链接全攻略:Open Graph标签与抓取避坑指南
简介这份项目源码面向需要二次开发陌陌卡片功能的安卓开发者提供了一套基于HTTP POST请求实现自定义卡片链接的完整方案。核心代码包含两个方法mo131684a将URL、标题、内容、图片路径等数据封装进HashMap并按好友、群组、讨论组等同步类型添加上下文参数startTask通过反射获取目标ID监听发送按钮事件从剪贴板读取并解析JSON数据再根据类型发送对应卡片。资源包为zip格式共6个文件包含2个Java核心逻辑文件以及XML配置、README说明和.gitignore等辅助文件压缩后仅8KB轻量易读目录结构清晰。已有90人学习使用。源码对关键函数和参数给出了详细注释便于理解网络请求构造、反射调用与JSON解析流程适合有安卓开发基础、希望研究社交平台扩展机制的开发者深入学习同时明确仅供学习交流严禁商业用途。1. 陌陌自定义卡片链接是什么为什么有人愿意为它写一套源码你在陌陌里给别人甩一条链接很多时候对方看到的不只是一行URL而是一张带标题、描述和缩略图的卡片点一下才跳转。这张卡片不是陌陌自己生成的而是它的爬虫去抓你链接指向的页面读页面里的Open Graph标签后现拼出来的。所谓“自定义卡片链接”就是在你自己可控的域名或路径上放好这套标签让陌陌按你想展示的样子渲染这条消息。技术点不在陌陌客户端里而在你的服务端响应头、HTML元信息和图片外链稳定性上。这个方案最适合三类人运营人员要给活动页做高转化分享入口开发者想让自己的作品或店铺链接在陌陌里显示得像模像样而不是光秃秃一段URL还有做推广落地页的人需要区分不同渠道链接的展示内容。懂点HTML能照抄懂Nginx和后端就能做得更稳。整条链路里真正容易血亏的不是写标签而是图片域名没备案、防盗链开得太狠、URL带参数导致抓取失败这类小坑一次就能让卡片变白板。2. 先搞清楚陌陌是怎么抓卡片的Open Graph协议与服务端响应链路2.1 卡片数据的来源不在陌陌App而在你的HTTP响应里陌陌的消息卡片和微信、QQ的链接预览是同一套思路客户端拿到URL后由后台的抓取服务发起HTTP请求读取响应HTML中head里的og:系列meta标签再取其中og:title、og:description、og:image等内容拼装成卡片。如果你什么都没写它就退而求其次去找页面里的title和第一张尺寸够大的图片如果连这些都拿不到就只显示URL。所以自定义卡片链接的第一原则是让陌陌的抓取请求拿到一个干净、完整、200状态的HTML响应。任何跳转次数过多、超时、TLS握手太慢、返回了验证码页面的情况都会让卡片渲染失败。我自己调这类问题时第一步永远是先用curl -A模拟抓取看陌陌视角拿到的HTML长什么样。2.2 抓取服务最在意的HTTP细节状态码、响应头、跳转次数陌陌的爬虫请求和你浏览器不太一样它一般只认HTTP 200重定向虽然能跟进但每多一次跳转就多一分超时风险。响应头里Content-Type必须是text/html假如后端返回了application/json或text/plain爬虫很可能直接放弃解析。另外Set-Cookie、Cache-Control、Expires这些头也会影响抓取频率如果设置了强缓存陌陌可能拿旧数据展示很久。我一般会在Nginx层做一套标准配置保证卡片页和跳转逻辑分离server { listen 80; server_name card.example.com; root /var/www/card; location /card.html { add_header Cache-Control no-cache, max-age0; add_header Content-Type text/html; charsetutf-8; } location / { return 302 https://card.example.com$request_uri; } }上面这个配置的逻辑是卡片抓取URL固定在http://card.example.com/card.html它直接返回HTML不做任何跳转而真实的活动落地页放在https下通过业务接口拿到参数后再跳转过去。这样抓取链路短、状态干净真实用户又能走完整流程。参数说明no-cache并不是禁止缓存而是告诉陌陌的抓取服务缓存前必须先验证资源是否变动适合卡片内容经常微调的场景return 302那一段不是给爬虫看的是给真实用户中间层用的避免卡片URL直接暴露最终地址导致被刷参数。2.3 为什么同一个链接在微信和陌陌里展示结果不一样经常有人问我在微信里调试好的卡片发到陌陌怎么就变样了因为微信、QQ、陌陌各自维护独立的抓取缓存和图片白名单微信的图片域需要校验陌陌也有自己的审核和缓存机制。你新增一张og:image后微信那边手动刷新一下就能更新陌陌可能要等更久甚至重新抓取才生效。所以不要拿微信的开发者工具结果当唯一标准每个平台都得单独验一次。陌陌没有像微信那样的官方调试工具但可以通过改og:url参数来绕过缓存或者把图片URL后加一个无意义query参数强制它重新抓取。这些手段在后文避坑章节里我会详细展开。3. 动手做一个陌陌卡片页核心源码HTML元信息与服务端直出3.1 一份最少可用的卡片HTML模板陌陌自定义卡片链接的数据载体就是HTML本身。下面这份模板是我在项目里反复用过的基线版本不依赖任何前端框架放Nginx或任意静态托管都能直接出效果!DOCTYPE html html langzh-CN head meta charsetutf-8 title我的陌陌卡片标题/title !-- Open Graph 核心标签 -- meta propertyog:title content这里写卡片标题建议在15字以内 meta propertyog:description content这里写卡片描述文字建议控制在40~80字之间太长会被打点截断。 meta propertyog:image contenthttps://img.example.com/cover.jpg?width300 meta propertyog:url contenthttps://card.example.com/card.html meta propertyog:type contentwebsite !-- 给微信、QQ、陌陌共用的兜底标签 -- meta namedescription content如果抓取服务不认og标签这里的内容会作为描述兜底。 /head body p用户实际打开这个链接会看到的页面内容。/p /body /html逻辑说明写在代码里了og:title和og:description是卡片上两行字og:image是缩略图og:url告诉爬虫最终归属地址。标题和描述不要含有换行符、emoji和夸张符号陌陌抓取时会对特殊字符做转义偶尔会出现乱码。参数说明里有两个容易被忽略的点。第一og:image的URL不要带空格和中文协议相对地址像//img.example.com/cover.jpg虽然合法但我不推荐用直接写https://全量地址最稳。第二图片地址尽量加一个明确的?width300之类的参数这是给陌陌缩略图服务看的参考尺寸不加也能抓加了更不容易被降采样搞模糊。3.2 动态卡片服务端源码根据参数输出不同卡片标题运营场景里通常需要同一个链接在不同渠道展示不同标题比如投放A渠道写“限时活动”B渠道写“新客专享”。这时可以让后端根据query参数动态拼HTML。下面是用Node.js写的一小段直出逻辑Express风格const express require(express); const app express(); const cards { channelA: { title: 限时领券进入领取, desc: 新用户注册后48小时内可领券数量有限。, img: https://img.example.com/campaignA.jpg }, channelB: { title: 老用户专属回馈, desc: 登录即得积分兑换实物礼品。, img: https://img.example.com/campaignB.jpg } }; app.get(/card, (req, res) { const key req.query.c || default; const c cards[key] || cards.channelA; const html !DOCTYPE html html head meta charsetutf-8 meta propertyog:title content${c.title} meta propertyog:description content${c.desc} meta propertyog:image content${c.img} meta propertyog:url contenthttps://card.example.com/card?c${key} title${c.title}/title /head body p此页面仅为陌陌卡片抓取页用户请点击链接进入活动页。/p /body /html; res.set(Content-Type, text/html; charsetUTF-8); res.send(html); }); app.listen(3000);这里的核心逻辑是把渠道参数c作为输入服务端直接拼接出完整HTML返回给陌陌爬虫。注意og:url必须把c参数原样带回去不然陌陌会认为这是一张不稳定的动态页缓存逻辑会变得诡异。参数说明文本内容不要直接来自不受信任的输入建议和上方示例一样用白名单映射防止被注入标签内容搞坏卡片。另外这个接口不能做登录校验因为陌陌的抓取服务不会带你的Cookie它拿到的就是公开内容。3.3 静态托管方案Gitee Pages、腾讯云开发或者自建Nginx如果不想为了卡片页专门写后端纯静态托管也够了。把HTML文件丢到对象存储或者静态托管平台上只要保证URL直接返回HTML即可。我实际项目中是这样分配的需要频繁换图和文案的活动卡片放在后端动态输出固定内容放Nginx静态文件避免动态渲染压力。静态方案里最容易踩的坑是平台给页面套了框架壳比如纯静态托管平台会把404页变成200返回或者默认给你套一个统一导航头。这些都会污染陌陌抓取到的HTML导致卡片里出现不相关文字。验证方式很简单curl -L https://你的页面地址然后看返回内容是不是只有你写的html结构。4. 让卡片缩略图稳定显示图片外链、CDN与防盗链的取舍4.1 图片域名必须稳定且不能在境外CDN上裸奔陌陌抓取og:image时后台几乎都会对图片再做一次转存或缩略处理。图片所在域名的稳定性直接决定卡片缩略图能不能出来。常见的翻车场景包括图片在你自己的博客域名下但博客开启了Hotlink Protection防盗链陌陌抓取时Referer为空或不是想象值直接被拒图片放在GitHub仓库里国内部分地区访问慢陌陌请求超时图片是动态生成的临时URL有效期半天就失效。我一般会把卡片图片放到独立的图片域名下不跟业务主站共用Cookie域同时开启CDN缓存。如果一定要用防盗链白名单里务必把陌陌的抓取UA或空Referer放行否则就是自己给自己上锁。location ~* \.(jpg|jpeg|png|webp)$ { valid_referers none blocked card.example.com *.example.com; if ($invalid_referer) { return 403; } }上面这段防盗链配置里none是关键——它表示允许不带Referer的请求通过。陌陌、微信这类社交平台的后台抓取服务很多时候发起的请求根本不带Referer你把none去掉就意味着流量直接掐断。参数说明不要学某些CDN模板把防盗链配置得特别严社交平台抓图是自动化的它没有人工帮你构造Referer的步骤。宽松处理图片严格处理支付和用户数据接口这个思路要区分开。4.2 图片尺寸、格式与压缩哪些参数会影响陌陌缩略图质量陌陌的卡片缩略图有固定裁剪比例实践下来接近1比1的方图展示最好横图会裁剪成中间部分竖图会被压缩成小方块。推荐的图片规格是600x600或720x720JPEG质量控制在80左右大小不要超过300KB。超过1MB的图抓取转存时经常失败卡片会直接无图。格式上建议用JPEGPNG透明通道在转存后容易变黑底WebP在部分老版本App里不支持。如果你只有WebP原图服务端顺手用sharp转一张JPEG再给og:image用。这个处理在动态卡片源码里加入比较省事const sharp require(sharp); async function makeCardImage(src) { const buffer await sharp(src) .resize(640, 640, { fit: cover }) .jpeg({ quality: 82 }) .toBuffer(); return buffer; }上面这个函数把原始图片缩放裁剪为640见方、质量82的JPEG兼顾清晰度和文件大小。逻辑说明就一句保证陌陌和微信抓到的图片是一张稳定的正方形图而不是原图直出的大文件。参数说明fit: cover会在裁剪时保证中间内容保留适合人脸或商品居中的素材如果图里关键信息偏左偏右改{ fit: cover, position: left }之类指定锚点避免裁掉主体。4.3 图片更新后陌陌不生效缓存刷新口诀卡片图换新后陌陌经常还显示旧图。原因有两个层面网络层CDN缓存没过期或者陌陌后台的服务端缓存没刷新。前者靠请求参数解决后者靠换路径解决。好用的是双管齐下——把图片文件名改成有版本号的同时og:url里加v2参数强制陌陌视作新链接重新抓取。这背后有个经验值陌陌对同一个og:url的缓存周期可能长达一天到几天你改描述、改图片但URL不变对方就是看不见。工程上最省心的做法是不要复用URL每次活动都新建一个路径老路径让它自然淘汰。代价是分享出去的旧卡片封面就永远留在旧图上了但这对运营来说反而是可控的因为不同批次投放能分别统计。5. 陌陌卡片链接的排错与避坑现象、原因、解决办法5.1 卡片显示出来的是网页标题而不是你设置的og:title现象陌陌聊天里预览的标题是浏览器标签页上的title描述是页面正文第一段图倒是正常的。原因抓取服务没有读到og:title和og:description可能因为meta标签写在了body里或者HTML结构不标准。解决用HTML校验器跑一遍确认og:标签全部在head内且属性名写的是propertyog:title。值得提醒的是有些框架会转义property为>import requests from bs4 import BeautifulSoup def check_card(url): resp requests.get(url, timeout10, headers{ User-Agent: Mozilla/5.0 (compatible; CardCheck/1.0) }) assert resp.status_code 200, fstatus{resp.status_code} assert text/html in resp.headers.get(Content-Type, ), not html soup BeautifulSoup(resp.text, html.parser) for prop in [og:title, og:description, og:image]: tag soup.find(meta, propertyprop) assert tag and tag.get(content), fmissing {prop} img_url soup.find(meta, propertyog:image)[content] img_resp requests.head(img_url, timeout10, allow_redirectsTrue) assert img_resp.status_code 200, fimg failed {img_resp.status_code} if __name__ __main__: check_card(https://card.example.com/card.html)逻辑说明这里没有用完整的无头浏览器去模拟陌陌App因为抓取服务拿到的就是HTML正则或BeautifulSoup足够判断结构是否齐全。断言图片URL用HEAD请求就够了能有效减少CDN流量。深入一点把图片宽高、大小、以及CDN缓存时间也一并检查会更稳。图片尺寸可以单独起一个线程去拉取并解析不必把逻辑全塞在check_card里。最后说一个个人的习惯我每次上线新活动卡片的当天会定个闹钟间隔几小时去同一链接自查一次不是一次验证完就万事大吉。陌陌这类平台的抓取节点可能会因地域缓存逐渐失效而表现不同。改服务端配置时先动A/B其中一个域名做对比稳定后再灰度切换不要一次性全量换配置。这样踩坑次数会明显降下来。希望帮到你。本文还有配套的精品资源点击获取
02
RELATED NEWS

相关资讯

更多网站建设与数字化升级内容

03
WHY YAOTU

想打造同款高转化官网?

懂行业、懂生意,从建站到增长一站式陪跑

◈

场景化定制

不做模板站,围绕你的业务场景量身设计,小众不撞款。

◐

营销型架构

以转化目标组织内容与路径,让官网真正带来询盘。

▲

全周期服务

设计、开发、运营、运维一体,上线只是开始。

免费获取你的建站方案

留下需求,专属顾问 24 小时内为你输出方案建议。