如何自定义QQ移动端卡片分享的主标题、副标题、缩略图? - wordpress开发

有的人分享的链接自带标题和副标题和缩略图,就很好看,但是我自己的却是机械截取的一团,这篇wordpress开发教程就教大家如何解决这个问题

在分享我们写的博文时,会遇到这样一种情况,有的人分享的链接自带标题和副标题和缩略图,就很好看,但是我自己的却是机械截取的一团,看起来就不舒服,那么是咋回事呢?这个就是代码层面的原因了,这篇wordpress开发教程就教大家如何解决这个问题。

  • 参考来源: https://www.dpaoz.com/143
如何自定义QQ移动端卡片分享的主标题、副标题、缩略图? - wordpress开发
背景图片
如何自定义QQ移动端卡片分享的主标题、副标题、缩略图? - wordpress开发

H5手Q分享通用接口代码片段

<meta itemprop="name" content="网页标题">

<meta itemprop="description" content="网页描述">

<meta itemprop="image" content="缩略图">

将一以上代码写在页面head标签中。

H5手Q分享通用接口参数说明

itemprop="name"

网页标题,不同社交APP截取的长度都不一样,然后手机屏幕大小也会再次不同程度裁减文字。微信只用这个标题。

itemprop="description"

网页简介/摘要,和网页标题一样有长度限制,如果小屏幕可能还会裁减。微信不会使用到这个标签。

itemprop="image"

网页缩略图/分享图标,显示在分享内容的左边,图片支持.jpg、.png等常见格式,建议使用200px*200px的图片,如果太大可能读取比较慢。

除了代码层面解决问题,你还可以通过wordpress插件来生成海报,分享海报出去,也是一个不错的选择:

如何自定义QQ移动端卡片分享的主标题、副标题、缩略图? - wordpress开发-Npcink
如何自定义QQ移动端卡片分享的主标题、副标题、缩略图? - wordpress开发-Npcink

WP Poster - WordPress文章分享海报插件

如何自定义QQ移动端卡片分享的主标题、副标题、缩略图? - wordpress开发-Npcink
如何自定义QQ移动端卡片分享的主标题、副标题、缩略图? - wordpress开发-Npcink

博客社交分享组件WP插件 - 打赏/点赞/微海报/社交分享四合一

网站

样机 - 截图的设备模型生成器(笔记本、台式电脑、手机、平板)

2019-10-5 20:23:43

国内主题

Panda PRO - 资讯类wordpress自媒体博客主题

2019-11-5 7:52:24

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索