解决微信二次分享不显示摘要和图片的问题

让微信二次分享能够正确显示摘要和图片,需要在网页head部分添加相关的meta标签。以下是具体的步骤:

  1. 在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="网页链接"/>来指定分享卡片的链接。

  1. 设置图片的尺寸和类型

微信会对分享卡片中的图片进行检测,如果图片不符合要求则会无法显示。因此,需要将图片的宽度调整为至少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>标签表示网页的标题。charsetviewport属性用于指定网页的编码格式和缩放比例。og:titleog:descriptionog:image分别表示分享卡片的标题、描述和图片。需要根据实际情况修改这些属性的值。

总结:

通过在网页头部添加meta标签,可以解决微信二次分享不显示摘要和图片的问题。在实际操作中,需要根据具体情况设置标签的内容和属性,使分享卡片能够正确显示。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:解决微信二次分享不显示摘要和图片的问题 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • 全面了解JavaScript对象进阶

    全面了解JavaScript对象进阶 了解对象介绍 JavaScript 是通过对象来组织数据和功能的,可以认为在 JavaScript 中我们所有的一切都是对象,也就是说你定义的任何变量或函数都是对象。对象可以由两种方法创建:1. 直接量2. 构造函数 对象直接量 对象直接量是由若干名/值对组成的映射表,用大括号括起来。然后在每个名/值对之间用逗号分隔即可…

    JavaScript 2023年5月18日
    00
  • js实现简单的随机点名器

    下面我将详细讲解“js实现简单的随机点名器”的完整攻略。 一、实现思路 准备一个名单数组,数组中包含所有需要点名的人员姓名; 编写js代码,随机在名单数组中选择一项,输出被选中的人员姓名。 二、代码实现 2.1 准备名单数组 // 名单数组 const nameList = [‘张三’, ‘李四’, ‘王五’, ‘赵六’]; 2.2 随机选取名单中的一项 /…

    JavaScript 2023年6月11日
    00
  • js的toUpperCase方法用法实例

    当你需要将 JavaScript 字符串中的所有字符都转换为大写时,你可以使用 toUpperCase() 方法。下面是关于如何在 JavaScript 中使用toUpperCase() 方法的完整攻略。 Markdown 格式文本 首先,您需要了解如何在 Markdown 中编写代码块。在代码块之间包含代码时,您可以使用反引号引用代码块: // 这里是代码…

    JavaScript 2023年6月10日
    00
  • JSONP跨域的原理解析及其实现介绍

    下面我将详细讲解“JSONP跨域的原理解析及其实现介绍”的完整攻略。 什么是JSONP跨域 首先,需要了解JSONP(JSON with Padding)是什么。在网络应用中,由于安全策略的限制,浏览器不能直接跨域获取数据。JSONP利用“script”标签不受跨域限制的特性,通过动态创建“script”标签,并在服务器返回的数据中添加一个回调函数,从而实现…

    JavaScript 2023年5月27日
    00
  • 浅谈JavaScript宏任务和微任务执行顺序

    浅谈JavaScript宏任务和微任务执行顺序 在 JavaScript 中,任务被分为 宏任务(macrotask)和 微任务(microtask)。而在 JavaScript 中,事件循环(event loop)来负责管理和执行这些任务。 宏任务(macrotask) 宏任务是 JavaScript 中较为常见的任务类型,包括以下几种: 脚本本身; 用户…

    JavaScript 2023年6月11日
    00
  • js实现年月日表单三级联动

    下面是JS实现年月日表单三级联动的完整攻略: 1. 确定三个下拉框的HTML结构 三个下拉框分别表示年、月、日,因此需要在HTML文件中编写三个select元素的结构。可以给它们添加类名或者id方便后续的CSS和JS操作。 <select class="year"></select> <select clas…

    JavaScript 2023年6月10日
    00
  • gulp-htmlmin压缩html的gulp插件实例代码

    下面是“gulp-htmlmin压缩html的gulp插件实例代码”的完整攻略。 什么是gulp-htmlmin gulp-htmlmin 是一个用于压缩 HTML 文件的 Gulp 插件。 安装gulp-htmlmin 在使用 gulp-htmlmin 之前,需要先安装 Gulp 和 gulp-htmlmin,可以使用以下命令安装: npm install…

    JavaScript 2023年6月10日
    00
  • WebStorm 2017.3最新汉化激活破解及安装教程(附汉化包+原版下载)

    WebStorm 2017.3最新汉化激活破解及安装教程 下载WebStorm 2017.3 首先,到官网下载WebStorm 2017.3,推荐下载Windows版本。下载后双击WebStorm-*.exe开始安装。 安装WebStorm 2017.3 按照提示进行安装,如果需要更改安装路径,可以点击“Custom”按钮进行自定义安装路径。 汉化WebSt…

    JavaScript 2023年6月1日
    00
合作推广
合作推广
分享本页
返回顶部