Cung cấp hình ảnh để chia sẻ liên kết WhatsApp

Làm cách nào chúng tôi có thể đưa hình ảnh vào trang web của mình để hiển thị trong WhatsApp khi chúng tôi chia sẻ liên kết như thế này?

Tiêu chuẩn 2020

Phải mất một vài bước để có được bản xem trước hoàn hảo cho WhatsApp, Twitter, Facebook và các biểu tượng dấu trang cho thiết bị di động và máy tính. Nếu bạn thích đọc, hãy truy cập ogp.me - nhưng hãy nhớ đọc các bước 1 - 6 trong câu trả lời này để có bản xem trước WhatsApp tốt nhất.

Xin lưu ý: một số ứng dụng hoặc trang web sử dụng bộ đệm hoặc thậm chí lưu trữ bản xem trước trang web vào cơ sở dữ liệu của chúng. Điều này có nghĩa là khi bạn đang kiểm tra liên kết của mình trong WhatsApp hoặc Facebook chẳng hạn, rất có thể bạn sẽ không thấy bất kỳ sự khác biệt nào ngay lập tức. Sử dụng một liên kết khác (một trang khác) sẽ thực hiện thủ thuật. Nhưng ngay sau khi bạn sử dụng liên kết đó một lần, phần "xin lưu ý" này sẽ bắt đầu lại.

Bước 1: tiêu đề

Tối đa 65 ký tự

<title>your keyword rich title of the website and/or webpage</title>

Bước 2: mô tả

Tối đa 155 ký tự

<meta name="description" content="description of your website/webpage, make sure you use keywords!">

Bước 3: og: tiêu đề

Tối đa 35 ký tự

<meta property="og:title" content="short title of your website/webpage" />

Bước 4: og: url

Liên kết đầy đủ đến địa chỉ trang web hiện tại

<meta property="og:url" content="https://www.example.com/webpage/" />

Bước 5: og: mô tả

Tối đa 65 ký tự

<meta property="og:description" content="description of your website/webpage">

Bước 6: og: hình ảnh

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 300 x 200 ^*

<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">

^* @RichDeBourke đã đề cập điều này với tôi, nhưng rõ ràng WhatsApp đã tăng kích thước hình ảnh tối đa (kích thước cũng như kích thước tệp). Tôi đã thực hiện một số thử nghiệm: nó không hoạt động ổn định mọi lúc trên mọi thiết bị. Tôi đã thử nghiệm hình ảnh 2.x Mb và thậm chí nó dường như hoạt động 9/10 lần. <300KB là cách tiếp cận an toàn nhất, nhưng bạn sẽ ổn khi sử dụng hình ảnh lớn hơn kể từ ngày 18-02-2020. Tuy nhiên, tôi khuyên bạn nên giữ kích thước tệp dưới 2MB. Và chắc chắn ném hình ảnh của bạn thông qua TinyPNG hoặc bất kỳ thuật toán nén hình ảnh nào khác nếu bạn chưa có.

Nếu bạn đã hoàn thành các bước trên, bây giờ bạn có thể xem bản xem trước của mình trong WhatsApp! Tuy nhiên, hãy lưu ý phần "xin lưu ý" ở trên.

Bước 7: og: loại

Để đối tượng của bạn được thể hiện trong biểu đồ, bạn cần chỉ định loại của nó. Đây là danh sách các loại toàn cầu có sẵn: http://ogp.me/#types . Bạn cũng có thể chỉ định các loại của riêng bạn.

<meta property="og:type" content="article" />

Bước 8: og: miền địa phương

Các địa phương của tài nguyên. Bạn cũng có thể sử dụng og: locale: thay thế nếu bạn có sẵn các bản dịch ngôn ngữ khác.

Nếu bạn không chỉ định og: locale, nó mặc định là en_US.

<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />

Bước 9: Twitter

Để được hỗ trợ tốt nhất trên Twitter, hãy đọc nó .

Bước 10: Facebook

Để được hỗ trợ tốt nhất của Facebook, hãy đọc nó .

Bước 11: favicon

Để được hỗ trợ favicon tốt nhất cho tất cả các trình duyệt và thiết bị, hãy đọc phần này .

Bước thưởng 12: video / âm thanh

Cũng có thể chia sẻ âm thanh / video. Ví dụ, Facebook và twitter chia sẻ video rất tốt. Đọc ogp.me .

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 với kích thước lớn hơn 300KB.

Vì vậy, tài sản 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 .

Nếu vấn đề vẫn còn, hãy đọc câu trả lời cho câu hỏi tương tự này

Tôi đoán không có danh sách trắng trong whatsapp, vì tôi đã tìm thấy một giải pháp hiệu quả cho mình. Làm như sau. chèn 3 thẻ meta:

<meta property="og:image" content="http://yourimage_with_complete_URL.png"/>  
<meta property="og:title" content="Your Title"/>  
<meta property="og:description" content="Your description."/>  

Hình ảnh của bạn phải ở định dạng .png và kích thước 600x600px và phải được đặt tên là 'logo-yoursite.png' (một khi nó hoạt động với tôi CHỈ THÍCH R) NG)

