最新H5网页分享到Twitter、Facebook带缩略图
2024-04-15 18:22:10
请注意
1.网页的meta标签一定要是后端生成的页面，也就是说server-side rendering，简称SSR
2.如果是页面中通过JS获取到数据后，动态修改meta标签内容，在分享时是无效的；因为facebook和twitter在页面刚打开时JS还没有加载时就读取了meta标签，如果这时你从服务器获取到了数据，动态修改了meta标签内容，会无效的
- Facebook是
og:开头的，动态调试你的页面是否配置正确，测试地址：https://developers.facebook.com/tools/debug/ - Twitter是
twitter:开头的
- Facebook是
Twitter的meta tags
<meta property="twitter:url" content="https://baidu.com/share/share.php?post_uuid=9463af08-660d-11ea-9965-4ffecca286d7&locale=zh-CN&hide=0"><meta property="twitter:type" content="article"><meta property="twitter:title" content="Netflix在午夜<br>有一些电影推荐吗？"><meta property="twitter:description" content="Netflix在午夜<br>有一些电影推荐吗？"><meta property="twitter:image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim"><meta name="twitter:image:src" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/1200/interlace/1|imageslim">
Facebook的meta tags
<meta property="fb:app_id" content="748486512258997"><meta property="og:url" content="https://baidu.com/share/share.php?post_uuid=9463af08-660d-11ea-9965-4ffecca286d7&locale=zh-CN&hide=0"><meta property="og:type" content="article"><meta property="og:title" content="Netflix在午夜<br>有一些电影推荐吗？"><meta property="og:description" content="Netflix在午夜<br>有一些电影推荐吗？"><meta property="og:image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim">
通用的meta tags
<meta property="url" content="https://baidu.com/share/share.php?post_uuid=9463af08-660d-11ea-9965-4ffecca286d7&locale=zh-CN&hide=0"><meta property="type" content="article"><meta property="title" content="Netflix在午夜<br>有一些电影推荐吗？"><meta property="description" content="Netflix在午夜<br>有一些电影推荐吗？"><meta property="image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim"><meta itemprop="image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim">完整的网页
<html><head><title>Netflix在午夜<br>有一些电影推荐吗？</title><link rel="shortcut icon" href="https://qneventsource.mmantou.cn/faviconico.png" type="image/x-icon"><link rel="shortcut icon" href="https://qneventsource.mmantou.cn/faviconico.png?imageView2/2/w/60/h/60/interlace/1|imageslim" type="image/x-icon"><link rel="shortcut icon" href="https://qneventsource.mmantou.cn/faviconico.png?imageView2/2/w/76/h/76/interlace/1|imageslim" type="image/x-icon"><link rel="shortcut icon" href="https://qneventsource.mmantou.cn/faviconico.png?imageView2/2/w/120/h/120/interlace/1|imageslim" type="image/x-icon"><link rel="shortcut icon" href="https://qneventsource.mmantou.cn/faviconico.png?imageView2/2/w/152/h/152/interlace/1|imageslim" type="image/x-icon"><meta property="url" content="https://baidu.com/share/share.php?post_uuid=9463af08-660d-11ea-9965-4ffecca286d7&locale=zh-CN&hide=0"><meta property="type" content="article"><meta property="title" content="Netflix在午夜<br>有一些电影推荐吗？"><meta property="description" content="Netflix在午夜<br>有一些电影推荐吗？"><meta property="image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim"><meta itemprop="image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim"><meta property="fb:app_id" content="748486512258997"><meta property="og:url" content="https://baidu.com/share/share.php?post_uuid=9463af08-660d-11ea-9965-4ffecca286d7&locale=zh-CN&hide=0"><meta property="og:type" content="article"><meta property="og:title" content="Netflix在午夜<br>有一些电影推荐吗？"><meta property="og:description" content="Netflix在午夜<br>有一些电影推荐吗？"><meta property="og:image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim"><meta property="twitter:url" content="https://baidu.com/share/share.php?post_uuid=9463af08-660d-11ea-9965-4ffecca286d7&locale=zh-CN&hide=0"><meta property="twitter:type" content="article"><meta property="twitter:title" content="Netflix在午夜<br>有一些电影推荐吗？"><meta property="twitter:description" content="Netflix在午夜<br>有一些电影推荐吗？"><meta property="twitter:image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim"><meta name="twitter:image:src" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/1200/interlace/1|imageslim"><meta property="al:url" content="https://baidu.com/share/share.php?post_uuid=9463af08-660d-11ea-9965-4ffecca286d7&locale=zh-CN&hide=0"><meta property="al:type" content="article"><meta property="al:title" content="Netflix在午夜<br>有一些电影推荐吗？"><meta property="al:description" content="Netflix在午夜<br>有一些电影推荐吗？"><meta property="al:image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim"></head>
<body>
<!-- 网页真实显示的内容 -->
</body>
</html>
效果
最新H5网页分享到Twitter、Facebook带缩略图相关推荐
- Android微信浏览器标题,企业微信内H5网页分享微信好友ios正常安卓自定义标题、图标、未生效...
企业微信内H5网页分享微信好友ios正常安卓自定义标题.图标.未生效 问题类型 API/组件名称 终端类型 微信版本 基础库版本 Bug 'onMenuShareWeibo', 'onMenuShar ...
- 微信分享php网站不带缩略图,分享网页到微信朋友圈，怎样才能带缩略图？
做微信H5的朋友都知道,在过去要设置"分享到朋友圈"的缩略图,是非常简单的一件事情,只需要制作一张300*300的缩略图片(如命名为300.jpg),然后在页面head部分的开头引 ...
- 解决微信H5网页分享报错：fail link must be in js secure domain list
fail link must be in js secure domain list // 失败链接必须在js安全域列表 正常来说碰到这个问题,是分享的链接没有在公众号的后台配置JS接口安全域名 ...
- 微信H5网页分享只显示链接处理办法
1.在微信中配置好相关接口后 分享到QQ和QQ空间是正常的,但是分享给朋友和分享到朋友圈就是链接如下图 2.解决办法: a.要分享的链接使用二维码生成后再分享 ,就可以 ...
- 宜远公众号H5网页AI测肤报告分享
发现网上找的H5网页分享功能的资料都不够详细. 拿宜远H5网页AI测肤报告分享为例,整理一下H5网页微信分享给朋友和分享朋友圈的功能 1.加载微信的jssdk //微信h5 import w ...
- twitter,facebook 分享网页样式定制 以及 调试
Twitter 分享可以在文件头中设置各种网页分享样式,主要有summary 和 summary_large_image等 如果设置有问题,可以在这些页面中测试,或者清理之前的缓存. Twitter ...
- Facebook、Twitter网页分享
Facebook分享 Facebook分享是爬虫页面HTML文件配置的分享内容 Twitter分享 基本同Facebook分享.分享图不可动态修改. 差别:js触发的分享,Twitter可以修改分享文 ...
- 前端H5各种qq,微博,fb,whatsapp等网页分享的链接
####前端H5各种qq,微博,fb,whatsapp等网页分享的链接(我用到过的,一点点汇总) 代码链接如下: <a href = "https://sns.qzone.qq.com ...
- 前端必备技能~H5网页无法转发给朋友和分享朋友圈，解决方法汇总
H5转发给朋友和分享朋友圈,在前端经常碰到,2021年9月微信又出新政策,不允许通过微信或者浏览器访问H5页面进行转发给朋友和分享到朋友圈. 下面把最新解决方法汇总一下,分享给大家,欢迎留言讨论. 目 ...
最新文章
- python爬虫原理-干货|如何入门 Python 爬虫？爬虫原理及过程详解
- 轻量级Web应用程序框架：PrimeFaces（JSF）+ Guice + MyBatis（第2部分）
- 第 6-7 课：Java 分布式框架面试题合集
- 春晚红包：挺住的百度和崩坏的应用商店
- 揭秘企业实现企业盈利有哪些原则？
- 应届生月薪2W，财务人却不涨薪？那是你不会这种财务分析
- 10 款最新的 jQuery 内容滑块插件
- python-可变循环
- [转载] python中chr()和ord()函数的用法
- 使用python爬取App安卓应用商店评论并生成词云
- DNSPOD实现DDNS动态域名解析功能
- r语言做断轴_手把手教你用R语言做回归后的残差分析
- C# 窗体修改应用程序图标
- 微信的WXML和HTML WXSS和CSS的区别详解
- 先行一步，7大技术创新和突破，阿里云把 Serverless 领域的这些难题都给解了
- linux这个名字,Linux 今天 24 岁了，他爸爸最初起的名字却不是这个
- Pyinstaller - 你的“神”队友
- 用Java实现矩阵乘法
- 单代号网络图计算例题_阀门上面的代号表示什么，看完就懂了~~
- 《程序员的自我修养—链接、装载与库》pdf书签，目录分享