Hướng dẫn cách sửa lỗi không hiện hình ảnh và mô tả khi share link lên Facebook.
Bạn đã bao giờ gặp phải tình trạng share link từ website của mình lên Facebook nhưng chúng không hiển thị đầy đủ tiêu đề, phần mô tả và hình ảnh đại diện (thumbnail) chưa? Nguyên nhân của vấn đề này có thể là do website của bạn chưa được tích hợp Facebook Open Graph Meta Data hoặc bots Facebook gặp lỗi trong quá trình thu thập dữ liệu từ liên kết mà bạn muốn chia sẻ (lỗi cache, lỗi kết nối với server…). Bạn hoàn toàn có thể khắc phục được nó và bài viết ngay sau đây là dành cho bạn.
Tham khảo thêm:
- Hướng dẫn tích hợp Facebook Chat vào website WordPress
- Tích hợp Facebook Like Reactions vào WordPress
Facebook Open Graph là gì?
Facebook Open Graph (hay Facebook Open Graph Protocol) là 1 giao thức dùng để giao tiếp giữa website của bạn với mạng xã hội Facebook. Hay nói cách khác Open Graph chính là cầu nối giúp website của bạn trở thành một phần của mạng xã hội Facebook, giúp quảng bá website trên Facebook và tương tác mạng xã hội được dễ dàng hơn.
Facebook Open Graph bao gồm một tập hợp các meta tags, giúp bạn định nghĩa nội dung trên website thành dữ liệu có cấu trúc mà bots của Facebook có thể hiểu được. Khi bạn chia sẻ 1 link trên status hoặc Facebook Messenger, nếu website không sử dụng Open Graph thì Facebook chỉ hiển thị duy nhất link bài viết mà thôi.
Khi chèn Open Graph vào website, nó sẽ làm cho trang mà bạn chia sẻ trở thành đối tượng có các thuộc tính mà mạng xã hội yêu cầu như: title (tiêu đề), description (mô tả), ảnh thumbnail… Vì thế link chia sẻ sẽ có đầy đủ ảnh thumbnail, tiêu đề, mô tả… do bạn chỉ định để lôi cuốn người đọc click vào link.
Sử dụng Facebook Open Graph trong WordPress
Trong WordPress, các bạn cso thể tích hợp Facebook Open Graph vào website một cách dễ dàng nhờ các plugin như Yoast SEO, Rank Math SEO hay Open Graph and Twitter Card Tags.
Nếu đang sử dụng Yoast SEO, các bạn truy cập vào SEO => Social => Chọn tab Facebook và thiết lập tương tự như hình bên dưới.
Trong đó, vấn đề quan trọng nhất là nhớ Enabled trong mục Add Open Graph meta data để tích hợp Facebook Open Graph vào website của bạn.
Ngoài ra:
- Frontpage settings: cho phép bạn thiết lập ảnh thumbnail, tiêu đề và phần mô tả cho trang chủ của website.
- Default settings: cho phép bạn thiết lập ảnh thumbnail mặc định cho, áp dụng cho các link chia sẻ không có sẵn ảnh thumbnail.
Sau khi thiết lập xong, click vào nút Save Changes để lưu lại.
Các bạn cũng có thể tùy biến cách hiển thị của từng bài viết/ trang trên Facebook thông qua tab Social của Yoast SEO trên trình soạn thảo. Nếu không, các giá trị như tiêu đề, ảnh thumbnail và mô tả sẽ mặc định được lấy từ phần thiết lập SEO.
Ngay cả khi đã tích hợp Open Graph, website của bạn vẫn có thể gặp lỗi không hiện hình ảnh, mô tả, tiêu đề… khi share link lên Facebook. Nguyên nhân của việc này là do bots Facebook không thể kết nối với website của bạn tại thời điểm mà nó thu thập dữ liệu. Và điều đáng buồn hơn là Facebook sẽ lưu lại kết quả này gần như vô thời hạn.
Vậy làm thế nào để xóa kết quả index cũ và tạo index mới cho những trang từng bị lỗi không hiện hình ảnh, tiêu đề, mô tả… trước đó?
1. Đầu tiên, các bạn cần làm là truy cập vào trang Sharing Debugger của Facebook. Paste link cần sửa lỗi vào mục Sharing Debugger và click vào nút Debug.
2. Đợi cho quá trình debug hoàn tất, click tiếp vào nút Scrape Again.
Chờ trong giây lát để bots của Facebook tiến hành thu thập lại dữ liệu. Nếu site đã tích hợp Facebook Open Graph, lỗi của bạn sẽ được khắc phục hoàn toàn. Thật đơn giản phải không nào? Chúc các bạn thành công!
Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)
Em đã áp dụng hiển thị ảnh rồi ạ. a cho em hỏi update cái Yoast SEO lên phiên bản mới có mất phí không ạ?
Không bạn nhé. Yoast SEO là plugin miễn phí mà.
Anh ơi, em đã làm theo nhưng sau khi share lên fb bằng link trang index (bài viết thì hiện bình thường) vẫn không có ảnh thumbail anh nhỉ.. Hay có phải chèn thêm thuộc tính gì không ạ. Em cảm ơn anh nhiều
Trang chủ của bạn chưa có ảnh đại diện. Đọc kỹ lại hướng dẫn đi bạn. Xem hình số 4 trong bài viết.
Cảm ơn bạn bài chia sẻ của bạn rất hiếm.
Cho mình hỏi tại sao trang X39.club của mình ngay từ ban đầu tạo, từ lần chia sẻ gửi link đầu tiên qua messger cũng như bây giờ chia sẻ vào facebook nó đều báo lỗi vi phạm nguyên tắc cộng đồng. Mà mình đã làm gì đâu mà vi phạm, gửi phản hồi cho facebook mấy lần mà hok có hồi đáp. Bạn có biết nguyên nhân hok? Thanks
Thank bạn đã phản hồi!
Bạn có thể nói rõ hơn giúp mình không? Host này là trong nước không phải quốc tế bạn ạ!
Chào bạn!
Website của mình là https://expressplus.app
Mình đã kiểm tra thẻ meta, SSL các kiểu thấy ổn hết mà lúc share FB rất là chậm và không chịu hiện ảnh. Đã debug rồi mà cũng không được. Bạn xem giúp mình được không ạ!
Thank a lot!
Mình nghĩ nhiều khả năng do cái host của bạn. Kết nối quốc tế của nó có vấn đề.
kích cỡ ảnh bao nhiêu là chuẩn khi lên Fb anh nhỉ.. ảnh lên fb toàn bị mất, thiếu
Bạn lên Google tìm từ khóa “Facebook image size” là ra mà. :)
Dạ vâng cảm ơn anh
Cái này mình cũng không giải quyết được 100%. Đôi khi lỗi vẫn xảy ra dù đã làm chuẩn
Không 100% cũng 99.9% rồi bạn ạ. :P
Khá hữu ích cho anh em làm Social và Web Dev. Cái này anh em nào không cài Yoast thì có thể thêm ảnh cho bài viết rồi debug lại với Facebook cũng ok.
Web của em hiện lỗi này
Cảnh báo cần được sửa
SSL Error
Can’t validate SSL Certificate. Either it is self-signed (which will cause browser warnings) or it is invalid.
Lỗi Curl
Lỗi Curl: 60 (SSL_CACERT)
Thuộc tính được suy ra
Thuộc tính ‘og:image’ phải được cung cấp rõ ràng, ngay cả khi có thể suy ra giá trị từ các thẻ khác.
Thiếu tài sản
Các tài sản cần thiết sau bị thiếu: og:url, og:type, og:title, og:image, og:description, fb:app_id
Em đã làm theo hướng dẫn nhưng không được. Cho em hỏi có cách sửa nào khác không ạ?
link web của em: https://kientrucxaydungtlt.com/
Em cảm ơn ạ!
Web của bạn lỗi SSL rồi này. SSL bạn mua hay là lấy ở đâu vậy? Có vẻ cài sai cách. https://www.sslshopper.com/ssl-checker.html#hostname=https://kientrucxaydungtlt.com/
Dạ SSL này mua ạ. Bên code cài em cũng không rành code lắm. Cảm ơn anh, em báo code kiểm tra lại ạ!
Còn nữa, update cái Yoast SEO lên phiên bản mới đi bạn ơi. Yoast SEO v3.0.7 chắc từ đời Tống. Phiên bản mới nhất giờ đã là v14.6.1 rồi
Dạ cái này em biết ạ, Khổ nổi phiên bản wpr của em là phiên bản cũ, em không rành code nên không dám update lên sợ lỗi. mà phiên bản cũ thì không tương tích với Yoast SEO mới.
Mạnh dạn up lên bản mới nhất đi bác, dùng phê hơn con tê tê
Dạ hông mạnh được bác, ko biết code khổ thế đấy ạ, nghe nói up lên dễ bị lỗi, cả cty có mỗi cái web bác ạ! :)))
Cho mình hỏi? Mình bị lỗi khi chia sẻ link website cho người khác (copy linek web gửi đi) trên zalo thì không hiện ra đúng logo của website mà lại hiện ra logo của đối tác mình? Là bị lỗi gì vậy bạn?
Bạn thử dùng tools này để debug xem sao nhé: https://developers.zalo.me/tools/debug-sharing
Bạn xem code trong thì thẻ og:image đang có đường dẫn là gì sẽ thấy.