Và: hình ảnh html

Chủ sở hữu trang web tạo hình ảnh Biểu đồ mở – hình ảnh phù hợp hoàn hảo với bài đăng trên Facebook khi trang được chia sẻ. Một cái tốt sẽ có ngữ cảnh và sức hấp dẫn để khuyến khích người dùng Facebook nhấp vào nó

Một thương hiệu trông chuyên nghiệp hơn – và hấp dẫn hơn – khi một hình ảnh Open Graph được kết hợp tốt được làm nổi bật

Khi được chia sẻ, một trang không có hình ảnh OG sẽ hiển thị hộp màu xám hoặc biểu ngữ ngẫu nhiên

Bạn có thể thấy bên dưới hộp màu xám không hấp dẫn và không giúp thương hiệu kết nối với khán giả. Thật dễ dàng để cuộn qua nó. Không ai thích một hộp màu xám

Chia sẻ trên Facebook không có hình ảnh OG

Ngược lại, dưới đây là chia sẻ trên Facebook của một bài viết KHÔNG sử dụng hình ảnh Open Graph. Nó sôi động hơn rất nhiều và có nhiều khả năng nhận được sự tham gia hơn

Trong bài viết này, tôi chỉ cho bạn các kích thước hình ảnh OG và vị trí chúng xuất hiện trên internet. Tôi cũng sẽ cho bạn biết cách thêm một trang vào trang hoặc bài đăng WordPress, cũng như trang HTML

Kích thước hình ảnh Open Graph

Kích thước đề xuất cho hình ảnh Facebook Open Graph là khoảng 1200 pixel x 630 pixel và không được lớn hơn 8 MB, vì vậy hãy nhớ tối ưu hóa hình ảnh

Kích thước được đề xuất có trên trang Nhà phát triển Facebook – Hình ảnh trong Chia sẻ liên kết

Yêu cầu tối thiểu là 200 x 200 pixel

Hình chữ nhật nằm ngang (1200 × 630 pixel) trông tuyệt vời trên các chia sẻ của Facebook, chính xác là do Facebook phát triển hệ thống Open Graph

LinkedIn, Pinterest và Twitter cũng sẽ nhận ra hình ảnh OG khi một trang được chia sẻ. Hãy nhận biết các biến chứng kích thước trên Twitter

Khi hình ảnh có chiều rộng dưới 600 pixel, các bài đăng trên Facebook sẽ hiển thị khác

Thay vì hiển thị đầy đủ chiều rộng, xếp chồng dưới văn bản, hình ảnh sẽ nổi về bên trái, ở định dạng cột

In my opinion, the small image doesn’t stand out as well. Đi cho kích thước lớn mọi lúc

Twitter có sử dụng hình ảnh Open Graph không?

Robot Twitter sẽ mặc định là Open Graph nếu chúng không thể tìm thấy thẻ meta Twitter có tên Twitter Cards

Một điều cần lưu ý là hình ảnh OG không hoàn toàn phù hợp với một tweet – nội dung có thể bị cắt

Để có sự phù hợp hoàn hảo, hãy tạo các hình ảnh riêng biệt cho hình ảnh Biểu đồ mở và hình ảnh Thẻ Twitter. Không mất nhiều thời gian để thay đổi kích thước hình ảnh OG thành hình ảnh Thẻ Twitter

Kích thước hình ảnh Thẻ Twitter phải là 1024 pixel x 512 pixel

Tôi tự hỏi nếu một ngày nào đó hai nền tảng sẽ thẳng hàng?

Những gì cần bao gồm trên một hình ảnh OG

Hình ảnh phải liên quan đến nội dung bài viết – bạn có thể nhanh chóng mất fan nếu hình ảnh gây hiểu nhầm

Lớp phủ văn bản tiêu đề sáng sủa, linh hoạt giúp khuyến khích nhấp chuột – cho người đọc thấy nội dung trong bài viết. Nó thậm chí có thể bao gồm lời kêu gọi hành động, chẳng hạn như 'TÌM HIỂU THÊM'

Tuy nhiên, ít hơn là nhiều hơn khi nói đến văn bản trên hình ảnh Facebook

Bao gồm một biểu tượng trên tất cả các hình ảnh – điều này được gọi là xây dựng thương hiệu và nó giúp mọi người nhận ra nội dung. Tôi sử dụng biểu tượng đáp ứng, được cắt bớt của mình vì nó khiêm tốn hơn

