Hình ảnh liên kết bài đăng trên Facebook

95

Khi ai đó đăng một liên kết trên facebook, một tập lệnh thường quét liên kết đó để tìm bất kỳ hình ảnh nào và hiển thị một hình thu nhỏ nhanh bên cạnh bài đăng. Mặc dù vậy, đối với một số URL nhất định (bao gồm cả của tôi), FB dường như không chọn bất cứ thứ gì, mặc dù chúng là một số hình ảnh trên trang đó.

Tôi đọc được rằng FB thích thẻ rel "image_src" hơn cho hình ảnh mà người dùng muốn chỉ định, nhưng điều này cũng không tạo hình thu nhỏ đó cho trang web của tôi.

Url của tôi chuyển trực tiếp đến DNS và không được chuyển tiếp, vì vậy tôi không tưởng tượng đó có thể là vấn đề.

Có ai có ý kiến ​​tại sao FB không thể tạo bất kỳ hình thu nhỏ nào từ trang web của tôi không?

facebook  thumbnails 
— GEOCHET
nguồn
Sẽ hữu ích nếu bạn cung cấp cho chúng tôi một liên kết đến trang web của bạn (hoặc một liên kết khác không hoạt động) - nó có thể gợi lên một số ý tưởng.
— Nick Fortescue
Ở đây bạn có thể xem nó hoạt động như thế nào! Tôi xây dựng nó bằng PHP + jQuery. Mã nguồn có sẵn để tải xuống. Hy vọng bạn thích! lab.leocardz.com/facebook-link-preview-php--jquery
— Leonardo Cardoso
và nếu bạn muốn làm điều tương tự trên google plus, đây là link tham khảo tốt nhất mà tôi có thể tìm thấy: stackoverflow.com/questions/7985398/...
— cregox
— dcorking

Câu trả lời:

119

Cách dễ nhất chỉ là một thẻ liên kết:

<link rel="image_src" href="http://stackoverflow.com/images/logo.gif" />

Nhưng có một số thứ khác bạn có thể thêm vào trang web của mình để làm cho nó thân thiện hơn với mạng xã hội:

Mở thẻ đồ thị

Thẻ Open Graph là các thẻ mà bạn thêm vào <head>trang web của mình để mô tả thực thể mà trang của bạn đại diện, cho dù đó là ban nhạc, nhà hàng, blog hay thứ gì khác.

Thẻ Open Graph trông giống như sau:

<meta property="og:tag name" content="tag value"/>

Nếu bạn sử dụng thẻ Open Graph, sáu điều sau đây là bắt buộc:

  • og:title - Tên của đơn vị.
  • og:type- Loại thực thể. Bạn phải chọn một loại từ danh sách các loại Đồ thị Mở.
  • og:image- URL của một hình ảnh đại diện cho thực thể. Hình ảnh phải có ít nhất 50 pixel x 50 pixel. Hình ảnh vuông hoạt động tốt nhất, nhưng bạn được phép sử dụng hình ảnh rộng gấp ba lần chiều cao.
  • og:url- URL chuẩn, vĩnh viễn của trang đại diện cho thực thể. Khi bạn sử dụng thẻ Open Graph, nút Thích đăng một liên kết đến og:urlthay vì URL trong mã nút Thích.
  • og:site_name - Tên mà con người có thể đọc được cho trang web của bạn, ví dụ: "IMDb".
  • fb:adminshoặc fb:app_id- Danh sách được phân tách bằng dấu phẩy gồm ID Facebook của quản trị viên trang hoặc ID ứng dụng Nền tảng Facebook. Tối thiểu, chỉ bao gồm ID Facebook của riêng bạn.

Có thể tìm thấy thêm thông tin về thẻ Open Graph và chi tiết về Quản trị trang của bạn trong tài liệu về giao thức Open Graph.

http://developers.facebook.com/docs/reference/plugins/like

— WyrdNEXUS
nguồn
5
Tôi nhận được lỗi này từ công cụ lint. All the images referenced by og:image must be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the minimum specification.. Just an fyi
— Trevor
Tôi đã thêm thẻ og trong mã của mình và khi tôi kiểm tra nó bằng công cụ gỡ lỗi đối tượng og của facebook, nó hiển thị cho tôi thông tin chính xác như tôi đã lưu trong thẻ og, nhưng khi tôi cố gắng liên kết trang trên tài khoản fb của mình, nó hiển thị chỉ sao chép trong bộ nhớ cache. Fb giữ bản sao lưu trong bộ nhớ cache bao nhiêu thời gian? Có cách nào khác để xóa bản sao đã lưu trong bộ nhớ cache không?
— KAsh
Xin lưu ý rằng, cách duy nhất để thêm hình ảnh vào bài đăng khi sử dụng AppLinks ( applinks.org ) trong ứng dụng facebook là sử dụng thẻ <link>, sử dụng thẻ <meta> với og: image sẽ KHÔNG hoạt động .
— emerino
Điều này có một danh sách các loại, v.v. và có một số thông tin hữu ích khác.
— Wilf
61