Đừng quên chèn liên kết đến whatsapp trong trang web của bạn:

<a href='whatsapp://send?text=Text to send withe message: http://www.yoursite.com'>whatsApp</a>

Làm điều này và bạn sẽ được thực hiện tốt!

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

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

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

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

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

og: mô tả: Tối đa 65 ký tự.

og: image: 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 300 x 200 pixel được khuyến nghị.

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à thẻ mẫu. Làm upvote một khi bạn thấy nó thỏa đáng.

Tôi muốn thu hút sự chú ý đến thực tế là một đơn giản <meta property="og:image" content="image.png" />, như được đề xuất ở đâu đó ở trên, không hiệu quả với tôi (điều này thực tế đã khiến tôi phải lo lắng trong nhiều tuần nay). Những gì hoạt động là một URL tuyệt đối:
<meta property="og:image" content="https://domainname.com/image.png" />

hoặc bắt đầu bằng dấu gạch chéo (nếu hình ảnh nằm trong thư mục gốc):
<meta property="og:image" content="/image.png" />

(Tôi đã thêm nó dưới dạng một nhận xét, nhưng tôi chưa được phép. Người điều hành cảm thấy thoải mái khi di chuyển cái này nếu thích hợp hơn.)

Tôi cũng đã cố gắng làm điều này và tôi đã thêm tất cả các thẻ meta đúng:

<meta property="og:image" itemprop="image" content="image_url" />
<meta property="og:image:url" itemprop="image" content="image_url" />
<meta property="og:image:type" content="image/png" />

nhưng chưa thể nhìn thấy hình ảnh khi chia sẻ liên kết của tôi trong WhatsApp.

Tôi đã phát hiện ra rằng WhatsApp cũng thực hiện một số loại bộ nhớ đệm của hình ảnh và thông tin url, không biết trong bao lâu.

Để kiểm tra xem tôi đã chèn các thẻ chính xác chưa, tôi chỉ thử các url khác nhau, ví dụ: http://domain.com thay vì http://www.domain.com .

hy vọng điều này sẽ giúp cho người khác.

Sau khi làm việc trong một bugg, phát hiện ra rằng trong IOS, các phần tử trong HEAD có thể dừng tìm kiếm WhatsApp của og: image / og: description / name = description. Vì vậy, hãy thử đầu tiên để đặt chúng lên trên tất cả mọi thứ khác.

Điều này không làm việc

<head>
    <div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>

    <meta property="og:description" content="description" />
    <meta property="og:image" content="http://cdn.some.com/random.jpg" />
</head>

Công việc này:

    <head>
        <meta property="og:description" content="description" />
        <meta property="og:image" content="http://cdn.some.com/random.jpg" />

        <div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>
    </head>

Tôi khuyên bạn nên luôn luôn xem https://developers.facebook.com/tools/debug/shaming để xác thực các tài sản của bạn vì Facebook thường thay đổi chính sách, tuân thủ và API.

Nếu bạn làm việc với bot Messenger hoặc các ứng dụng FB khác, bạn có thể cần thuộc tính fb: app_id để hình ảnh liên kết hoạt động trong Whatsapp. Thông tin thêm tại trang web dành cho nhà phát triển Facebook. https://developers.facebook.com/docs/shaming/webmasters

Tôi đã có cùng một vấn đề, ở đây là để giải quyết.

Nó sẽ được hiển thị nếu bạn thêm meta og: image

Vấn đề là whatsapp sẽ không hiển thị hình ảnh nếu bạn nhập mà không có http: // và kết thúc bằng / Ví dụ: nó hiển thị hình ảnh và mô tả nếu bạn nhập http://google.com/ nhưng không phải với google.com

Hy vọng nó sẽ giúp được ai đó.

Tôi muốn thêm một câu trả lời cho chủ đề này để đề cập cụ thể những chủ đề nào ở trên đã giúp tôi giải quyết vấn đề và thứ tự chúng có thể được theo dõi để hiểu đúng nguyên nhân gốc và khắc phục nó một lần và mãi mãi:

Tôi đã có thể có được bản xem trước phong phú của mình trong khi chia sẻ liên kết trên phương tiện truyền thông xã hội với giải pháp này .

Tôi đã làm theo các tùy chọn khác nhau trong chủ đề này và dưới đây là gần nhất với câu trả lời đúng và tất cả chúng đều đóng góp vào kết quả cuối cùng:

1. Yêu cầu thẻ (Thẻ chính để tập trung vào - og: image)
2. Thông số hình ảnh
3. Công cụ chắc chắn sẽ giúp
4. Làm thế nào để cung cấp chính xác đường dẫn hình ảnh
5. Nguyên nhân và giải pháp gốc

Điều này hy vọng sẽ tiết kiệm cho ai đó thời gian cần thiết để cuộn qua và tìm đúng bộ câu trả lời và nỗ lực cần thiết cho tất cả các thử nghiệm và lỗi.

