WeChat implements thumbnails and titles of shared links

This article mainly shares with you the thumbnails and titles of sharing links on WeChat. I hope it can help everyone.

1. Sharing in WeChat

After opening the link in WeChat, click [...] in the upper right corner and select [Send to Friends] or [Share to Moments]. This sharing method will get the abbreviation Thumbnail method:

• Method 1: Add a 300*300 pixel img

at the top of the page body, such as The image does not need to be displayed and can be hidden using css, but display: none; cannot be set directly on the img.

You can set display: none; on the parent layer p or set position: absolute; visibility: hidden; on the img.

<p style="display:none;">
<img src="/static/imghwm/default1.png"  data-src="/img/thumbnail.png"  class="lazy"   alt=""></p>

• Method 2: Through the sharing interface of WeChat JS-SDK

This method requires a WeChat public account app_id, and a backend service is required to generate signature. The advantage is that you can customize the shared title, thumbnail, and description.

2. Share from the browser

After opening the link in the browser, click the share icon and select [WeChat]. How to get the thumbnail in this sharing method:

Add Open Graph Metadata to the head part of the page:

<meta property="og:type" content="website" />
<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content=" 
<meta property="og:url" content="http://www.example.com/">

Among them, og:image affects the icon when the browser shares it, and the full path of the image needs to be specified.

The above is the detailed content of WeChat implements thumbnails and titles of shared links. For more information, please follow other related articles on the PHP Chinese website!