Để tạo hình ảnh Open Graph, hãy sử dụng Photoshop, trình chỉnh sửa hình ảnh miễn phí như GIMP hoặc trình chỉnh sửa hình ảnh trực tuyến như Canva. Canva phần lớn miễn phí, nhưng bạn sẽ phải trả phí để tạo ra hình ảnh ở kích thước yêu cầu

Hình ảnh biểu đồ mở Yoast

Yoast SEO là một plugin WordPress cho phép chủ sở hữu trang web WordPress thêm các thẻ meta như tiêu đề và mô tả

Những điều này giúp các công cụ tìm kiếm hiểu nội dung của trang và kiểm soát những gì xuất hiện trên tìm kiếm của Google

Chủ sở hữu trang web có thể thêm siêu dữ liệu và Yoast cũng cho phép chúng tôi thêm hình ảnh Biểu đồ mở vào bất kỳ bài viết WordPress nào

WP Beginner có một bài viết hữu ích về cài đặt Yoast SEO trên WordPress

Thêm hình ảnh Yoast Open Graph

Khi Yoast được cài đặt và kích hoạt, bạn sẽ tìm thấy khu vực chỉnh sửa Yoast ở cuối bất kỳ trang hoặc bài đăng nào. Đôi khi bạn cần mở nó lên để xem các tùy chọn

Để thêm hình ảnh Yoast Open Graph, hãy nhấp vào tab Xã hội, như được hiển thị ở đây

Khi đó, hãy truy cập Facebook (thoạt nhìn khó thấy), thao tác này sẽ mở ra nhiều tùy chọn hơn

Sử dụng khu vực này để kiểm soát nhiều hơn cách các bài báo xuất hiện khi được chia sẻ trên phương tiện truyền thông xã hội

Lưu ý trường Tiêu đề Facebook và Mô tả Facebook

Theo mặc định, thẻ meta tiêu chuẩn được sử dụng trên phương tiện truyền thông xã hội. Tuy nhiên, Mô tả trên Facebook có thể chứa nhiều từ hơn mô tả meta tiêu chuẩn được sử dụng trên các công cụ tìm kiếm

Sử dụng Mô tả trên Facebook, bạn cũng có thể nói chuyện trực tiếp với người hâm mộ trên Facebook bằng cách nói chuyện trực tiếp với họ. Phần thưởng cho các thương hiệu - vì vậy rất đáng để hoàn thành khu vực này

Để thêm ảnh OG kéo xuống dưới tìm nút Upload. Nhấp vào nó để thêm hình ảnh ở kích thước được đề xuất là 1200 pixel x 630 pixel

Bạn sẽ cần lưu (Cập nhật) bài đăng hoặc trang để các thay đổi có hiệu lực

Yoast cao cấp so với Yoast

Trong Yoast Premium, có thể xem trước hình ảnh Open Graph trước khi chia sẻ bài đăng quan trọng trên Facebook

Tôi thích các mẫu giao diện xã hội này, được phát hành trong phiên bản Yoast Premium mới nhất. Nó cung cấp một cái nhìn tổng quan tuyệt vời về cách mọi thứ sẽ xuất hiện trên các nền tảng xã hội

Yoast đã tạo một video giải thích phù hợp để cho bạn thấy ý của tôi – The Yoast SEO Social Previews

Nếu chưa có bản Yoast Premium, bạn cần chia sẻ bài viết lên Facebook để xem thành quả.  

Để xem hình ảnh OG với tiêu chuẩn Yoast, bạn cần chia sẻ trang trực tiếp

Để thực hiện việc này, hãy chuyển đến giao diện người dùng của trang web, điều hướng đến bài viết. Bây giờ đánh dấu URL đầy đủ trong thanh địa chỉ;

https://yourwebsiteaddress.com/blog/open-graph-image/

Quay lại Facebook, bắt đầu một bài đăng mới và sau đó dán URL. Bạn sẽ thấy hình ảnh có kích thước chính xác xuất hiện phía trên thẻ meta Mô tả của Facebook

Thêm hình ảnh Open Graph bằng HTML

Nếu bạn đã mã hóa trang web của mình bằng HTML, hãy sử dụng thẻ Open Graph trước thẻ cuối cùng. Thuộc tính meta cho hình ảnh Open Graph là

og:image

Bao gồm chiều rộng và chiều cao để Facebook có thể hiển thị hình ảnh với tốc độ

Thông báo trong đoạn mã trên. Tiêu đề và mô tả OG sẽ xuất hiện trên bài đăng trên Facebook

Những điều này có thể hoàn toàn khác đối với tiêu đề meta và mô tả meta của trang, vì vậy bạn có thể sử dụng chúng để cá nhân hóa nội dung cho người hâm mộ trên Facebook