Trình tạo thẻ meta Open Graph

Những thẻ dùng để tạo bản xem trước liên kết

Khi ai đó dán liên kết của bạn vào một bài đăng hoặc một tin nhắn, ứng dụng sẽ gửi một trình thu thập dữ liệu đến trang và đọc một số thẻ <meta> trong <head>. Những thẻ đó đến từ giao thức Open Graph, trong đó liệt kê bốn thẻ bắt buộc:

• og:title: tiêu đề hiển thị trong bản xem trước.
• og:type: trang này là gì. website phù hợp với hầu hết các trang và article phù hợp với một bài blog. Giao thức cũng định nghĩa các loại như profile, book, video.movie và music.song.
• og:image: URL của hình ảnh đại diện cho trang.
• og:url: URL chuẩn, mà giao thức gọi là ID vĩnh viễn của đối tượng.

Giao thức cũng định nghĩa các thẻ tùy chọn, và trình tạo sẽ ghi những thẻ hữu ích: og:description, og:site_name, cùng chi tiết hình ảnh og:image:width, og:image:height và og:image:alt. Về văn bản thay thế, giao thức nói thẳng: nếu một trang chỉ định og:image thì nên chỉ định og:image:alt, và văn bản đó mô tả nội dung có trong hình ảnh, không phải chú thích.

Điều X bổ sung: twitter:card

X cũng đọc Open Graph. tài liệu tham khảo về markup cho thẻ của X (tài liệu dành cho nhà phát triển của X, được liên kết ở đây qua Internet Archive vì trang gốc giờ chuyển hướng) liệt kê phương án dự phòng cho mỗi thẻ: twitter:title dự phòng bằng og:title, twitter:description bằng og:description, twitter:image bằng og:image và twitter:image:alt bằng og:image:alt. Vậy nên thẻ duy nhất đáng thêm là twitter:card, thẻ chọn bố cục. Nếu bỏ đi, chính tài liệu đó nói X có thể dự phòng về thẻ tóm tắt nhỏ, ngay cả khi bạn muốn thẻ lớn:

• summary_large_image: một hình ảnh rộng toàn bộ phía trên tiêu đề. trang về thẻ hình ảnh lớn của X cho biết hình ảnh hỗ trợ tỷ lệ 2:1, với kích thước tối thiểu 300 × 157 và tối đa 4096 × 4096 pixel, dưới 5MB, ở định dạng JPG, PNG, WEBP hoặc GIF. Không hỗ trợ SVG.
• summary: một thẻ nhỏ hơn với hình ảnh vuông. trang về thẻ tóm tắt của X cho biết hình ảnh hỗ trợ tỷ lệ 1:1, từ 144 × 144 đến 4096 × 4096 pixel, và bị cắt thành hình vuông trên mọi nền tảng.

Cùng tài liệu tham khảo đó liệt kê thẻ app và player, vốn cần thêm các trường về App Store hoặc trình phát video, nên ở đây không đề cập. Nó cũng nêu các giới hạn mà những kiểm tra bên trên áp dụng: 70 ký tự cho tiêu đề, 200 cho mô tả và 420 cho văn bản thay thế.

Kích thước ảnh mà các nền tảng quy định

• LinkedIn: hướng dẫn làm cho một website có thể chia sẻ được yêu cầu og:title, og:image, og:description và og:url, đồng thời nêu kích thước tệp tối đa 5 MB, tối thiểu 1200 × 627 pixel và tỷ lệ khuyến nghị 1.91:1.
• Meta: các phương pháp chia sẻ tốt nhất khuyên dùng ảnh rộng ít nhất 1080 pixel cho màn hình độ phân giải cao, và rộng ít nhất 600 pixel để hiển thị quảng cáo liên kết dạng ảnh. Cùng trang đó yêu cầu og:image:width và og:image:height để trình thu thập có thể hiển thị ảnh ngay mà không phải tải về và xử lý trước.

Ảnh 1200 × 630 đáp ứng tất cả: đạt tối thiểu 1200 × 627 cho LinkedIn, rộng hơn 1080 cho Meta, và tỷ lệ 1.905:1, nằm trong khoảng 5% so với tỷ lệ 2:1 của X.

Kiểm tra và làm mới các bản xem trước cũ