Tôi biết câu hỏi này đã cũ, nhưng gần đây tôi đã giải quyết chính xác vấn đề tương tự và làm đi tìm lại nó trong vài tuần. Nhiều tìm kiếm trên Google cho ra rất nhiều thông tin hữu ích, nhưng hầu hết đều tập trung vào các thẻ Open Graph mà tôi không quan tâm đến việc sử dụng. Hóa ra trang web của tôi có nhiều vấn đề, nhưng đây là một số điều cơ bản.

  1. Như EightyEight đã nói, hãy đảm bảo rằng HTML của bạn hợp lệ - và điều tương tự cũng xảy ra đối với mã javascript và mã phía máy chủ của bạn (PHP, ASP, v.v.). Tôi đã gặp một lỗi PHP nhỏ trong một đoạn mã đang thực thi như một lệnh gọi riêng đến máy chủ từ trang chính. Do một số sự trùng hợp kỳ lạ, mã đó đã tạo ra lỗi 500 - nhưng CHỈ dành cho IE6 và các công cụ phân tích cú pháp nghiêm ngặt như trình xác thực W3C và trình thu thập thông tin trang Facebook. Sự cố không xuất hiện trong các trình duyệt hiện đại (Chrome 4, FF 3.5, IE 8, v.v.) vì vậy tôi không thấy nó ngay lập tức, nhưng các ứng dụng khách cũ hơn / nghiêm ngặt hơn luôn hiển thị 500 và đó là lý do chính khiến FB không không thu thập dữ liệu trang của chúng tôi (khi mọi thứ khác dường như đúng).

  2. Về phản hồi của Randy, anh ấy chính xác rằng Facebook sẽ giữ một bản sao cũ được lưu trong bộ nhớ cache của trang của bạn sau khi bạn cập nhật nó. FB tuyên bố nó chỉ được giữ trong 24 giờ, nhưng tôi đã trải qua thời gian dài hơn thế nhiều. TUYỆT VỜI, FB đã phát hành công cụ "URL Linter" của họ, công cụ này sẽ hiển thị cho bạn bản xem trước trang của bạn sẽ xuất hiện như thế nào khi được chia sẻ trên FB và nó sẽ buộc FB cập nhật ngay bộ nhớ cache của trang của bạn. Đây là một công cụ cứu cánh. Bạn có thể tìm thấy nó tại http://developers.facebook.com/tools/lint/

  3. Về công cụ URL Linter, hãy lưu ý rằng mỗi biến thể của URL được lưu vào bộ nhớ cache riêng trên Facebook, vì vậy "www.example.com" không giống với "example.com". Ngoài ra, cách viết hoa duy nhất cũng được lưu trữ, vì vậy "exampleOne.com" không giống với "exampleone.com". (Điều này dẫn đến rất nhiều nhầm lẫn giữa khách hàng của tôi và tôi khi tôi thấy rằng bộ nhớ cache đã được cập nhật tốt và khách hàng tuyên bố rằng họ không nhìn thấy các bản cập nhật. Hóa ra tôi đang xem exampleone.com và đã sử dụng Linter để cập nhật bộ nhớ cache, nhưng họ đang xem exampleOne.com mà tôi chưa gửi cho Linter. Kết quả là, tôi đã gửi khá nhiều biến thể của URL cho Linter chỉ để che đi phần cơ sở.)

  4. Lời khuyên của WyrdNEXUS để sử dụng thẻ liên kết image_src là ngay lập tức. Điều này cho phép bạn chắc chắn rằng FB đang tìm kiếm hình ảnh tốt nhất có thể cho trang của bạn. Có một số hướng dẫn khác nhau về thông số kỹ thuật mà tệp hình ảnh phải có, nhưng tôi đã sử dụng thành công hình ảnh vuông 128px và đã thấy một hình ảnh 130x97 cũng vượt qua được. Đây là tài liệu chính thức của Facebook từ http://developers.facebook.com/docs/reference/plugins/like/ :

    Hình ảnh phải có ít nhất 50 pixel x 50 pixel. Hình ảnh vuông hoạt động tốt nhất, nhưng bạn được phép sử dụng hình ảnh rộng gấp ba lần chiều cao.

    Rõ ràng, FB sẽ thay đổi kích thước một hình ảnh lớn cho bạn, nhưng hầu như bạn sẽ luôn nhận được kết quả tốt hơn nếu bạn tự thay đổi kích thước hình ảnh đó trước đó.

  5. Về liên kết của Mike Cooper đến bài viết eHow, hãy tránh sử dụng bước số 1 trong bài viết đó. Đó là lời khuyên hợp lệ khi bài báo được viết và khi Mike đăng liên kết, nhưng bây giờ tốt hơn là sử dụng công cụ URL Linter để xem trước cách trang của bạn sẽ xuất hiện khi được chia sẻ. Bằng cách sử dụng Linter, bạn sẽ không khiến FB lưu vào bộ nhớ cache một bản sao xấu (có thể) của trang trước khi bạn có cơ hội chỉnh sửa nó.

