Trình tạo hình ảnh OG - Trình tạo hình ảnh chia sẻ xã hội

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

Chọn nền — một màu phẳng, một gradient tuyến tính hai điểm được tạo 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 mà CSS Background-size: cover sẽ làm, thay vì bị kéo dài ra khỏi tỷ lệ. Nhập tiêu đề và phụ đề tùy chọn: cả hai đều được đo theo từng ký tự theo số liệu phông chữ riêng của khung vẽ, do đó, dòng tiêu đề quá dài để vừa trên một dòng sẽ quấn vào dòng thứ hai hoặc thứ ba ở ranh giới từ thực thay vì tràn ra khỏi mép hoặc bị cắt bớt một cách vô hình. Chọn căn giữa hoặc căn trái, chọn màu văn bản phù hợp với nền của bạn và thả logo tùy chọn vào góc ở kích thước cố định, dễ đọc.

Bên dưới khung vẽ, bốn thẻ nhỏ gần giống với hình ảnh hoàn thiện sau khi nền tảng thực bao bọc nó trong chrome của chính nó: thẻ của Twitter/X chỉ hiển thị miền và tiêu đề in đậm bên dưới hình ảnh mà không có dòng mô tả, Facebook thêm một dải miền viết hoa phía trên khối tiêu đề và mô tả, LinkedIn đặt miền bên dưới tiêu đề mà không có mô tả nào cả, và tính năng nhúng của Discord đặt miền, tiêu đề và mô tả phía trên hình ảnh trong chủ đề tối của riêng nó. Đây là những giá trị gần đúng được tạo kiểu cho mục đích lập kế hoạch — được gắn nhãn rõ ràng là minh họa, với dòng miền bạn tự nhập — không phải là tìm nạp trực tiếp hoặc ảnh chụp màn hình của các nền tảng thực tế, vì việc chia sẻ liên kết và cho phép trình thu thập thông tin của riêng mỗi nền tảng đọc thẻ meta og:image và og:title thực của trang của bạn là những gì thực sự tạo ra thẻ trực tiếp.

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