Cách sử dụng thẻ meta 'og' (Open Graph) cho chia sẻ trên Facebook


118

Facebook lấy tất cả hình ảnh từ trang web của tôi.

Tôi chỉ muốn chia sẻ một hình ảnh trên trang đó.

Tôi đã nghe nói về ogthẻ meta, nhưng tôi không biết cách đặt nó.

Câu trả lời:


355

Sử dụng:

<!-- For Google -->
<meta name="description" content="" />
<meta name="keywords" content="" />

<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="application-name" content="" />

<!-- For Facebook -->
<meta property="og:title" content="" />
<meta property="og:type" content="article" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />

<!-- For Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />

Điền nội dung = "..." theo nội dung trang của bạn.

Để biết thêm thông tin, hãy truy cập 18 thẻ meta mà mọi trang web nên có trong năm 2013 .


Bạn có biết authorthẻ nên có tên tác giả hay liên kết đến URL hồ sơ không?
tobek

Tôi nghĩ rằng cả hai đều có thể. Nếu bạn muốn hình ảnh hồ sơ của mình ở bên trái bài đăng trên trang tìm kiếm của google, bạn nên cung cấp liên kết đến hồ sơ trên google + của mình.
jurihandl

thẻ meta authorcó nghĩa là tác giả của trang web hoặc tác giả của bài viết hiện tại (ví dụ trong cách sử dụng trên bài viết blog)?
LuiGi

Đây có phải là một hoạt động tốt? Google / Facebook / Twitter có tìm thấy lỗi này không?
Jeromie Devera,

2
1) Facebook sẽ đọc thẻ <meta name = "author"> và hiển thị trong bản xem trước khi ai đó chia sẻ trang 2) Facebook hiện đã hỗ trợ cho <meta property = "article: author"> (chi tiết tại giannopoulos.net/ 2015/06/20 /… ) và sẽ hiển thị một liên kết đến hồ sơ Facebook của bạn (nếu bạn thực sự đặt một liên kết đến nó trong bài viết: tác giả) 3) Google hiện đang tìm kiếm dữ liệu phong phú ở dạng cái mà nó gọi là "Rich Snippets" ( developers.google.com/structured-data )
MarkG

41

Facebook sử dụng cái được gọi là Giao thức đồ thị mở để quyết định những thứ sẽ hiển thị khi bạn chia sẻ một liên kết. OGP xem xét trang của bạn và cố gắng quyết định nội dung nào sẽ hiển thị. Chúng tôi có thể giúp một tay và thực sự cho Facebook biết những gì cần lấy từ trang của chúng tôi.

Cách chúng tôi làm điều đó là với og:metacác thẻ.

Các thẻ trông giống như thế này -

  <meta property="og:title" content="Stuffed Cookies" />
  <meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" />
  <meta property="og:description" content="The Turducken of Cookies" />
  <meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">

Bạn sẽ cần đặt các thẻ meta này hoặc các thẻ meta tương tự trong <head>tệp HTML của mình. Đừng quên thay thế các giá trị cho riêng bạn!

Để biết thêm thông tin, bạn có thể đọc tất cả về cách Facebook sử dụng các thẻ meta này trong tài liệu của họ. Đây là một trong những hướng dẫn từ đó - https://developers.facebook.com/docs/opengraph/tutorial/


Facebook cung cấp cho chúng tôi một công cụ nhỏ tuyệt vời để giúp chúng tôi xử lý các thẻ meta này - bạn có thể sử dụng Trình gỡ lỗi để xem cách Facebook nhìn thấy URL của bạn và thậm chí nó sẽ cho bạn biết nếu có vấn đề với nó.

Một điều cần lưu ý ở đây là mỗi khi bạn thực hiện thay đổi đối với các thẻ meta, bạn sẽ cần cung cấp lại URL thông qua Trình gỡ lỗi để Facebook xóa tất cả dữ liệu được lưu trong bộ nhớ cache trên máy chủ của họ về URL của bạn.


Tôi thấy thẻ html trong mô tả của mình, bạn có biết cách giải quyết vấn đề này không?
Neil

28

Tôi đã xây dựng một công cụ để tạo meta. Nó cấu hình trước các mục nhập cho Facebook, Google+ và Twitter và bạn có thể sử dụng miễn phí tại đây: http://www.groovymeta.com

Để trả lời câu hỏi thêm một chút, OGcác thẻ tag (Open Graph) hoạt động tương tự như các thẻ meta và nên được đặt trong phần HEAD của tệp HTML của bạn. Xem các phương pháp hay nhất của Facebook để biết thêm thông tin về cách sử dụng thẻ OG hiệu quả.


1
Cảm ơn @Mogsdad Tôi đã mở rộng câu trả lời của mình cho phù hợp.
Louis Otto

1
Liên kết bị hỏng, thật không may!
Vincent Sels
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.