Share link website lên Facebook hiển thị như thế nào?

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ả <meta> với cấu trúc chung như sau

<meta property=”og:{tagName}” content=”{tagValue}”/>

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 đề

<meta content='Hiệp B - Advertising on Facebook' property='og:title'/>

Thẻ mô tả

<meta content='Cập nhật những kiến thức mới nhất về marketing trên Facebook. Cách chạy quảng cáo Facebook hiệu quả.' property='og:description'/>

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

Thẻ hình ảnh

<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis0KUlqK9YzPrkaT3FFGnA-691N6aWdFbCKpHMNgPSadDxcgPQG5zZwFLD7h8JKhVjADVht3RCskbsAJOGXMM695aaksbGLLv5YpZoplG7qujFFfquCMDOCC_3j-bKsmvEPwxjVKdqkJbU/s1600/author-image.png' property='og:image'/>

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.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Hiệp B - Advertising on Facebook' property='og:title'/>
<meta content='Cập nhật những kiến thức mới nhất về marketing trên Facebook. Cách chạy quảng cáo Facebook hiệu quả.' property='og:description'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis0KUlqK9YzPrkaT3FFGnA-691N6aWdFbCKpHMNgPSadDxcgPQG5zZwFLD7h8JKhVjADVht3RCskbsAJOGXMM695aaksbGLLv5YpZoplG7qujFFfquCMDOCC_3j-bKsmvEPwxjVKdqkJbU/s1600/author-image.png' property='og:image'/>
</b:if>