Các ứng dụng lưu đệm nội dung chúng đã thu thập, nên sửa thẻ không sửa được bản xem trước đã lưu từ trước. Cả hai mạng xã hội lớn đều cung cấp công cụ cho việc này:

• Sharing Debugger của Meta hiển thị các thẻ mà trình thu thập của nó quét được, kèm mọi lỗi hoặc cảnh báo, và kích hoạt một lần quét mới. Hướng dẫn cho quản trị web của Meta mô tả công cụ này, và trang phương pháp tốt nhất lưu ý rằng nếu không, nội dung đã quét sẽ cập nhật theo chu kỳ tiêu chuẩn 24 giờ.
• Post Inspector của LinkedIn làm mới một URL đã lưu đệm. Trang trợ giúp của LinkedIn lưu ý rằng việc làm mới chỉ ảnh hưởng đến bài đăng mới: những bài đã chứa URL vẫn giữ bản xem trước cũ.

Công cụ này không làm gì

Nó không tải trang hay ảnh của bạn, nên không thể thấy nội dung thực tế đang hoạt động, và bản xem trước bên trên là phác thảo bằng chữ chứ không phải kết xuất thật. Nó viết ra các thẻ; website của bạn vẫn phải phục vụ chúng trong <head> của trang, trong mã HTML mà trình thu thập nhận được. Các thẻ do JavaScript thêm vào sau có thể không bao giờ được nhìn thấy. Và nó không viết thẻ app hay player, cũng không viết các thuộc tính bổ sung mà những kiểu như book hoặc video.movie định nghĩa.

Nếu bạn không muốn viết thủ công phần này

Hermoso là marketing tự động: nó nghiên cứu những quảng cáo đang hiệu quả trong thị trường của bạn, tạo quảng cáo hình ảnh và video đúng thương hiệu, lên lịch đăng bài và chạy chiến dịch trả phí trên tài khoản quảng cáo của chính bạn. Nó hoạt động trong ứng dụng web, hoặc bên trong Claude, ChatGPT và Cursor thông qua máy chủ MCP.

Công cụ miễn phí: Trình tạo liên kết UTM · Trình tạo mã QR · Hướng dẫn kích thước mạng xã hội

Câu hỏi thường gặp

Những thẻ Open Graph nào là bắt buộc?

Giao thức Open Graph liệt kê bốn thuộc tính bắt buộc: og:title, og:type, og:image và og:url. Các thẻ og:description, og:site_name cùng chiều rộng, chiều cao và alt của og:image là tùy chọn nhưng nên thêm vào.

Tôi có cần twitter:title và twitter:image nếu đã có các thẻ og: không?

Không. Tài liệu tham khảo về cards của X cho biết twitter:title, twitter:description, twitter:image và twitter:image:alt sẽ tự lấy từ các thẻ og: tương ứng. Thẻ đáng thêm là twitter:card, dùng để chọn bố cục card.

Ảnh Open Graph nên có kích thước bao nhiêu?

LinkedIn yêu cầu tối thiểu 1200 × 627 pixel ở tỷ lệ 1.91:1 và dưới 5 MB. Meta đề nghị rộng tối thiểu 1080 pixel. Card ảnh lớn của X hỗ trợ tỷ lệ 2:1 từ 300 × 157 đến 4096 × 4096. Một ảnh 1200 × 630 phù hợp với cả ba.

Vì sao liên kết của tôi vẫn hiển thị ảnh cũ sau khi tôi đã đổi thẻ?

Ứng dụng đã lưu cache bản quét cũ. Hãy chạy URL qua Sharing Debugger của Meta hoặc Post Inspector của LinkedIn để lấy lại. LinkedIn lưu ý rằng các bài đã chia sẻ URL đó vẫn giữ bản xem trước cũ.

Vì sao dấu ngoặc kép và dấu và bị đổi trong kết quả?

Chúng được escape HTML để thẻ vẫn hợp lệ. Một tiêu đề như Tom & Jerry's "Sale" sẽ thành Tom & Jerry's "Sale" bên trong thuộc tính content, và trình duyệt cùng trình thu thập dữ liệu đọc lại thành văn bản gốc.

Công cụ có tải ảnh của tôi không?

Không. Mọi thứ bạn nhập đều không được gửi đi đâu và URL ảnh không bao giờ được tải về, đó là lý do bản xem trước hiển thị ảnh giữ chỗ thay vì ảnh thật.