让微信二次分享能够正确显示摘要和图片,需要在网页head部分添加相关的meta标签。以下是具体的步骤:
让微信二次分享能够正确显示摘要和图片,需要在网页head部分添加相关的meta标签。以下是具体的步骤:
- 在head部分添加以下meta标签:
<meta property="og:title" content="网页标题"/>
<meta property="og:description" content="网页描述"/>
<meta property="og:image" content="图片链接"/>
其中,og:title
表示分享卡片的标题,og:description
表示分享卡片的描述,og:image
表示分享卡片的图片。可以通过修改content
属性来设置这些值。同时,也可以添加<meta property="og:url" content="网页链接"/>
来指定分享卡片的链接。
- 设置图片的尺寸和类型
微信会对分享卡片中的图片进行检测,如果图片不符合要求则会无法显示。因此,需要将图片的宽度调整为至少200像素,高度不限。同时,图片格式必须是jpg、png或gif。
下面给出两个示例:
示例1:在WordPress中添加meta标签
在WordPress中,可以通过在header.php
文件中添加以下代码来添加meta标签:
<meta property="og:title" content="<?php the_title(); ?>"/>
<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt()); ?>"/>
<?php if ( has_post_thumbnail() ) : ?>
<meta property="og:image" content="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>"/>
<?php endif; ?>
其中,the_title()
表示当前文章的标题,get_the_excerpt()
表示当前文章的摘要,wp_get_attachment_url()
表示获取当前文章的缩略图链接。
示例2:在HTML页面中添加meta标签
在HTML页面中,可以通过在head部分添加以下代码来添加meta标签:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
<meta property="og:title" content="分享卡片的标题"/>
<meta property="og:description" content="分享卡片的描述"/>
<meta property="og:image" content="分享卡片的图片链接"/>
</head>
其中,<title>
标签表示网页的标题。charset
和viewport
属性用于指定网页的编码格式和缩放比例。og:title
、og:description
、og:image
分别表示分享卡片的标题、描述和图片。需要根据实际情况修改这些属性的值。
总结:
通过在网页头部添加meta标签,可以解决微信二次分享不显示摘要和图片的问题。在实际操作中,需要根据具体情况设置标签的内容和属性,使分享卡片能够正确显示。
本文标题为:解决微信二次分享不显示摘要和图片的问题


基础教程推荐
- IE6下css设置容器高度的BUG不能小于某个值 2023-12-11
- layui use 定义js外部引用函数的方法 2024-01-06
- 关于javascript:添加图标到angular材质输入 2022-09-21
- 第9天:第一个CSS布局实例 2022-11-07
- javascript 通过封装div方式弹出div窗体 2023-11-30
- Vue(01)表单校验 2023-10-08
- 解决uniapp下载视频,使用uni.downloadFile下载大文件会出现下载到一半就停止问题 2023-08-29
- vue项目中的下载或者导出 2023-10-08
- 黑客帝国特效(html+css+js) 2023-10-27
- Spring MVC前端与后端5种ajax交互方法【总结】 2023-01-31