Làm cách nào tôi có thể đặt hình ảnh trang web sẽ hiển thị dưới dạng xem trước trên Facebook?

156

Khi bạn chia sẻ một liên kết trên facebook, nó sẽ tự động tìm thấy hình ảnh trên trang web và chọn ngẫu nhiên một liên kết làm bản xem trước. Làm thế nào bạn có thể ảnh hưởng đến hình ảnh xem trước? Khi một người chia sẻ liên kết trang web trên facebook của mình?

image facebook preview

— dấu
nguồn

234

1. Bao gồm phần mở rộng không gian tên XML đồ thị mở cho khai báo HTML của bạn

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://ogp.me/ns/fb#">

2. Bên trong bạn <head></head>sử dụng thẻ meta sau để xác định hình ảnh bạn muốn sử dụng

<meta property="og:image" content="fully_qualified_image_url_here" />

Tìm hiểu thêm về giao thức đồ thị mở ở đây.

Sau khi thực hiện các thao tác trên, hãy sử dụng "Trình gỡ lỗi đối tượng" của Facebook nếu hình ảnh không hiển thị chính xác. Cũng lưu ý lần đầu tiên được chia sẻ, nó vẫn không hiển thị trừ khi chiều cao và chiều rộng cũng được chỉ định, xem Chia sẻ trên Facebook - Hình thu nhỏ không hiển thị lần đầu tiên

— Shef
nguồn

@Martin Mình không biết. Có thể họ làm vậy, nhưng tôi không thấy nó được đề cập trong Tài liệu giao thức đồ thị mở . Hãy thử Trình gỡ lỗi để xem các giá trị được lưu trong bộ nhớ cache được hiển thị cho trang web của bạn. Dường như có một câu hỏi khác trên SO có tiêu đề Facebook Open Graph không xóa bộ nhớ cache liên quan đến vấn đề này.

— Shef

Nhận xét của @KDog: Có vấn đề? Kiểm tra mã của bạn tại công cụ gỡ lỗi facebook. Facebook cache hình ảnh, tiêu đề và văn bản cơ thể. Tôi đã thay đổi tiêu đề trong khi thêm xml vào trang web của mình và vì tôi vô tình tạo ra một vài lỗi xác thực, không có gì thay đổi trong bản xem trước chia sẻ của Facebook. Facebook đã sử dụng bộ đệm hợp lệ thay vì hiển thị dữ liệu mới bất khả xâm phạm. Tôi đã có thể giải quyết các lỗi này bằng cách sử dụng developers.facebook.com/tools/debug . Sau khi làm như vậy, tiêu đề và hình ảnh mới của tôi hiển thị ngay lập tức.

— Jeremy Thompson

@ScotterMonkey: Vâng, đó là hành vi dự kiến. Bạn có thể nói với FB những nội dung sẽ sử dụng. BTW, bạn có thể thêm nhiều <meta property="og:image" content="your_image_here" />giữa các headyếu tố để bạn có thể chọn khi bạn đăng trên FB.

— Shef

Bỏ lỡ điều đó với fb trong khai báo html. Cứu ngày của tôi! (ngay cả khi đây là một bài viết ba năm tuổi). Cảm ơn rất nhiều!

— bestprogrammerinthewworld 30/1/2015

liên kết nội dung là một url thực tế - không phải là một liên kết tương đối mà tôi tìm ra. tức là http://mywebsite.com.au/Images/prettypic.pngkhông/Images/prettypic.png

— JumpingJezza

Cũng lưu ý rằng nếu bạn có wordpress, chỉ cần cuộn xuống dưới cùng của trang web khi ở chế độ chỉnh sửa và chọn "hình ảnh nổi bật" (phía dưới bên phải màn hình).

— davea0511
nguồn

Nếu bạn đang sử dụng Weebly , hãy bắt đầu bằng cách xem trang web đã xuất bản và nhấp chuột phải vào hình ảnh để Sao chép Địa chỉ Hình ảnh. Sau đó, trong Weebly, đi đến Chỉnh sửa Trang web, Trang, nhấp vào trang bạn muốn sử dụng, Cài đặt SEO, bên dưới Mã tiêu đề, nhập mã từ câu trả lời của Shef:

<meta property="og:image" content="/uploads/..." />

chỉ cần thay thế / tải lên / ... bằng địa chỉ hình ảnh được sao chép. Nhấp vào Xuất bản để áp dụng thay đổi.

Bạn có thể bỏ qua phần câu trả lời của Shef về không gian tên, vì điều đó đã được đặt mặc định trong Weebly.

— krubo
nguồn