U301 kit

Table of Content

OpenGraph Image Là Gì

Hình ảnh OpenGraph là những hình ảnh được sử dụng cho thẻ OpenGraph, được hiển thị trong bản xem trước của Twitter, Facebook và Open Graph.

Hình ảnh OpenGraph có thể là tĩnh hoặc động. Điều này phụ thuộc vào việc chúng được tạo ra bằng cách sử dụng trình tạo OpenGraph hoặc các công cụ khác.

Hình ảnh được tạo ra bằng trình tạo OpenGraph thường là tĩnh vì chúng được tạo ra dựa trên metadata bạn cung cấp, thường là tĩnh. Ví dụ, nếu bạn cung cấp metadata cho một bài đăng blog, trình tạo OpenGraph sẽ tạo ra một hình ảnh OpenGraph tĩnh dựa trên metadata đó.

Hình ảnh được tạo ra bằng các công cụ khác có thể là động. Ví dụ, nếu bạn sử dụng một framework render phía máy chủ để tạo ra hình ảnh OpenGraph, những hình ảnh này có thể được tạo ra dựa trên hành vi của người dùng, thời gian, thời tiết hoặc thông tin động khác.

Tạo Hình Ảnh OpenGraph Bằng Công Cụ

Mã HTML OpenGraph

<meta property="og:url" content="https://example.com/article">
<meta property="og:title" content="Tiêu Đề Bài Viết Của Tôi">
<meta property="og:description" content="Đây là mô tả bài viết của tôi">
<meta property="og:type" content="article">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="OpenGraph">

Với mã HTML này, trang sẽ hiển thị hình ảnh https://example.com/og-image.png trong OpenGraph.

Hiệu Ứng Xem Trước

Sau khi tạo hình ảnh OG, nhiều trang web cung cấp công cụ xem trước và gỡ lỗi trực tuyến để giúp bạn chẩn đoán vấn đề. Dưới đây là một số công cụ phổ biến:

Trang webLiên kết
Facebookhttps://developers.facebook.com/tools/debug/
LinkedInhttps://www.linkedin.com/post-inspector/
Discordhttps://discord.com/developers/embeds