让微信二次分享能够正确显示摘要和图片,需要在网页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标签,可以解决微信二次分享不显示摘要和图片的问题。在实际操作中,需要根据具体情况设置标签的内容和属性,使分享卡片能够正确显示。
本文标题为:解决微信二次分享不显示摘要和图片的问题
基础教程推荐
- javascript创建cookie、读取cookie 2024-02-05
- CSS将img图片填满父容器div自适应容器大小的实现方法 2024-01-20
- layui数据表格获取数据 2023-08-31
- 使用display:none时隐藏DOM元素无法获取实际宽高的解决方法 2022-11-20
- 基于ajax html实现文件上传技巧总结 2023-01-21
- [js+css]点击隐藏层,点击另外层不能隐藏原层 2023-12-02
- Three.js实现简单3D房间布局 2024-01-08
- 微信小程序API—获取定位的详解 2024-02-06
- vue 基于vue-seamless-scroll无缝滚动 2023-10-08
- vue3获取当前路由地址的两种方法 2024-02-08