Đã cố gắng làm theo câu hỏi này: Cung cấp hình ảnh để chia sẻ liên kết whatsapp

Tôi đã tạo một trang web HTML đơn giản với các thẻ meta cơ bản của Facebook:

<!--FACEBOOK-->
<meta property="og:title" content="San Roque 2014 Pollos" />
<meta property="og:description" content="Programa de fiestas />
<meta property="og:image" content="http://pollosweb.wesped.es/programa_pollos/play.png" />        

Facebook linter xác thực chính xác và trong Facebook, nó hiển thị hoàn hảo, nhưng khi tôi cố gắng chia sẻ bằng WhatsApp, hình ảnh không hiển thị.

Tôi đang thử nó trên WhatsApp trên Android

→ Đây là URL của Trang web Mẫu

I belive bạn cần phải thêm itempropvào og:imagethẻ meta, có các thiết lập kích thước hình ảnh 256x256và cũng có thể nó sẽ không gây tổn hại thêm site_name, typevà updated_time tính chất hai :)

<meta property="og:site_name" content="San Roque 2014 Pollos">
<meta property="og:title" content="San Roque 2014 Pollos" />
<meta property="og:description" content="Programa de fiestas" />
<meta property="og:image" itemprop="image" content="http://pollosweb.wesped.es/programa_pollos/play.png">
<meta property="og:type" content="website" />
<meta property="og:updated_time" content="1440432930" />

Bạn có thể thấy các thẻ meta này đang hoạt động trên Google Maps chẳng hạn .
Sau khi bạn đã thay đổi các thẻ meta của mình, bạn có thể cần đợi một lúc để các bộ nhớ đệm có thể cập nhật.

Bạn có thể gỡ lỗi / xác minh thẻ meta Open Graph từ Trình gỡ lỗi Facebook
Nếu bạn có thể thấy tất cả các thẻ của mình ở đó, thì các trang web / ứng dụng mà thẻ của bạn không hiển thị đúng có thể có các yêu cầu khác nhau đối với thẻ Open Graph.

CHỈNH SỬA:
Nếu bạn định chỉ định hình ảnh bằng HTTP-Secureliên kết, bạn cần sử dụng og:image:secure_urlthay thế og:image.

EDIT2:
Bạn cũng cần chỉ định og:typevì nó là một trong bốn tham số bắt buộc cơ bản.
<meta property="og:type" content="website" />sẽ giúp bạn đi đúng hướng.

Tôi đã có cùng một vấn đề và vấn đề là kích thước của hình ảnh. Whatsapp không hỗ trợ ảnh có kích thước lớn hơn 300KB.

Vì vậy, thuộc tính quan trọng nhất để hiển thị hình ảnh trên Whatsapp là:

<meta property="og:image" content="url_image">

Và kích thước của hình ảnh để hiển thị phải nhỏ hơn 300KB

Tôi cũng phải đối mặt với vấn đề đó Cuối cùng, tôi đã giải quyết được nó

<meta property="og:image" itemprop="image" content="http://yourdomain.com/yourfolder/imagename.png" />

Thuộc tính hình ảnh của tôi

1. Kích thước: 300X200
2. Kích thước: <300KB
3. URL: http://yourdomain.com/yourfolder/imagename.png

Đảm bảo trong tên hình ảnh không có khoảng trắng, nếu bạn có hai từ thì hãy sử dụng dấu gạch dưới

Sau nhiều tháng cố gắng tìm ra điều này, cuối cùng tôi đã giải quyết được vấn đề. Đây là giải pháp của tôi:

<!-- MS, fb & Whatsapp -->

<!-- MS Tile - for Microsoft apps-->
<meta name="msapplication-TileImage" content="http://www.example.com/image01.jpg">    

<!-- fb & Whatsapp -->

<!-- Site Name, Title, and Description to be displayed -->
<meta property="og:site_name" content="The Rock Photo Studio">
<meta property="og:title" content="The Rock Photo Studio in Florida">
<meta property="og:description" content="The best photo studio for your events">

<!-- Image to display -->
<!-- Replace   «example.com/image01.jpg» with your own -->
<meta property="og:image" content="http://www.example.com/image01.jpg">

<!-- No need to change anything here -->
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/jpeg">

<!-- Size of image. Any size up to 300. Anything above 300px will not work in WhatsApp -->
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">

