Liên kết WhatsApp không hiển thị bản xem trước? Khắc phục og:image

Bản xem trước liên kết WhatsApp không hiển thị gần như luôn xuất phát từ một trong năm nguyên nhân: trang không có thẻ og:image, URL hình ảnh không thể truy cập công khai, hình ảnh có kích thước sai khiến WhatsApp cắt xén, việc cắt xén ổn nhưng bản xem trước đã cũ, hoặc plugin SEO của cửa hàng đang in ra một thẻ cạnh tranh. Hướng dẫn này đề cập đến từng nguyên nhân, lý do bạn không thể buộc WhatsApp làm mới, và những gì cần thay đổi trên cửa hàng WooCommerce.

Câu trả lời ngắn gọn

WhatsApp tạo bản xem trước liên kết từ các thẻ Open Graph của trang. Nếu og:image bị thiếu, không truy cập được hoặc không có định dạng thẻ 1200×630, phần chia sẻ sẽ hiển thị dưới dạng liên kết trần, ô xám hoặc ảnh sản phẩm bị cắt xấu. Hầu hết các cửa hàng WooCommerce không bao giờ đặt og:image cho trang sản phẩm — plugin SEO dự phòng về ảnh đại diện tĩnh, và ảnh sản phẩm vuông hoặc cao sẽ bị cắt hai bên hoặc phần trên.

1. Trang không có thẻ og:image

Đây là nguyên nhân phổ biến nhất trên một cửa hàng. WordPress và WooCommerce không tự động phát sinh thẻ og:image cho trang sản phẩm, danh mục hoặc cửa hàng theo mặc định, và một theme không xử lý Open Graph sẽ bỏ hoàn toàn thẻ này.

