【Safari浏览器H5分享链接的标题，描述，头像的修改】

最新推荐文章于 2023-12-26 16:40:44 发布
最新推荐文章于 2023-12-26 16:40:44 发布
阅读量664 收藏
点赞数
文章标签： safari 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/min_fox/article/details/131902967
版权
在Safari浏览器中，当使用特定的OG元标签分享内容到QQ时，头像显示可能失效。为解决此问题，可以在HTML入口文件中添加`<metaitemprop=imagecontent=xxxxxxxx>`来确保图片正确显示。
摘要由CSDN通过智能技术生成

Safari浏览器分享到qq和微信添如下代码。

在入口文件html中：

<meta property="og:title" content="XXXXXXX" />
<meta property="og:url" content="XXXXXXX" />
<meta property="og:image" content="XXXXXXX" />
<meta property="og:description" content="XXXXXXX" />
<meta name="description" content="XXXXXXX" />

以上修改，分享到QQ中头像失效

解决办法：在入口文件html中添加

<meta itemprop="image" content="xxxxxxxx">
Min_Fox
关注
兼容各个浏览器的H 264播放 H 264+HTML5+FLOWPLAYER+WOWZA+RMTP
hftyfdg的博客
11-09 746
兼容各个浏览器的H 264播放 H 264+HTML5+FLOWPLAYER+WOWZA+RMTP
聊聊H5的测试方法
binbinyouni的专栏
03-26 399
在我们平常的测试的过程中，会遇到一些H5页面的测试，对于H5的测试，本人在测试的过程中曾经遇到一些坑，为了避免大家犯同样的错，总结出来供大家参考。 这里告诉大家一个通用的思考方式，在实际工作和面试过程中你可以这样应用，面试官一般情况下是找不到任何的毛病的。在拿到一个项目后，我们主要通过以下方面去考虑测试：功能测试、UI测试、兼容性测试、性能测试、安全测试、网络测试。如果是APP的话，需要加上：安装、卸载及覆盖安装测试，耗电量测试。 首页需要保证该项目的功能能够正常，接着再去测试UI、兼容性、性能、安
vue h5页面唤起浏览器原生分享模块
weixin_63453708的博客
08-11 4382
vue h5页面唤起浏览器原生分享模块 兼容性强
无需公众号实现微信JSSDK分享卡片！Safari浏览器分享到微信自动成卡片！
TANKING，开源开发者！
11-17 916
要在微信分享卡片，需要接入微信自家的JSSDK，比较麻烦，还需要认证公众号，但是如果你没有这样的条件，那么你也可以试试使用iOS的Safari浏览器轻松实现，只需要在html中加入3个meta即可。
最新H5网页分享到Twitter、Facebook带缩略图
VictorZhang
03-25 1万+
Twitter https://twitter.com/intent/tweet?text=Work queue with Go and RabbitMQ by @masnun https://link.medium.com/5ayv7VMv04
实现h5网页微信分享、朋友圈分享功能（微信右上角分享）
qq_39532984的博客
07-06 4752
后台工作: 根据微信网页开发文档撰写一个接口返回一个对象给前端, 以下为返回结果。微信打开h5网页右上角分享功能需要前端和后台配合实现功能。2. 引入SDK,并进行相关配置。1. 获取微信网页SDK。
基于vue的h5网页微信分享链接图标丢失问题解决
qq_33315564的博客
11-03 3219
基于vue的h5网页微信分享链接图标丢失问题解决微信JS-SDK说明文档怎样调用微信JS-SDK重点 对于目前的移动互联网，客户端分成了安卓、IOS和h5三大块，为了引流，安卓和ios往往会分享到微信、QQ、微博等社交工具，第一次分享时图标、标题和描述是IOS和安卓配置的，对于web前端所做的分享页无需做任何操作。 但如果我们在微信打开这个链接之后，再次分享出去，分享的描述会变成链接地址，分享的图标也不见了。 查了相关文章，有说直接再网页body标签里面直接写img标签，设置样式，然而并不行，就选择用了
无需第三方接口的本地名片H5自动生成器
微信个人名片H5生成器是一款可以在微信内分享的个人名片生成工具。H5是基于HTML5技术开发的，可以在移动端浏览器上展示的网页。通过该生成器，用户可以自定义并生成包含个人头像、姓名、联系方式和个人介绍等信息的...
企业微信应用实战踩坑之路
weixin_57646982的博客
07-09 1620
背景 企业微信这两年在线下场景呈现爆炸性增长趋势，相比个人微信而言，企业微信有很多个人微信无法比拟的优势，比如品牌标识的加强，外部客户的管理，丰富的运营手段等等，说白了企业微信就是面向企业使用的，个人微信是面向个人使用的，定位的不同也决定了企业微信更加适合在运营、营销、推广方面来使用。经过 2021.3 以来的 2 个大版本的产品迭代，目前学而思一对一企业微信已经在用户画像、标签体系建设、裂变活动、渠道活码、群发助手、多主体支持等方面有了生产环境的实践经验。这篇文章分享一下学而思一对一在开发企业微信应用过
技术淘宝
热门推荐
weixin_34379433的博客
06-23 2万+
html微信分享没有图片不显示,微信分享网页链接缩略图不显示解决方法
weixin_31499719的博客
06-04 4851
微信分享网页不显示缩略图片的原因为规范自定义分享链接功能在网页上的使用，自2017年4月25日起，JSSDK“分享到朋友圈”及“发送给朋友”接口，自定义的分享链接，其域名或路径必须与当前页面对应的公众号JS安全域名一致，否则将调用失败。也就是说如果你想你的网站在被分享时显示缩略图，那么你要有一个公众号，并且在公众号内设置JS安全域名，也就是添加你网站的网址，这是必须的，如果这一步不能实现，那么你不...
利用h5 meta 头标签设置og属性进行帖子分享图片时而有时而无
weixin_30636089的博客
12-28 560
<meta property="og:title" content="fgsfg"> <meta property="og:description" content="fgsfg"> <meta property="og:image" content="图片的绝对路径"> 　　 有部分帖子分享可以看到图片，有的还是...
【H5页面分享框的标题和描述】
最新发布
Min_Fox的博客
12-26 1300
在H5 项目中，页面通常在浏览器或者微信,QQ中打开，经常会分享给自己的好友，此时用户就会看到当前网站的分享链接内容，如果不去编辑链接内容，用户将看到张空白的分享链接，不利于用户的观看，因为不利于网站的传播。下面我们来了解一下property=og的用途。property=og 标签是一种开放内容协议（Open Graph Protocol）的标签，它可以让网页成为一个“富媒体对象”，并被其他社会化网站如Facebook、百度、谷歌等引用和展示。
微信H5页面禁止分享给好友和朋友圈及屏蔽微信复制链接功能
細水、長流√的专栏
09-07 3485
分享到Weibo："menuItem:share:weiboApp"发送给朋友："menuItem:share:appMessage"分享到朋友圈："menuItem:share:timeline"分享到FB："menuItem:share:facebook"分享到QQ空间："menuItem:share:QZone"一些特殊公众号："menuItem:share:brand"分享到QQ： "menuItem:share:qq"邮件："menuItem:share:email"
网页分享到微信怎么才能自定义标题，内容和图片？
walajiao的博客
07-14 540
** 网页分享到微信要怎么才能自定义标题，内容和图片呢？ 需求概述 微信中可以直接转发网页链接，用户在微信内置浏览器中打开后可以通过微信浏览器中右上角进行分享到朋友，朋友圈，QQ等。但直接这样分享的话，用户看到的只是一条链接，没有任何的图文内容。 如下图，图1是别人分享给我的链接效果，图2是我分享给别人的效果。两种方案的用户体验我想都不用我多说了，一眼就能看的出来. 方案实现 我自己看了下很多方法写的很模糊，其实并不需要那么多繁琐的代码，用我的第三方软件就可以完美解决，jh831x ...
html 微信分享 图片不显示图片,html微信浏览器分享显示图片的问题
weixin_35282700的博客
06-04 1145
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">demotitle>varimgUrl= "http://musicdata.baidu.com/data2/pic/115424459/115424...
Ios 微信分享文章给朋友或朋友圈不显示title和图片
kevink的博客
07-16 1601
JSSDK使用步骤 步骤一：绑定域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 备注：登录后可在“开发者中心”查看对应的接口权限。 这里注意：JS接口安全域名一定要填写正确，区分子域名，且主域名需要通过备案！没有满足这一步，无法继续测试。 步骤二：引入JS文件 在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js 请注意，如果你的页面启用了https，务必引
url动态追加参数_url设置的注意事项有哪些？
weixin_39777242的博客
12-14 425
　网站优化中网站页面的地址也就是url地址，如果url处理的好会对网站优化有很大的帮助，接下来老张就来为您分享url设置的注意事项。　　1.使用静态路径　　在搜索引擎抓取中静态页面比动态页面容易抓取，动态页面url中会含有很多参数，这些参数会导致搜索引擎抓取困难，所以网站的url尽量使用静态url。　　2.url中包含关键词　　在url设置时添加关键词，这样既能突出关键词，增加网页的相关性，也能让...
分享文本到微信失败 checkArgs fail, description is invalid 的解决
dlm504的博客
07-12 692
项目场景： 最近用户反馈一个问题，分享文本到微信居然失败了，在此记录下这次的处理。 问题描述： 分享文本到微信失败，查看日志 发现了关键错误信息 sendReq checkArgs fail checkArgs fail, description is invalid 原因分析： 看日志应该是description 出的问题，难道是文本内容过长了？ 去 微信开发者网站 看了下，内容小于 10Kb，应该可以的 等等，这里说的是 text 的限制，而不是 msg.description 的限制，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值