— OneRuler
nguồn
Tôi đã vật lộn trong nhiều ngày và không cập nhật chính xác hình thu nhỏ của mình. Công cụ Linter của Facebook ngay lập tức đã giải quyết được vấn đề của tôi - nó đã yêu cầu facebook cập nhật bộ nhớ cache của nó! Hoan hô!
— Hady
Cảm ơn rất nhiều cho công cụ linter đó. Một số bài đăng trên blog của tôi hiển thị hình ảnh, những bài khác không hiển thị mặc dù là một trang dựa trên cơ sở dữ liệu. Đưa URL của trang vi phạm vào URL Linter buộc nó phải lưu hình ảnh vào bộ nhớ cache! Ồ-HOO!
— kristina childs
4
công cụ lint đã thay đổi tên của nó. bây giờ nó chỉ là gỡ lỗi : Develop.facebook.com/tools/debug - từ tất cả những gì tôi có thể nói, đây là phiên bản tl; dr của tất cả những điều này: chỉ cần sử dụng công cụ!
— cregox
11

Để thay đổi Tiêu đề, Mô tả và Hình ảnh, chúng ta cần thêm một số thẻ meta dưới thẻ head.

BƯỚC 1: Thêm thẻ meta dưới thẻ head

<html>
<head>
<meta property="og:url" content="http://www.test.com/" />
<meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
<meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
<meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />

BƯỚC TIẾP THEO: Nhấp vào liên kết dưới đây https://developers.facebook.com/tools/debug

Thêm URL của bạn vào hộp văn bản (ví dụ: http://www.test.com/ ) nơi bạn đã đề cập đến các thẻ. Bấm vào nút GỬI.

Xong rôi.

Bạn có thể xác minh tại đây https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

Trong url trên, u = liên kết trang web của bạn

THƯỞNG THỨC !!!!

— Gaurav123
nguồn
Vui lòng không đăng cùng một câu trả lời cho nhiều câu hỏi: câu trả lời đó không phù hợp cho tất cả hoặc các câu hỏi trùng lặp nên được gắn cờ / đóng như vậy.
— kleopatra
Xin chào Kleopatra, tôi đã suy nghĩ để đăng câu trả lời để giúp những người khác. Tôi nghĩ rằng quan điểm của bạn là hoàn toàn hợp lệ. Tôi sẽ chăm sóc này. Cảm ơn bạn bè
— Gaurav123
@ Gaurav123 liên kết kiểm tra đã chết. Tuy nhiên, tôi đã kiểm tra nó bằng cách tự nhắn tin trên Facebook. Cảm ơn bạn rất nhiều vì câu trả lời rất hữu ích!
— gsamaras
2

Trên thực tế, nếu bạn đã thử liên kết trang đó trên Facebook TRƯỚC KHI thêm liên kết "image_src", Facebook sẽ tiếp tục sử dụng bản sao đã lưu trong bộ nhớ cache cũ và thậm chí không thấy các thay đổi của bạn. Hãy thử sửa đổi URL bằng cách xóa hoặc thêm 'www' hoặc sao chép trang của bạn để kiểm tra nó.

— Randy
nguồn
1

Tôi nhận thấy rằng Facebook không lấy hình thu nhỏ từ các trang web nếu chúng bắt đầu bằng https, đó có thể là trường hợp của bạn?

— raRaRa
nguồn
1

gặp vấn đề tương tự và phát hiện ra rằng thẻ đóng đầu của tôi đã ở sai vị trí

— Diego
nguồn
0

Câu hỏi cũ nhưng gần đây tôi dường như đang gặp phải vấn đề tương tự với hình ảnh thu nhỏ từ liên kết của tôi không hiển thị trong cập nhật trạng thái trên Facebook. Tôi đăng cho nhiều khách hàng và điều này là tương đối mới.

FB dường như không còn thích các URL dài nữa - nếu bạn sử dụng công cụ rút ngắn URL như goo.gl hoặc bitly.com, hình thu nhỏ từ liên kết / bài đăng của bạn sẽ xuất hiện trong cập nhật FB của bạn.

— karen kouf
nguồn
0

Hãy thử sử dụng một cái gì đó như thế này:

<link rel="image_src" href="http://yoursite.com/graphics/yourimage.jpg" /link>`

Có vẻ như hoạt động tốt trên Firefox miễn là bạn sử dụng đường dẫn đầy đủ đến hình ảnh của mình.

Rắc rối là nó bị lệch theo chiều dọc xuống vì một số lý do. Hình ảnh là 200 x 200 như được đề xuất ở đâu đó tôi đã đọc.

— người dùng2494810
nguồn
Tôi định đăng mã cho một thẻ liên kết đã không đăng vì tôi ngu ngốc. Lấy làm tiếc.
— user2494810
-1

Nếu bạn đã sử dụng bất kỳ plugin nào cho seo thì trước tiên hãy kiểm tra cài đặt plugin seo của bạn, sau đó tìm cài đặt Noindex nếu Enable Media for Noindex thì hãy tắt nó đi.

— Milon Patowary
nguồn
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 cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.