<!-- Website to visit when clicked in fb or WhatsApp-->
<meta property="og:url" content="http://www.example.com">

Sao chép ở trên, dán vào vùng đầu của trang web. ĐÓNG ứng dụng Whatsapp của bạn, mở lại, SAU ĐÓ kiểm tra. Không cần xóa bộ nhớ cache và KHÔNG CẦN XÓA DỮ LIỆU.

Chúc phúc cho tất cả!

Tôi tìm thấy giải pháp ở đây liên kết xem trước Whatsapp được đăng vào ngày 2 tháng 3 16

Và bạn sẽ thấy làm việc

Có hai loại mã. Meta og đầu tiên: hình ảnh bên trong <head>

<meta property="og:image" content="url_image">

Lược đồ hình thu nhỏ từ schema.org bên trong <body>

<link itemprop="thumbnailUrl" href="url_image"> 
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"> 
  <link itemprop="url" href="url_image"> 
</span>

Hy vọng điều này giúp đỡ. Cảm ơn.

Xóa dữ liệu whatsapp và bộ nhớ cache của bạn (hoặc sử dụng whatsapp khác)!

Android Phone : Go to SETTINGS > APPS > Application List > WhatsApp > Storage and Clear Data.

Hãy cẩn thận ! Sao lưu tin nhắn của bạn trước khi hành động này.

Sau đó, kết quả: trước và sau khi xóa dữ liệu và bộ nhớ cache WhatsApp

Tôi không biết về số lượng thẻ meta tối thiểu cần thiết để hoạt động trên whatsapp, tìm thấy thẻ này ở đâu đó và điều này đã làm việc cho tôi một cách hoàn hảo. Lưu ý: Độ phân giải hình ảnh là 256 x 256.

   <head>
    <meta property="og:site_name" content="sitename" />
    <meta property="og:title" content="title">
    <meta property="og:description" content="description">
    <meta property="og:image" itemprop="image" content="http://www.yoursite.com/yourimage.jpg">
    <link itemprop="thumbnailUrl" href="http://www.yoursite.com/yourimage.jpg"> 
    <meta property="og:image:type" content="image/jpeg">
    <meta property="og:updated_time" content="updatedtime">
    <meta property="og:locale" content="en_GB" />
    </head>

    <body>
    <span itemprop="image" itemscope itemtype="image/jpeg"> 
      <link itemprop="url" href="http://www.yoursite.com/yourimage.jpg"> 
    </span>

    </body>

Thông tin hữu ích bổ sung:

Bạn có thể cung cấp một số og: hình ảnh, whatsapp sẽ sử dụng cái cuối cùng. Điều này sẽ giúp giải quyết vấn đề ví dụ: facebook muốn tỷ lệ 1,91: 1 và whatsapp 1: 1

https://stackoverflow.com/a/61078968/8486854

Trả lời https://stackoverflow.com/a/35785393/1518500

Hãy thử phiên bản cập nhật cho schema.org

<span itemprop="image" itemscope itemtype="http://schema.org/ImageObject"> 
 <link itemprop="url" href="imgurlHere">
 <meta itemprop="width" content="1200">
 <meta itemprop="height" content="800">
</span>

hoặc sử dụng định dạng json-ld từ google

<script type="application/ld+json">
 {
"@context": "http://schema.org/",
"@type": "ImageObject",
 "url": "ImgURLhere",
    "height": 800,
    "width": 1200

 }
 </script>

Đối với tất cả vẫn gặp sự cố này và đối với tôi không có giải pháp nào được đăng tải hoạt động.

Tôi đã gặp vấn đề tương tự. Hình ảnh hiển thị chính xác trong tất cả các hộp thoại chia sẻ khác. Chỉ WhatsApp không thể hiển thị hình ảnh, mặc dù trình gỡ lỗi facebook có thẻ og: image chính xác.

Giải pháp phù hợp với tôi: Tôi đang sử dụng firebase. Đối với nội dung đã tải lên trong bộ nhớ của chúng, bạn sẽ nhận được URL Tải xuống duy nhất với mã thông báo phương tiện. Cái gì đó như:

https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/ ? alt = media & token = YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY

