Trình tạo ảnh OG — Tạo ảnh chia sẻ 1200×630 px

Ảnh OG là gì?

Ảnh OG (Open Graph) là hình ảnh hiển thị khi một liên kết được chia sẻ trên Facebook, LinkedIn, X, Slack, Discord, WhatsApp, iMessage và nhiều ứng dụng khác. Ảnh được khai báo bằng thẻ meta og:image thuộc giao thức Open Graph, do Facebook khởi xướng và hiện gần như nền tảng nào cũng đọc để hiển thị xem trước liên kết. X còn đọc thêm twitter:card. Khi đặt giá trị summary_large_image, ảnh sẽ hiển thị toàn chiều rộng. Một ảnh xem trước rõ ràng, có nhận diện thương hiệu sẽ giúp liên kết nổi bật giữa dòng tin dày đặc và cho người xem biết nội dung trước khi họ nhấp vào.

Kích thước chuẩn: 1200 × 630

Kích thước 1200×630 px (tỷ lệ 1.91:1) là kích thước Facebook khuyến nghị và hiển thị sắc nét trên hầu hết nền tảng. Thẻ summary lớn của X dùng khung tỷ lệ 2:1, nên có thể bị cắt vài pixel ở phía trên và dưới. Công cụ này luôn giữ chữ trong vùng an toàn. Hãy giữ dung lượng file dưới 5 MB (giới hạn của X; Facebook cho phép 8 MB). Một file PNG từ công cụ này thường chỉ vài trăm KB, còn JPEG nhẹ hơn khi nền là ảnh.

Các thẻ meta cần thiết

<meta property="og:title" content="How to Compress Images">
<meta property="og:description" content="A practical guide…">
<meta property="og:image" content="https://example.com/og/compress.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

URL trong og:image phải là tuyệt đối (bao gồm https://) và có thể truy cập công khai, không nằm sau đăng nhập, không bị chặn bởi robots.txt và không được phục vụ từ localhost. Khai báo chiều rộng và chiều cao giúp Facebook hiển thị xem trước ngay lần chia sẻ đầu tiên, thay vì phải chờ tải ảnh. Bạn có thể tạo các thẻ head còn lại bằng Meta Tag Generator và kiểm tra kết quả thực tế bằng Open Graph Checker.

Mẹo thiết kế ảnh xem trước

• Chữ ngắn, chữ to. Trên điện thoại, ảnh xem trước thường chỉ hiển thị khoảng 500 px hoặc nhỏ hơn. Nên đặt tiêu đề khoảng 4–10 từ. Khi tiêu đề quá dài, công cụ sẽ cảnh báo bạn.
• Đừng lặp lại thanh địa chỉ. Nền tảng đã hiển thị tên miền và tiêu đề trang bên dưới ảnh, vì vậy hãy dùng ảnh để tạo điểm nhấn, đừng nhồi cả tiêu đề lẫn mô tả đầy đủ.
• Độ tương phản cao. Dùng thanh điều chỉnh độ tối cho ảnh nền để chữ trắng vẫn rõ, và kiểm tra trên cả giao diện sáng lẫn tối của ứng dụng.
• Mỗi trang một ảnh. Ảnh OG riêng cho các trang quan trọng như bài viết, trang sản phẩm hay tài liệu sẽ thu hút chú ý rõ rệt hơn so với một logo dùng chung cho cả website.
• Làm mới bộ nhớ đệm. Nền tảng lưu đệm ảnh xem trước. Sau khi đổi ảnh, hãy quét lại URL trong Sharing Debugger của Facebook hoặc Post Inspector của LinkedIn, hoặc đổi tên file mới.

Trên Webflow, bạn đặt ảnh cho từng trang trong Page settings → Open Graph settings, hoặc liên kết với trường ảnh nếu là trang từ CMS collection.

Cũng được tìm dưới tên: ảnh og, open graph image, tạo ảnh og, ảnh chia sẻ mạng xã hội, twitter card image, kích thước ảnh og 1200x630, ảnh xem trước liên kết, thẻ meta og:image.

Các công cụ dùng kèm tốt với Trình Tạo Ảnh OG

• Code sang ảnh — Dán một đoạn code và nhận ngay ảnh chụp code đẹp mắt chỉ trong vài giây: tô màu cú pháp cho JavaScript, TypeScript, Python, CSS, HTML, JSON, SQL, Bash, Go và PHP, nhiều theme để chọn, khung cửa sổ có tên file, nền gradient hoặc trong suốt, khoảng đệm và số dòng.
• Xem trước SERP — Viết thẻ title và meta description, rồi xem chính xác Google có thể cắt chúng ở đâu.
• Đổi kích thước ảnh — Đổi ảnh về đúng kích thước pixel hoặc theo phần trăm, cắt ảnh theo kích thước mạng xã hội, hoặc đưa ảnh vừa khung kèm màu nền.
• Nén ảnh — Giảm dung lượng ảnh và đồ họa đến 90% mà gần như không thấy mất chất lượng, tùy thuộc vào ảnh và cài đặt.