Tạo ảnh Open Graph online

Tạo ảnh xem trước Open Graph / Twitter (PNG hoặc JPEG 1200×630) từ tiêu đề, phụ đề và tên website, chữ tiếng Việt chuẩn, nhiều giao diện.

Kết quả

Bấm “Chạy” để xem kết quả.

API ảnh OG vẽ hình ảnh hiển thị khi một liên kết được chia sẻ lên Facebook, Zalo, X, LinkedIn hay Slack. Đưa vào title, subtitle tuỳ chọn, nhãn nhỏ tag (“Mới”, “Blog”…) và tên site; API dàn trang trên khung 1200×630 có dải màu và trả về ảnh PNG (hoặc JPEG). Tiêu đề lấy cỡ chữ lớn nhất vừa trong bốn dòng, tiêu đề quá dài kết thúc bằng dấu ba chấm.

Chữ được vẽ bằng font Be Vietnam Pro, thiết kế cho tiếng Việt, nên các dấu chồng (ặ, ễ, ỗ) nằm đúng vị trí, điều mà nhiều dịch vụ tạo ảnh thông thường làm sai. Chọn theme (light, dark, brand), hoặc tự đặt background, background2 (chuyển màu), color và accent, align=center và size: og (1200×630), twitter (1200×675), linkedin, square (1080×1080) hoặc story (1080×1920).

Có thể dùng thẳng URL trong <meta property="og:image">: ảnh được cache một ngày nên mạng xã hội chỉ tải một lần.

Dùng trong code của bạn

curl "https://apibox.io.vn/v1/og-image?title=Bộ API cho lập trình viên Việt Nam&subtitle=VietQR, tỉnh thành, lịch âm&site=apibox.io.vn&tag=Mới" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -o output

const res = await fetch('https://apibox.io.vn/v1/og-image?title=Bộ API cho lập trình viên Việt Nam&subtitle=VietQR, tỉnh thành, lịch âm&site=apibox.io.vn&tag=Mới', {
  method: 'GET',
  headers: {
    Authorization: 'Bearer YOUR_API_KEY',
  },
});
const blob = await res.blob();

import requests

res = requests.get(
    "https://apibox.io.vn/v1/og-image?title=Bộ API cho lập trình viên Việt Nam&subtitle=VietQR, tỉnh thành, lịch âm&site=apibox.io.vn&tag=Mới",
    headers={"Authorization": "Bearer YOUR_API_KEY"},
    timeout=30,
)
open("output", "wb").write(res.content)

<?php
$ch = curl_init('https://apibox.io.vn/v1/og-image?title=Bộ API cho lập trình viên Việt Nam&subtitle=VietQR, tỉnh thành, lịch âm&site=apibox.io.vn&tag=Mới');
curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HTTPHEADER => ['Authorization: Bearer YOUR_API_KEY'],
]);
$response = curl_exec($ch);
file_put_contents('output', $response);

Tài liệu API → Nhận API key miễn phí

Hỏi đáp

Dùng trong trang web thế nào?

Đặt URL của API kèm tham số vào <meta property="og:image" content="…">, hoặc tạo ảnh một lần rồi lưu lại.

Có thêm logo được không?

Chưa; hãy dùng tên website và màu nhấn làm dòng thương hiệu.

Vì sao là PNG mà không phải SVG?

Mạng xã hội chỉ nhận ảnh bitmap (PNG, JPEG) cho ảnh xem trước.