Tôi đã sử dụng URL này trong thẻ meta og: image. Nó hoạt động cho Facebook, v.v., nhưng có vẻ như WhatsApp không thể tải xuống hình ảnh từ URL này. Thay vào đó, bạn cần đưa hình ảnh vào thư mục dự án của mình và sử dụng liên kết này cho thẻ og: image. Bây giờ nó cũng hoạt động bình thường trong WhatsApp.

Trước đây (không hoạt động trong WhatsApp, nhưng facebook, v.v.)

<meta property="og:image" itemprop="image" content="https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/your_image?alt=media&token=YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY">

Sau (hiện đã hoạt động trong tất cả các hộp thoại chia sẻ được thử nghiệm, bao gồm cả WhatsApp)

<meta property="og:image" itemprop="image" content="https://domain_name/path_to_image">

Hy vọng nó có thể giúp được một số bạn :)

Tôi đã ghi lại giải pháp chi tiết hoàn hảo tại đây - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html Có bảy bước cần thực hiện để có được bản xem trước hoàn hảo.

1. Tiêu đề: Thêm tiêu đề nhiều từ khóa vào trang web của bạn với tối đa 65 ký tự.

2. Meta Description: Mô tả trang web của bạn trong tối đa 155 ký tự.

3. og: title: Tối đa 35 ký tự.

4. og: url: Liên kết đầy đủ đến địa chỉ trang web của bạn.

5. og: description: Tối đa 65 ký tự.

6. og: image: Nên sử dụng hình ảnh (JPG hoặc PNG) có kích thước nhỏ hơn 300KB và kích thước tối thiểu là 300 x 200 pixel.

7. favicon: Một biểu tượng nhỏ có kích thước 32 x 32 pixel.

Trong trang trên, bạn có các thông số kỹ thuật cần thiết, giới hạn ký tự và các thẻ mẫu. Hãy upvote khi bạn thấy nó vừa ý.

Tôi hy vọng điều này sẽ giúp:

<meta property="og:title" content="Title goes here">
<meta property="og:site_name" content="Site name">
<meta property="og:image" content="imageURLShouldBeFromSameDomainName">
<meta property="og:image:width" content="640">
<meta property="og:image:height" content="300">

Hãy lưu ý rằng imgURL phải được lưu trữ từ cùng một miền, nếu không nó sẽ không hiển thị trên whatsapp. Tôi đã thử tải một url từ amazon, xem trước hình ảnh không hoạt động.

Trong trường hợp của tôi, việc thêm thẻ meta bên dưới đã giải quyết được vấn đề. Tôi đang sử dụng nội dung tiếng Ả Rập và phải thêm nội dung này để hình ảnh xuất hiện trên WhatsApp:

<meta property='og:locale' content='ar_AR' />

Lưu ý: Nếu bạn đang sử dụng nội dung tiếng Anh, không cần thêm thẻ meta này vì tiếng Anh là giá trị mặc định.

Bạn chỉ cần nhập tin nhắn có "http: //" ở đầu. Ví dụ: http://www.google.com hiển thị hình ảnh thu nhỏ, nhưng www.google.com thì không.

Dữ liệu biểu đồ mở:

<meta property="og:title" content="Title of your website | website.com"/>
<meta property="og:type" content="Most popular business directory of Bangladesh"/>
<meta property="og:url" content="http://www.website.com/"/>
<meta property="og:image" content="http://www.moumaachi.com/images/dhaka-city.jpg"/>
<meta property="og:site_name" content="@website"/>
<meta property="fb:admins" content="Author"/>
<meta property="og:description" content="website.com is your online business directory of Country"/>

Chỉ những 3 thẻ dường như được yêu cầu ( og:title, twitter:description, rel="icon"):

<meta property="og:title" content="San Roque 2014 Pollos" />

<meta name="twitter:description" property="og:description" itemprop="description" content="Programa de fiestas" />

<link rel="icon" type="image/png" href="https://images.weserv.nl/?url=http://pollosweb.wesped.es/programa_pollos/play.png&w=192&height=192" sizes="192x192" />

Thử nghiệm / chơi

Cách dễ nhất để thử nghiệm đối với tôi là với CodeSandbox theo các bước sau:

