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

Từ khóa

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 hiển thị như thế nào? Tối ưu Facebook Open Graph Meta Tags cho website của bạn
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>

44 bình luận

cái này anh làm được rồi, nhưng mà anh sài WP chứ không phải Blogspot :v

Em dùng blospot như bác. Cũng áp dụng mấy thẻ trên rồi. Nhưng đến khi share link thì bị lỗi. Bác chi em xin cái tip vào [email protected] nhé. Em cảm ơn

Làm cái logo hình vuông là nó hiện thôi chứ có gì đâu. ^^ đừng xóa comments này nha bác

Thanh niên lịch sự, không xóa comment của nhau :v

Website die rồi mà, gửi qua email đó liệu bạn có nhận được không ~~

Gửi tip qua Face cho anh nhé, có vài vụ đang muốn hợp tác với chú đây

thủ thuật khá hữu ích, trc e cũng bị thế này mà phải thuê tụi freelancer nước ngoài fix :((

thuê freelancer nước ngoài á :)) có một sự chém nhẹ chăng :v

Hướng dẫn chi tiết quá bác :D đã test, chờ FB cập nhật xem sao :D
[email protected]

Sao bác không làm bài hướng dẫn cách lấy ảnh theo thumbnail ấy? làm cách thủ công này lâu phết.

Wordpress hay Blogspot thì đều tự động lấy ảnh bài viết làm thumbnail rồi mà bạn. Cần gì hướng dẫn nữa.
Cái này là tip hiển thị thumbnail khi mà share link trang chủ thôi. Vì nhiều bạn chưa tối ưu cho link trang chủ

Thủ thuật hay quá, cảm ơn anh nha.
Để em áp dụng blog của em, gamebadao.blogspot.com

Cảm ơn anh rất hay. Sửa mãi mới được

WordPress hay Blogspot thì đều là tùy theme/tem thôi. Có cái tự động, có cái không.
Với những đồ miễn phí thì thường là không có, đều cần dùng đến công cụ khác cả bác ạ....

Em ko bjk thêm vào header là chỗ nào, anh có thể chỉ thêm cho e được ko. Đây là địa chỉ blog của e: http://www.cafebiz24h.xyz/. Với cho e hỏi thêm là, blog e sao địa chỉ link đăng lên face là bị face chặn nhỉ, nó bảo lỗi do hosting.

bạn thêm vào bên trên thẻ < / head > là được nhé

Dạ, để em làm thử :D Cảm ơn a nha... Thế còn cái face bị chặn đó là do sao hả a. Hay do e trỏ tên miền chưa đúng hả a

mình không rõ là chèn vào header là chỗ nào...bạn giúp mình với được ko ad

trong cặp thẻ < head > là được bác ạ

Opencart thì làm thế nhỉ. Thanks

về nguyên tắc chỉ cần cho code đó vào là được, nhét vào đâu cũng ok :v mình ko dùng Opencart nên ko rõ. Bạn qua tìm cộng đồng Opencart để được hỗ trợ tốt hơn

Cho mình hỏi, mình share link từ blog của mình lên facebook nó cứ có dạng Tên blog: Tiêu đề bài viết. Mình muốn sửa thành Tiêu đề bài viết | Tên blog thì phải làm ntn @@

bạn xem trong phần ở trong thẻ < head > nhé. Hơi khó nói ở đây, liên hệ mình qua Facebook mình hỗ trợ cho nhé

mình muốn có nhiều thumblai để cho nó sinh động từng topic thì thêm nhiều thẻ meta hả a?

thông thường thì ảnh thumbnail của 1 bài viết sẽ chính là ảnh đầu tiên của bài viết đó, nếu web của bạn chưa có chức năng này thì nên tối ưu phần web trước, chứ không để làm thủ công cho từng bài được, rất mất thời gian

cho e hỏi trước đây khi chia sẻ lên facebook thì link vẫn nhận đúng hình ảnh nhưng tự dưng 2 hôm nay khi chia sẻ link bị nhận sai hình ảnh a.? Cho em hướng khắc phục với ạ?

trước đây đúng mà giờ lại sai. Vậy thì có thể bạn đụng đến code nào đó trong web của bạn rồi. Còn nếu mà không phải thì liên hệ mình qua Facebook xem mình có hỗ trợ được không nhé

Nặc danh delete 23:19 2/1/16

em muốn cho người dùng chỉ chia sẻ được ảnh của trang web lên tường của họ thì phải làm thế nào ạ.vd như 1 hình ảnh họ vừa chỉnh sửa ở trang web của em

hình như câu hỏi của bạn không đúng với nội dung bài viết này. Nếu muốn người dùng chia sẻ thì bạn có thể dùng nút like Facebook mà.

Em xài blogspot. nhưng khi share ULR trang chu lên facebook thì nó lại lấy ảnh từ trong bài viết làm ảnh trang chủ. Bác hướng dẫn e chèn link cố định cho trang chủ nhé!

bài hướng dẫn rõ ràng vậy còn gì nữa bạn. Đoạn code dưới cùng là dành riêng cho Blogspot đấy

ảnh không vuông thì làm sao ad

bạn có thể chọn hình vuông hoặc hình chữ nhật với kích thước 470x246 là đẹp nhất

có cách nào fake link không anh, ví dụ đăng lên group fb sẽ là domain theo ý mình (kiểu như spam ấy) để domain trang nổi tiếng
thank anh

Thực ra là có, trước đây mình có bán 1 ebook hướng dẫn làm cái này. Nhưng nhiều người dùng spam quá nên mình đã ngừng bán nó. Mình sẽ ko bán đâu nhé nhưng giới thiệu cái ebook cho bạn biết thôi
Ebook Facebook Blackhat Marketing

Hay quá anh Hiệp ơi, cám ơn anh nhiều, vì đã share bài viết này cho mọi người.

ad cho mình hỏi làm sao để chia sẻ link vào 1 nhóm nào đó trên facebook mà hình ảnh, tên link và mô tả hoàn toàn khác so với link thật không, tức là sửa lại đc toàn bộ mấy cái đó để câu sự tò mò, thanks

bài viết chất lượng đấy bro

lúc trước mình cũng bị sai ảnh thumbail. làm theo cách này của bạn ok 4-5 tháng nay rồi. Tự nhiên bữa nay lai bị nữa. giờ k biết sữa sao luôn. cho xin ý kiến nhé Ad!

Tại sao khi em pots link qua gmail vào group lại không hiện bản xem truớc mà chỉ có mỗi đường link là sao anh. Mong mọi nguời chỉ giúp

e đang gặp lỗi share link, ai rảnh giúp e với, link là cái hiện trạng e nó. hiển thị k đúng ảnh,

https://www.facebook.com/storedaklak/



liên hệ giúp e qua link trên luôn nhé, e cảm ơn trước

tình hình là khi share bài trên blogspot thì facebook cũng không hiển thị tiêu đề bài đăng, admin giúp chỉ giúp nhé !


EmoticonEmoticon