Trình tạo ảnh OG — Công cụ tạo ảnh chia sẻ mạng xã hội

Ảnh Open Graph là hình hiển thị khi một liên kết được dán vào đoạn chat, tweet hoặc kênh Slack — và mọi nền tảng hiển thị ảnh này đều mong đợi một khung hình khoảng 1200×630 pixel, kích thước mà các thẻ og:image của Facebook và summary_large_image của Twitter đều được thiết kế dựa trên đó. Sai kích thước, ảnh sẽ bị cắt, mờ hoặc méo; sai bố cục, tiêu đề sẽ hiện lên thành một vệt không đọc được trên tấm ảnh rối mắt. Công cụ này dựng ảnh ở đúng độ phân giải thực tế bằng Canvas 2D API, vì vậy những gì bạn thấy trong bản xem trước chính là lưới điểm ảnh thực sẽ có trong tệp PNG.

Chọn nền — một màu đồng nhất, dải chuyển sắc tuyến tính hai điểm dừng từ hai màu bạn chọn, hoặc một ảnh tải lên được cắt để lấp đầy toàn bộ khung 1200×630 giống như cách CSS background-size: cover hoạt động, thay vì bị kéo giãn sai tỉ lệ. Nhập tiêu đề và phụ đề tùy chọn: cả hai đều được đo từng ký tự dựa trên chính thông số font của canvas, nhờ đó dòng tiêu đề quá dài để vừa một dòng sẽ tự xuống dòng thứ hai hoặc thứ ba ở ranh giới từ thực, chứ không tràn ra mép hay bị cắt ngầm. Chọn căn giữa hoặc trái, chọn màu chữ dễ đọc trên nền và đặt logo tùy chọn vào góc với kích thước cố định, dễ nhìn.

Bên dưới canvas, bốn thẻ nhỏ mô phỏng gần đúng cách ảnh thành phẩm trông ra sao khi mỗi nền tảng thực bọc nó trong giao diện riêng: thẻ Twitter/X chỉ hiển thị tên miền và dòng tiêu đề đậm bên dưới ảnh, không có dòng mô tả; Facebook thêm một dải tên miền viết hoa phía trên khối tiêu đề và mô tả; LinkedIn đặt tên miền bên dưới tiêu đề, hoàn toàn không có mô tả; còn nhúng Discord đặt tên miền, tiêu đề và mô tả phía trên ảnh với giao diện tối của chính nó. Đây là những mô phỏng theo phong cách của từng nền tảng, dùng cho mục đích lên kế hoạch — được ghi chú rõ là chỉ mang tính minh họa, với dòng tên miền do bạn tự nhập — chứ không phải truy xuất trực tiếp hay chụp màn hình thực từ các nền tảng, vì việc chia sẻ liên kết và để trình thu thập của mỗi nền tảng đọc thẻ og:image và og:title thực trên trang của bạn mới là cách tạo ra thẻ trực tiếp thật sự.

Mọi thứ được dựng cục bộ trên một phần tử canvas HTML trong trình duyệt của bạn: tiêu đề, phụ đề, ảnh nền và logo tải lên không bao giờ rời khỏi thiết bị của bạn, và tệp xuất ra là một PNG sạch qua canvas.toBlob() chỉ chứa những gì bạn đã dựng — không có viền mô phỏng, thanh trình duyệt giả hay logo nền tảng nào bị dính vào ảnh tải về. Nếu sau đó bạn cần đổi kích thước hoặc chuyển đổi tệp PNG đã xuất, các công cụ đổi kích thước ảnh và chuyển đổi ảnh trên trang web này sẽ tiếp nối ngay từ khâu này.