• Tạo ứng dụng Vanilla với https://codesandbox.io/s/
• Sửa đổi các thẻ meta của bạn cho phù hợp trong index.htmltệp
• Lưu tệp ( ctrl+s) sẽ phân nhánh ứng dụng và tạo url duy nhất của riêng nó
• Dán url đó vào WhatsApp để xem bản xem trước (bạn thậm chí không cần gửi tin nhắn)
• Thực hiện các thay đổi đối với các thẻ meta
• Sửa đổi url - thêm một ký tự vào cuối url. Thao tác này sẽ hủy "bản xem trước đã lưu trong bộ nhớ cache trước đó"

Báo giá bắt buộc

Chỉ cần đảm bảo LUÔN LUÔN có dấu ngoặc kép và dấu ngoặc kép vì WhatsApp rất nhạy cảm với điều đó. Ví dụ trên của bạn không có trích dẫn kết thúc cho của bạn og:description.

Đối với bất kỳ ai vẫn gặp phải vấn đề này, tôi thấy rằng hình ảnh được phân phối trên Amazon S3 không hoạt động với ứng dụng di động WhatsApp (cả Android và iOS, nhưng ứng dụng máy tính để bàn Mac vẫn ổn). Rất có thể cài đặt AWS của chúng tôi gây ra điều này, nhưng tôi cũng nhận thấy mô hình này ở các trang web khác (ví dụ: trang này có og:imagetên miền truy cập nhưhttps://s3.amazonaws.com ).

Không có vấn đề nào trên bất kỳ nền tảng nào khác mà tôi đã thử, chỉ là ứng dụng di động WhatsApp. Ngay sau khi tôi chỉ<meta property="og:image" content="https://some-non-aws-location" /> đến một URL công khai khác như tệp Google Drive (tất nhiên là được chia sẻ công khai), nó đã hoạt động tốt.

Tôi cũng đã thử cam kết hình ảnh trong repo của chúng tôi, được lưu trữ và triển khai trên AWS với miền tùy chỉnh và điều đó cũng không hoạt động. Vì vậy, AWS dường như vẫn là thủ phạm. Hy vọng điều này sẽ giúp ai đó!

Nếu sau tất cả các mẹo này, hình thu nhỏ vẫn không hiển thị, hãy thử cách này:

Vấn đề của tôi là các dấu ngoặc kép từ các thuộc tính og đã bị xóa khi được tạo cho sản xuất (phiên bản chạy npm). Mô-đun Minify đã làm điều đó.

Vì vậy, giải pháp là hủy bỏ việc xóa này, đặt thuộc tính removeAttributeQuotes thành false:

minify: {
    ...
    removeAttributeQuotes: false,
    ...
}

Trong môi trường phát triển của mình, tôi đặt nó trên tệp "webpack.prod.conf.js". Đặt nó ở tệp tương đương của bạn.

Chỉ cần xây dựng lại và nó hiện đang hoạt động.

Tôi đã làm theo tất cả các hướng dẫn trong anwers ở đây, và tôi vẫn không thể làm cho nó hoạt động. Có vẻ như WhatsApp cũng yêu cầu phần mở rộng để nó hiển thị hình ảnh.

Vì vậy, đối với thẻ trỏ đến jpeg:

<meta property="og:image" itemprop="image" content="https://example.com/someimageid"/>

Thay đổi API để cho phép tiện ích mở rộng và sử dụng:

<meta property="og:image" itemprop="image" content="https://example.com/someimageid.jpeg"/>

và sau đó nó dường như hoạt động ...

Gặp phải vấn đề tương tự, cuối cùng tôi đã làm cho nó hoạt động sau một số lần thử. Đây là 8 thẻ html mà tôi đã sử dụng trên trang web của mình để bản xem trước hoạt động:

Trong <head>thẻ:

<meta property="og:title" content="ABC Blabla 2020 Friday" />
<meta property="og:url" content="https://bla123.neocities.org/mp/friday.html" />
<meta property="og:description" content="Photo Album">
<meta property="og:image" itemprop="image" content="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG"/>
<meta property="og:type" content="article" />
<meta property="og:locale" content="en_GB" />

Trong <body>thẻ:

<link itemprop="thumbnailUrl" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">

<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">
</span>

8 thẻ này (6 trong đầu, 2 trong thân) hoạt động hoàn hảo.

Lời khuyên:

1. Sử dụng URL vị trí hình ảnh chính xác thay vì định dạng thư mục, tức là không sử dụng hình ảnh / OG_thumb.jpg

2. Phần mở rộng tệp nhạy cảm: Nếu tên phần mở rộng hình ảnh trên nhà cung cấp dịch vụ lưu trữ của bạn là ".JPG" thì không sử dụng ".jpg" hoặc ".jpeg '. Tôi nhận thấy rằng dựa trên nhà cung cấp dịch vụ lưu trữ và lỗi kết hợp trình duyệt có thể có hoặc không xảy ra, vì vậy, để an toàn, dễ dàng hơn chỉ cần khớp với trường hợp của phần mở rộng tệp.

3.Sau khi thực hiện các bước trên nếu bản xem trước hình thu nhỏ vẫn không hiển thị trong tin nhắn WhatsApp thì:

a. Buộc dừng ứng dụng di động (tôi đã thử trong Android) và thử lại

b. Sử dụng công cụ trực tuyến để xem trước thẻ OG, ví dụ tôi đã sử dụng: https://searchenginereports.net/open-graph-checker

c. Trong trình duyệt di động, dán liên kết trực tiếp vào ngón tay cái OG và làm mới trình duyệt 4-5 lần. ví dụ: https://bla123neocities.org/nmp/images/thumbs/IMG_327.JPG

Tháng 11 năm 2020: Như tôi đã trải nghiệm, các thẻ meta này là bắt buộc và ảnh hưởng đến những gì bạn thấy trên liên kết được chia sẻ trong Whatsapp và WhatsApp-thumbnail:

<head>
 <meta content='myTitle' property='og:title'/>
  <meta content="myDescription" property="og:Description"/>
  <meta property="og:type" content= "website" />
  <meta property="og:image" itemprop="image primaryImageOfPage" content="https://i.ibb.co/1GRpwND/600px-Approve-icon-svg.png" />
</head>

và bên trong <body> :

<a href="https://wa.me/?text=https://myaddress.blogspot.com/2020/11/try-16.html" target="_blank" rel="nofollow">Hello whatsApp</a>

Giải thích thêm:

1- Giả sử bạn có <meta content='example.com/page1' property='og:url'/>và bên trong nội dung mà bạn tham chiếu đến <a href="https://wa.me/?text=example.com/page2" >Hello whatsApp</a>, og:imagevà og:descriptioncủa trangexample.com/page2 sẽ được hiển thị trên whatsApp như bạn đã giới thiệu trên liên kết của mình trong nội dung (có thể hiển nhiên).

2-Khi bạn add/changemở bất kỳ thẻ biểu đồ nào, chẳng hạn như og:descriptionvà một lần nữa bạn nhấp vào <a></a>thẻ của mình trên trang / nội dung của mình, những gì bạn thấy trên WhatsApp sẽ không thay đổi trừ khi bạn thay đổihref="I am a new URL"<a></a> thẻ của mình hoặc xóa bộ nhớ cache của WhatsApp !!

3-Tôi đã thử các Png/jpghình ảnh, tất cả đều có kích thước dưới 300 kb và tất cả đều lớn hơn 300 * 300 pixel và nội dung hình ảnh là a https hoặc ahttp url, đoạn mã trên hỗ trợ cả hai (Không cần thiết og:image:secure_url).

4-Mỗi lần bạn thêm / thay đổi ognội dung, để có hình thu nhỏ trên WhatsApp, những thay đổi không ảnh hưởng đến lần thử đầu tiên !! và thành công trong lần thử thứ hai. Rất lạ !

Giải pháp này phù hợp với tôi:

    <meta property="og:title" content="Testing Title" />
    <meta
      property="og:description"
      content="This is best way to view your Time Table & Join Meetings"
    />
    <meta
      property="og:image"
      itemprop="image"
      content="//upload.wikimedia.org/wikipedia/commons/d/d4/JPEG_example_image_decompressed.jpg"
    />
    <meta property="og:url" content="https://google.com/" />
    <meta property="og:type" content="website" />
    <meta property="og:image:type" content="image/jpeg" />

đã thử nghiệm trên Codeandbox.io

đây là liên kết: https://l8ogr.csb.app/

một điều ngớ ngẩn đã làm nên điều kỳ diệu đó, bằng cách xóa " http" hoặc " https" khỏi Url hình ảnh

nếu URL hình ảnh của bạn là: https://test.com/img.jpegto//test.com/img.jpeg

<meta property="og:image" itemprop="image" content="//test.com/img.jpg"/>