Hiển thị dụng hình ảnh website trên Facebook

Khi chúng ta có website thì thường chia sẻ lên các mạng xã hội để tăng traffic và quảng bá đến nhiều người hơn. Mình cũng vậy, nhưng trong quá trình share link website lên Facebook thì gặp phải một số vấn đề.

• Ảnh Thumbnail hiển thị không chuẩn
• Tiêu đề bài viết hoặc mô tả hiển thị không chuẩn [nhiều trường hợp không hiển thị]

Share link website lên Facebook

Nên mình viết bài viết này để tìm hiểu sơ sơ xem nguyên tắc hoạt động của nó là như thế nào. Và cách tối ưu làm sao để cho website của bạn hiển thị link đẹp mắt khi chia sẻ lên Facebook nhé.

Tìm hiểu về Facebook Open Graph Meta Tags

Facebook Open Graph Meta Tags là một giao thức mà Facebook tạo ra giúp những web developer có thể tùy biến hiển thị thông tin website mỗi khi bạn chia sẻ link website lên mạng xã hội này. Nó thực chất là các thẻ mô tả với cấu trúc chung như sau

Từ đây bạn có thể điền thông tin mà bạn muốn hiển thị mỗi khi chia sẻ link website lên Facebook Cũng có khá nhiều các thẻ trong bộ Open Graph Meta Tags của Facebook. Nhưng trong bài viết này mình sẽ chỉ liệt kê ra vài thẻ quan trọng nhất để bạn có thể hiển thị link đẹp trên Facebook

Thẻ tiêu đề

Thẻ mô tả

Xem thêm Hiển thị link Fanpage khi share bài viết lên Facebook

Thẻ hình ảnh

Bạn có thể chọn 1 ảnh vuông hoặc 1 ảnh hình chữ nhật với kích thước 470x246 là đẹp.
Xem thêm Kích thước hình ảnh chuẩn trên Facebook

Các bạn có thể tùy chỉnh cho phù hợp với website của mình. Để tìm hiểu sâu hơn về các thẻ này thì bạn hãy vào trang Facebook Open Graph. Còn để kiểm tra trước xem link của bạn sẽ hiển thị như thế nào thì bạn có thể sử dụng công cụ Debugger.

Chúc các bạn thành công!

Riêng những bạn dùng Blogspot thì các bạn có thể sử dụng đoạn code sau và chèn vào header là được, chỉ cần thay phần mình đánh dấu màu đỏ thành nội dung của bạn là được.

Khắc phục lỗi không hiện hình ảnh và mô tả khi share link lên Facebook

Vừa qua mình gặp khá nhiều bạn khi share bài viết, sản phẩm lên Facebook nhưng không hiển ảnh và mô tả. Ví dụ như link bên dưới.

Ảnh lỗi không hiện hình ảnh và mô tả khi share link lên Facebook

Đây là một lỗi rất khó chịu khi các link ban 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].

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…]. Và ở bài viết này mình sẽ hướng dẫn bạn khắc phục với Plugin SEO và mình đã test thành công khi thực hiện và viết lại bài viết này. Trước khi thực hiện thì hãy cùng mình tìm hiểu Facebook Open Graph là gì nhé.

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, từ đó 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ị link bài viết mà không hiển thị hình ảnh và các thành phần mô tả.

Sử dụng Facebook Open Graph trong WordPress

Với WordPress bạn có thể sử dụng Plugin bên thứ 3 hỗ trợ tích hợp Facebook Open Graph như là Rank Math, Yoast SEO. Và ở bài viết này mình sẽ sử dụng Rank Math để hỗ trợ xử lý lỗi trên.

Bước 1: Cài đặt Rank Math

Không quá cần thiết để sử dụng bản PRO. Với bản miễn phí tại kho Plugin WordPress cũng đã có đầy đủ các tính năng để làm việc rồi.

Và bạn có thể tải Rank Math tại đây: Rank Math SEO – Best SEO Plugin for WordPress

Xem thêm:

Bước 2: Cấu hình Rank Math

Để cấu hình Rank Math thì bạn xem qua bài viết sau để thực hiện và cấu hình chuyện nghiệp nhé. Đã có một bài viết chi tiết từ trang thachpham.com nên mình sẽ không hướng dẫn lại phần cấu hình này.

• RANK MATH SEO – PLUGIN HỖ TRỢ SEO MỚI VÀ NHIỀU TÍNH NĂNG

Và đến bước thiết lập Rank Math Default Social Share Image bạn hãy chọn ảnh để hiển thị mặc định khi share nếu bài viết, sản phẩm đó không có ảnh.

Bước 3: Kiểm tra lỗi

Sau khi cài đặt và cấu hình Rank Math thành công. Mình sẽ sử dụng Trình gỡ lỗi chia sẻ của Facebook để bắt đầu kiểm tra và thu thập lại.

Tại đây bạn hãy nhập vào link của web và trang vào để kiểm tra. Bạn sẽ thấy phần URL đã tìm nạp và URL chính chỉ hiện thỉ Tiêu đề mà không có ảnh kèm mô tả.

Do đó khi share lên Facebook sẽ hiển thị như trên.

Bước 4: Tìm nạp lại nội dung

Khi đã thực hiện xong các bước trên. Bạn vào admin của website sau đó đến các phần bài viết hoặc sản phẩm thực hiện cập nhật lại hình ảnh. Tiếp đến bạn di chuyển xuống cuối tìm dòng Rank Mat SEO => Social => Faceook Preview.

Nếu xuất hiện ảnh hiển thị như bên dưới là đã thành công.

Bây giờ bạn quay lại trang Trình gỡ lỗi chia sẻ của Facebook sau đó thực hiện tìm nạp lại các link, bạn hãy thực hiện vài lần để Facebook tìm nạp lại cho bạn nhé. Và bên dưới là kết quả mình thực hiện.

Nếu tìm nạp ở trang Facebook Developers thành công thì khi đó bạn share lên Facebook mới có tác dụng nhé.

Nếu bạn cần hỗ trợ hãy để lại bình luận bên dưới. Hoặc đặt bất kỳ các câu hỏi tại diễn đàn để được hỗ trợ