Trình tạo Open Graph — thẻ OG và Twitter Card kèm xem trước
Lập trìnhTrình tạo Open Graph dựng các thẻ meta og:* và twitter:* mà các nền tảng mạng xã hội đọc để hiển thị thẻ chia sẻ liên kết, từ tiêu đề, mô tả, URL và hình ảnh.
Trang này được dịch với sự hỗ trợ của AI và chưa được chuyên gia rà soát. Hãy kiểm tra các nguồn trích dẫn trước khi dùng cho quyết định quan trọng.
Giới thiệu
Open Graph là giao thức thẻ meta mà Facebook, Slack, KakaoTalk và các dịch vụ tương tự đọc khi vẽ thẻ xem trước liên kết (tiêu đề, mô tả, hình ảnh), còn Twitter Card là phần mở rộng riêng cho X. Công cụ này tạo các thẻ og:title, og:description, og:url, og:image, og:site_name và twitter:card, đồng thời hiển thị bản xem trước thẻ chia sẻ từ dữ liệu bạn nhập. Kết quả hiển thị thực tế vẫn có thể khác nhau tùy theo bộ nhớ đệm và chính sách của từng nền tảng.
Cách dùng
- 1Nhập tiêu đề thẻ, mô tả, URL trang và URL hình ảnh.
- 2Chọn og:type và định dạng Twitter Card.
- 3Tạo, sao chép các thẻ vào <head>, rồi kiểm tra bằng công cụ kiểm tra Open Graph.
Tham khảo
| Thẻ | Bắt buộc | Ghi chú |
|---|---|---|
| og:title | bắt buộc | tiêu đề của thẻ chia sẻ |
| og:type | bắt buộc | loại nội dung (website, article, ...) |
| og:image | bắt buộc | hình ảnh thẻ — khuyến nghị 1200×630px (1.91:1) |
| og:url | bắt buộc | URL canonical của trang |
| twitter:card | khuyến nghị | định dạng thẻ của X (summary, summary_large_image) |
Nguồn và tiêu chuẩn
- The Open Graph protocol - Open Graph protocol
- About X Cards - X Developer Platform
Câu hỏi thường gặp
Dữ liệu nhập hoặc URL hình ảnh của tôi có được gửi đến máy chủ không?
Không. Việc tạo thẻ và xem trước thẻ chạy trong trình duyệt của bạn. Hình ảnh xem trước được trình duyệt của bạn tải trực tiếp từ URL bạn nhập và không bao giờ đi qua dịch vụ này.
Kích thước og:image được khuyến nghị là bao nhiêu?
1200×630 pixel (tỷ lệ 1.91:1) là khuyến nghị được dùng phổ biến nhất; hình ảnh nên có ít nhất 600×315 pixel để hiển thị thẻ lớn trên hầu hết các nền tảng.
Tôi có còn cần thẻ Twitter Card nếu đã có thẻ OG không?
X dùng lại các thẻ Open Graph khi thiếu thẻ twitter:*, nhưng đặt twitter:card một cách rõ ràng là cách an toàn để kiểm soát định dạng thẻ.