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

2023年6月11日上午8:12 • JavaScript

让微信二次分享能够正确显示摘要和图片，需要在网页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标签，可以解决微信二次分享不显示摘要和图片的问题。在实际操作中，需要根据具体情况设置标签的内容和属性，使分享卡片能够正确显示。

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