微信分享链接的缩略图和标题

一、微信内分享

在微信内打开链接后，点右上角【…】选择【发送给朋友】或【分享到朋友圈】，这种分享方式获取缩略图的方法：

方法一：在页面 body 最上方添加 300*300 像素的 img

如该图片不需要显示，可以用 css 隐藏，但不能直接对 img 设置 display: none;。

可以在父层 div 上设置 display: none; 或者对 img 设置 position: absolute; visibility: hidden;。

<div style="display:none;"><img src="/img/thumbnail.png" alt=""></div>

方法二：通过微信 JS-SDK 的分享接口

这种方法需要一个微信公众号的 app_id，同时需要一个后端服务生成 signature。好处是可以定制分享的标题、缩略图、描述。

二、从浏览器分享

在浏览器打开链接后，点分享图标，选择【微信】，这种分享方式获取缩略图的方法：

在页面的 head 部分添加 Open Graph Metadata：

<meta property="og:type" content="website" />
<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="http://www.example.com/img/thumbnail.png">
<meta property="og:url" content="http://www.example.com/">

其中 og:image 影响浏览器分享时的图标，需要指定图片的完整路径。

https://github.com/thedaviddias/Front-End-Checklist

微信扫码下载APP解决方案

转载于:https://blog.51cto.com/14302491/2383185

微信分享链接的缩略图和标题相关推荐

H5网页如何在微信中自定义分享链接（可设置标题+简介+图片）
自定义分享链接是什么? 自定义微信分享链接是指将一条网页链接通过微信接口生成一张卡片,并且该卡片的标题,内容和图片都可以自己编辑.如下图效果 ● 自定义网页链接示例(带标题,内容简介,缩略图) ● 未 ...
h5 修改title 微信_H5网页如何在微信中自定义分享链接（可设置标题+简介+图片）...
最近开发h5网页,在分享网页到微信好友时,发现我的分享链接只有标题和链接地址: 图一却不像自定义微信分享链接一样,分享的链接像生成一张卡片,有对应的标题,内容和图片: 图二要达到上图自定义文案与图 ...
解决微信分享链接不能显示缩略
微信分享链接,如果不是公众号合法域名,分享或者转发出去的内容会被微信默认的图标替换,现在出解决方案,必须要调用JSSDK,必须要调用! 1. 需要有一个已经认证的微信公众号 2.按照官方文档依次配置域 ...
vue 分享微信传参_vue实现微信分享链接添加动态参数的方法
微信分享时分享链接携带参数可能不是固定的需要在分享的前一刻才知道这里就是动态设置分享链接的基本写法代码不是那么详尽但大致流程如下 1.安装引用jssdk npm install --save ...
微信分享链接卡片，php业务处理
微信分享链接自定义卡片和内容信息官方文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 准备工作 1 ...
微信分享链接优化 title icon 描述
项目中要做微信分享链接的优化,展示公司产品的相关信息.摸索了下,也踩了不少坑,记录一下. 起步微信分享到微信好友或qq好友微信分享到朋友圈或qq空间微信分享到企业微信注意事项起步 (1)查阅 ...
微信分享链接怎么自定义标题、描述和缩略图？
什么是微信图文链接? 图文链接就是把一条普通的分享链接经过技术编辑,生成一张卡片,卡片表面包含标题,简介,小图片,用户点击卡片机会跳转相应的网页. 没生成图文链接之前,不仅把网址显示出来,缩略图也是不 ...
微信分享朋友圈固定缩略图 php,微信转发或分享朋友圈带缩略图、标题和描述的实现方法...
自己做博客以来,很早之前分享过文章至朋友圈,那个时候分享过去的文章自动获取页面的比例适合的图片为所缩略图: 后期就很少分享至朋友圈, 近来分享文章给朋友后,发现不带缩略图和简介了,觉得这样很不好看,百 ...
微信js-sdk分享链接自定义图片描述标题
首先需求是:将微信扫一扫的分享功能回形针图片描述标题换成自定义的大概是从上往下的这个效果. 好了需求已经很明确了,接下来说一下实现过程.先贴两个很有用的帖子可以借鉴参考: http://ww ...

微信分享链接的缩略图和标题

一、微信内分享

微信分享链接的缩略图和标题相关推荐

最新文章

热门文章