Cách khắc phục: xem mã nguồn trang và xác nhận thẻ og:image có tồn tại, là đường dẫn tuyệt đối (một URL https://… đầy đủ, không bao giờ là đường dẫn tương đối), và được kết xuất từ phía máy chủ — không phải được chèn bằng JavaScript sau khi tải. WhatsApp không chạy JavaScript của bạn.

curl -s https://your-store.com/product/example | grep -i 'og:image'

Kết quả trống chính là câu trả lời: WhatsApp không có hình ảnh nào để hiển thị.

2. URL hình ảnh không thể truy cập công khai

Trình thu thập dữ liệu của WhatsApp tải hình ảnh giống như bất kỳ máy khách ẩn danh nào. Một URL nằm sau trang đăng nhập, trên localhost, trên địa chỉ IP thô, hoặc trên đường dẫn bị chặn bởi robots.txt sẽ thất bại.

Cách khắc phục: xác nhận URL trả về hình ảnh mà không cần thông tin xác thực.

curl -I https://your-store.com/wp-content/uploads/product.jpg

Bạn cần 200 OK và Content-Type của image/png hoặc image/jpeg.

Bẫy robots.txt. Trình thu thập dữ liệu mạng xã hội tôn trọng robots.txt, vì vậy một quy tắc chặn đường dẫn chứa hình ảnh của bạn sẽ phá vỡ bản xem trước — và nó phá vỡ theo cách rất dễ chẩn đoán sai. Trình gỡ lỗi của Meta sau đó báo "không thể xử lý dưới dạng hình ảnh. Tệp có thể bị hỏng hoặc có định dạng không hợp lệ", điều này đọc giống hệt như một lỗi hiển thị. curl không bao giờ tái hiện được lỗi này, vì curl bỏ qua robots.txt. Nếu hình ảnh của bạn được phục vụ từ một đường dẫn bị bao phủ bởi quy tắc Disallow:, bản xem trước sẽ thất bại bất kể tệp có hợp lệ đến đâu. Chúng tôi đã tự gặp phải điều này trên chính đường dẫn hiển thị của FastOG và đã khắc phục bằng cách ghi đè Allow: khớp dài nhất.

3. WhatsApp cắt xén ảnh sản phẩm của bạn — và việc chỉnh sửa ảnh sẽ không khắc phục được

Đây là triệu chứng mà các nhà bán hàng mô tả là "ảnh sản phẩm của tôi bị cắt trên WhatsApp", và đây là vấn đề đáng để hiểu đúng bản chất.

Nền tảng này cắt xén bất kỳ hình ảnh nào được cung cấp về khung 1200×630. Một ảnh sản phẩm vuông hoặc cao sẽ bị cắt mất hai bên hoặc phần trên; một ảnh logo sẽ bị kéo giãn. Việc tự tay cắt ảnh gốc trong Photoshop là một cuộc chơi thua cuộc, vì WhatsApp quyết định phần cắt dựa trên tỷ lệ khung hình của thẻ, chứ không phải dựa trên bố cục bạn chọn — và ảnh sản phẩm tiếp theo lại có hình dạng khác nữa.

Giải pháp là thay đổi hình ảnh bạn phục vụ, chứ không phải ảnh bạn sở hữu. Hãy gửi một thẻ đã được bố cục sẵn ở kích thước 1200×630, với ảnh sản phẩm được đặt vừa bên trong. Khi đó nền tảng không còn gì để cắt xén.

4. Kích thước ảnh xem trước liên kết WhatsApp phù hợp

Kích thước chuẩn của ảnh Open Graph là 1200×630 pixel — tỷ lệ 1.91:1 — và đây là định dạng mà mọi nền tảng lớn, bao gồm cả WhatsApp, đều mong đợi. Nếu bạn cung cấp ảnh 1200×630, bản xem trước sẽ hiển thị đúng như thiết kế; nếu bạn cung cấp ảnh vuông 1000×1000, WhatsApp sẽ cắt ảnh để lấp đầy khung hình.

Giữ dung lượng tệp dưới 5 MB. Một thẻ sản phẩm có chữ 1200×630 thường nằm trong khoảng từ 200 KB đến 500 KB ở định dạng PNG.

Xem Kích thước ảnh OG: Giải thích về 1200×630 để hiểu vì sao tỷ lệ đó trở thành tiêu chuẩn.

5. Bản xem trước đã cũ — và bạn không thể buộc WhatsApp làm mới

Nếu thẻ, URL và định dạng đều đúng mà bản xem trước vẫn sai, thì vấn đề nằm ở bộ nhớ đệm (cache).

WhatsApp lưu bộ nhớ đệm cho bản xem trước. Bộ nhớ đệm này nằm trong ứng dụng của người nhận, nghĩa là không có công cụ nào có thể yêu cầu WhatsApp làm mới — không phải trình gỡ lỗi, không phải API, cũng không phải chúng tôi. WhatsApp không cung cấp bất kỳ cơ chế làm mới lập trình nào, nên không có nút bấm nào để thực hiện. Bất kỳ ai tuyên bố ngược lại đều đang mô tả hành vi của Facebook, chứ không phải của WhatsApp.

Điều bạn có thể làm là đảm bảo hình ảnh đúng đang chờ sẵn cho lần đọc tiếp theo của WhatsApp. Đó là lý do các URL ảnh bìa của FastOG được định địa chỉ theo nội dung (content-addressed): thay đổi tiêu đề, giá hoặc hình ảnh của sản phẩm thì URL cũng thay đổi theo, nên lần đọc tiếp theo không thể lấy phải thẻ cũ. Khi nào WhatsApp đọc lại là do WhatsApp quyết định.

Hai nền tảng liên quan cũng hoạt động tương tự — LinkedIn và X cũng không cung cấp API vô hiệu hóa bộ nhớ đệm, và thường đọc lại trong khoảng một tuần. Trình kiểm tra của chính họ có thể thúc đẩy việc đó nếu bạn đang vội:

Dùng trình gỡ lỗi của Facebook cho vấn đề của WhatsApp. Vẫn đáng để dán URL vào Sharing Debugger dù nó không thể làm mới WhatsApp, vì công cụ này tìm nạp trang theo cách WhatsApp sẽ làm và báo cáo những gì nó thực sự tìm thấy — thẻ bị thiếu, hình ảnh không truy cập được, định dạng sai. Hãy coi nó như một trình xác thực cho các thẻ, chứ không phải cách sửa bộ nhớ đệm của WhatsApp.

6. Khắc phục trên cửa hàng WooCommerce

Trên WooCommerce, quy trình xử lý cần được mô tả chính xác, vì nguyên nhân lỗi thường đến từ plugin SEO, chứ không phải theme:

• Thẻ này không tồn tại theo mặc định. WooCommerce không kèm sẵn og:image cho product, product_cat, hoặc trang cửa hàng.
• Plugin SEO của bạn lấp đầy khoảng trống một cách kém hiệu quả. Yoast, Rank Math, All in One SEO và SEOPress sẽ in ra og:image — nhưng với sản phẩm, chúng dùng hình ảnh nổi bật tĩnh. Đó là ảnh vuông hoặc ảnh dọc, chính là loại ảnh mà WhatsApp sau đó cắt xén.
• Cẩn thận với thẻ trùng lặp. Nếu hai plugin cùng in og:image, nền tảng sẽ chọn một thẻ, và thẻ được chọn có thể không phải thẻ bạn mong muốn. Hãy xem mã nguồn và đếm xem trang phát ra bao nhiêu thẻ og:image.

FastOG cho WooCommerce đi theo hướng khác: nó tạo một thẻ 1200×630 từ dữ liệu danh mục trực tiếp (tiêu đề, giá, huy hiệu giảm giá, xếp hạng, ảnh sản phẩm) trên dịch vụ render riêng, sau đó chuyển ảnh bìa đó cho plugin SEO bạn đang dùng thay vì in một thẻ cạnh tranh. Như vậy trang chỉ có một og:image duy nhất, và đó là thẻ được thiết kế cho khung hình 1.91:1 thay vì ảnh sản phẩm thô.

Vì ảnh bìa được tạo từ dữ liệu danh mục trực tiếp, giá trên thẻ khớp với giá trên trang, và sản phẩm giảm giá sẽ có huy hiệu khuyến mãi. Khi bạn lưu một sản phẩm, plugin cũng yêu cầu Facebook đọc lại trang — Facebook là nền tảng duy nhất hỗ trợ làm mới theo chương trình. WhatsApp, LinkedIn và X tuân theo lịch trình riêng của chúng, và plugin nêu rõ điều này thay vì hứa hẹn một khả năng làm mới mà nó không thể thực hiện.

• Cài đặt: FastOG cho WooCommerce trên WordPress.org
• Chi tiết và Câu hỏi thường gặp: Trang tích hợp WooCommerce

Kiểm tra những gì WhatsApp thực sự sẽ thấy

Trước khi thay đổi bất cứ điều gì, hãy xem trang theo cách mà trình thu thập dữ liệu (crawler) nhìn thấy. Dán bất kỳ URL sản phẩm nào vào Xem Liên Kết Của Bạn Theo Cách Người Mua Nhìn — công cụ này tải trang, đọc các thẻ Open Graph hiện tại và hiển thị bản xem trước kết quả như WhatsApp, X và Messenger hiển thị, bên cạnh một ảnh bìa FastOG được tạo từ cùng dữ liệu sản phẩm. Không cần đăng ký.

Muốn kiểm tra các thẻ thô? Sử dụng Trình Tạo Thẻ Meta Open Graph để xem mã đánh dấu, hoặc tham khảo tài liệu trong og:image Không Hiển Thị? Cách Khắc Phục.

Câu hỏi thường gặp

Tại sao hình ảnh sản phẩm của tôi bị cắt trên WhatsApp?

WhatsApp cắt bất kỳ hình ảnh nào được cung cấp cho nó theo khung 1200×630. Một ảnh sản phẩm vuông hoặc dọc sẽ mất hai bên hoặc phần trên/dưới. Việc cung cấp một thẻ đã được tạo sẵn ở kích thước 1200×630 — với ảnh sản phẩm được đặt vừa bên trong thẻ — khiến nền tảng không còn gì để cắt.

Tôi có thể buộc WhatsApp làm mới bản xem trước liên kết không?

Không. WhatsApp không cung cấp API làm mới hay công cụ gỡ lỗi nào, và bản xem trước được lưu trong bộ nhớ đệm nằm trong ứng dụng của người nhận. Bạn chỉ có thể đảm bảo rằng hình ảnh chính xác đang chờ lần đọc tiếp theo. Facebook là ngoại lệ và cung cấp khả năng quét lại theo chương trình.

Tại sao Facebook Sharing Debugger hiển thị hình ảnh của tôi, nhưng WhatsApp lại không hiển thị gì?

Vì chúng là các bộ nhớ đệm riêng biệt, và trình gỡ lỗi đang báo cáo về các thẻ của trang, mà cả hai nền tảng đều đọc. Nếu trình gỡ lỗi hiển thị hình ảnh chính xác nhưng WhatsApp không hiển thị gì, thì các thẻ đều ổn và bạn đang nhìn vào một bộ nhớ đệm WhatsApp chưa được làm mới. Nếu trình gỡ lỗi cũng không hiển thị gì, thì thẻ bị thiếu hoặc hình ảnh không truy cập được — hãy kiểm tra lần lượt nguyên nhân 1 và 2.

WhatsApp có sử dụng og:image hay twitter:image không?

og:image. Hãy thiết lập các thẻ Open Graph. twitter:image dành cho X.

Tôi có cần một plugin, hay tôi có thể tự thêm thẻ không?

Bạn có thể tự thêm một thẻ og:image tĩnh vào theme của mình — nó hoạt động và tốt hơn nhiều so với việc không làm gì. Điều nó không thể làm là tạo ra một thẻ riêng biệt cho từng sản phẩm mà không cần tự tạo thủ công một hình ảnh cho mỗi sản phẩm, và nó sẽ trở nên lỗi thời mỗi khi giá thay đổi. Đó là thời điểm mà một ảnh bìa động trở nên đáng giá.

Trang web của tôi không dùng FastOG. Điều này có giúp ích không?

Có — năm nguyên nhân là hành vi của nền tảng, không phải hành vi của FastOG. Hãy kiểm tra chúng theo thứ tự với curl, mã nguồn trang và trình gỡ lỗi.

Liên quan

• og:image Không Hiển Thị? Cách Khắc Phục
• Cập Nhật Ảnh WhatsApp Tức Thời cho WooCommerce
• Đồng Bộ Giá WooCommerce trong Bản Xem Trước WhatsApp
• Buộc Làm Mới Bộ Nhớ Đệm Open Graph của Facebook
• Kích Thước Ảnh OG: Giải Thích 1200×630
• Cách Lưu Bộ Nhớ Đệm Ảnh OG
• URL Ảnh OG Có Chữ Ký
• Trình Tạo Thẻ Meta Open Graph