Tôi đã thử một số đề xuất theo chủ đề này và từ các tìm kiếm bên ngoài của tôi nhưng đó là một vấn đề hoàn toàn khác đối với tôi. Hướng dẫn cụ thể của tôi để sử dụng hình ảnh được chỉ định bởi thẻ og: image đã bị ghi đè bởi các thẻ biểu đồ mở được cung cấp bởi plugin Jetpack. bạn có thể tìm thấy câu trả lời chi tiết của tôi ở đây . Tuy nhiên, tôi nghĩ rằng đáng để thêm các bước ngắn gọn về chủ đề được theo dõi nhiều hơn này. Hy vọng điều này sẽ giúp được ai đó.

Các Facebook Chia sẻ Debugger giúp tôi xác định các nguyên nhân gốc rễ và từ đó, tôi theo các bước sau:

1. Gỡ lỗi trang web của bạn bằng cách sử dụng trình gỡ lỗi ở trên. Chỉ cần gõ URL và nhấn gỡ lỗi. Điều này sẽ cung cấp cho bạn một danh sách các cảnh báo và một khi bạn cuộn xuống các phần thẻ biểu đồ mở, bạn sẽ có thể thấy các giá trị đang được tìm nạp cho trang web của bạn. Cái cần tập trung vào là thẻ og: image .
2. Cuộn thêm xuống liên kết "Xem chính xác những gì người quét của chúng tôi thấy cho URL của bạn" và tìm kiếm thẻ og: image để tìm nhân vật phản diện trong câu chuyện của bạn.
3. Bây giờ chỉ đơn giản, chọn phương tiện để loại bỏ ghi đè đang xảy ra. Trong trường hợp của tôi, tôi thấy chức năng sau đây hữu ích. Nó thay đổi hình ảnh mặc định được sử dụng bất cứ lúc nào Jetpack không thể xác định hình ảnh sẽ sử dụng.

Nó thay đổi hình ảnh mặc định được sử dụng bất cứ lúc nào Jetpack không thể xác định hình ảnh sẽ sử dụng

function custom_jetpack_default_image() {
    return 'YOUR_IMAGE_URL';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );

Tôi nên thêm rằng các tham số hình ảnh như tối thiểu 300px x 200px và kích thước <300 KB được khuyến nghị. Và hãy làm theo các hướng dẫn này nếu các hướng dẫn chung như vậy không phù hợp với bạn, bởi vì, rất có thể vấn đề của bạn tương tự như của tôi. Ngoài ra, đôi khi giải pháp đơn giản nhất có thể chỉ là xóa plugin (miễn là bạn xác minh rằng bạn có thể làm mà không cần đến nó).

Cuối cùng, bạn sẽ có thể thấy một cái gì đó như -

Hi vọng điêu nay co ich.

NS

Bạn cần các thẻ sau để có được bản xem trước hình ảnh WhatsApp:

<meta property="og:title" content="Website name" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://url.com/" />
<meta property="og:description" content="Website description" />
<meta property="og:image" content="image.png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="600" />

Như tài liệu của Facebook nói, nếu bạn chỉ định kích thước hình ảnh og: nó sẽ được tìm nạp nhanh thay vì không đồng bộ theo cách khác.

PNG được khuyến nghị cho định dạng hình ảnh. Ít nhất 600x600 pixel được khuyến nghị.

Nếu bạn muốn có một hình ảnh bên cạnh một url từ trang web của bạn mà ai đó đã chia sẻ trên WhatsApp, bạn phải đặt một thẻ meta trên trang nơi URL liên kết đến, như thế này:

<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>

Có cùng một vấn đề, đã thêm og: image và nó không hoạt động trong khi url kết thúc bằng dấu gạch chéo (/). Sau khi xóa dấu gạch chéo khỏi URL - hình ảnh được tải .. Lỗi thú vị ...

Các hành động sau đây đã giúp trong trường hợp của tôi.

Đặt hình ảnh dưới cùng một máy chủ .

<meta property="og:url" content="https://www.same-host.com/whatsapp-image.png" />

Truyền hình ảnh cần thiết cho WhatsApp cụ thể bằng cách phát hiện tác nhân người dùng của nó bằng chuỗi con hàng đầu, ví dụ

WhatsApp/2.18.380 A

Đợi vài giây trước khi thực sự ấn nút gửi, vì vậy WhatsApp sẽ có thời gian để truy xuất hình ảnh và mô tả từ siêu dữ liệu og.

Ngay cả sau khi cố gắng. Hình ảnh trang web của tôi đã được tải một số lần và đôi khi không. Sau khi xác thực với https://developers.facebook.com/tools/debug/shaming

nhận ra rằng khung django (python) của tôi đang hiển thị đường dẫn hình ảnh tương đối. Tôi đã phải thay đổi đường dẫn của hình ảnh với url đầy đủ. (bao gồm http: //). sau đó nó bắt đầu làm việc

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ụ như facebook muốn tỷ lệ 1,91: 1 và whatsapp 1: 1

<meta property="og:image" content="https://www.link.com/facebook.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />


<meta property="og:image" content="https://www.link.com/whatsapp.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />

https://roei.stream/2018/11/18/ideal-open-graph-image-size-for-whatsapp-link-share/

https://css-tricks.com/essential-meta-tags-social-media/