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

让微信二次分享能够正确显示摘要和图片,需要在网页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 2023年5月28日
    00
  • 基于JavaScript实现大文件上传后端代码实例

    当今互联网上的许多应用程序都需要处理大文件上传的功能。而为了保证数据传输的稳定和安全,常常需要将文件分割成多个小部分并分别上传。下面是基于JavaScript实现大文件上传后端代码实例的完整攻略。 具体步骤 准备工作: 在前端界面上,需要使用File API来打开本地文件,并在文件上传过程中将其转换为二进制流。 “` “` 在后端代码中,需要使用Node…

    JavaScript 2023年5月27日
    00
  • javascript获取网页各种高宽及位置的方法总结

    下面我就详细讲解一下“JavaScript获取网页各种高宽及位置的方法总结”。 标准盒模型和IE盒模型 在获取页面元素的高度、宽度及其位置之前,我们需要先了解一下CSS盒模型。CSS盒模型即表示网页元素的布局模型,包括标准盒模型和IE盒模型两种。其中,标准盒模型指的是元素的宽度和高度仅包括内容,而IE盒模型指的是元素的宽度和高度包括内容、内边距和边框。 在J…

    JavaScript 2023年6月10日
    00
  • JavaScript满天星导航栏实现方法

    下面是JavaScript满天星导航栏实现方法的完整攻略。 1. 实现思路 满天星导航栏可以用CSS3的transform属性实现。具体来说,可以让导航栏容器旋转一定的角度,并让每个导航链接沿着一个圆形路径排列,从而实现满天星的效果。接下来,我们就按照以下步骤来完成实现: 创建HTML结构,包含导航栏的容器及各个导航链接。 使用CSS样式设置导航栏容器的初试…

    JavaScript 2023年6月10日
    00
  • javascript中类型判断的最佳方式

    Javascript中类型判断的最佳方式一般包括三种方法:typeof、instanceof和Object.prototype.toString()。下面将详细介绍这三种方法的使用场景和注意事项。 1. typeof操作符 typeof 操作符可以返回一个字符串,表示未经计算的操作数的类型。一般用于基本类型的判断,如字符串、数字、布尔、undefined等。…

    JavaScript 2023年6月10日
    00
  • JavaScript学习笔记之ES6数组方法

    JavaScript学习笔记之ES6数组方法 JavaScript是一种高级编程语言,广泛应用于Web开发中,也是学习编程的一个重要工具。ES6是JavaScript的第六个版本,引入了许多新特性,其中包括一组有用的数组方法,能够大大简化数据集合的处理。本篇文章将深入介绍ES6数组方法,为读者提供完整的学习攻略。 一、ES6数组方法介绍 ES6引入的数组方法…

    JavaScript 2023年5月27日
    00
  • js 声明数组和向数组中添加对象变量的简单实例

    下面是关于JS声明数组和向数组中添加对象变量的简单实例的完整攻略。 一、JS声明数组 在JS中声明数组可以使用Array关键字或简单的方括号[]来完成,比如: // 使用Array关键字声明 let arr1 = new Array(); // 简单使用方括号声明 let arr2 = []; 以上两种声明方式是等价的。 二、向数组中添加对象变量 要向JS数…

    JavaScript 2023年5月27日
    00
  • Javascript Array constructor 属性

    以下是关于JavaScript Array constructor属性的完整攻略。 JavaScript Array constructor属性 JavaScript Array constructor属性是一个指向创建数组对象的函数的引用。该属性可以用来检测一个对象是否为数组,或者用来创建一个新的数组对象。 下面是一个使用constructor属性的示例:…

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