Công cụ tạo thẻ Meta Open Graph

Thẻ Open Graph là những đoạn HTML nhỏ quyết định trang của bạn trông như thế nào khi ai đó chia sẻ nó trên Facebook, LinkedIn, Slack, Discord hoặc X (Twitter). Điền tiêu đề, mô tả, URL, hình ảnh và một vài tùy chọn bên dưới, xem bản xem trước thẻ chia sẻ cập nhật ngay lập tức, rồi sao chép các thẻ <meta> được tạo ra vào thẳng phần <head> của trang. Mọi thứ diễn ra ngay trong trình duyệt của bạn — không có gì được gửi lên máy chủ.

Công Cụ Này Là Gì?

Open Graph là một giao thức, ban đầu do Facebook tạo ra, cho phép bất kỳ trang web nào tự mô tả bản thân thông qua một tập hợp nhỏ các thẻ <meta property="og:..."> được đặt trong <head> của HTML. Khi ai đó dán liên kết của bạn vào một ứng dụng mạng xã hội, ứng dụng trò chuyện hoặc công cụ nhắn tin, ứng dụng đó sẽ đọc các thẻ này để dựng nên thẻ xem trước — tiêu đề, mô tả và hình thu nhỏ — thay vì phải đoán từ nội dung trang.

Twitter (X) sử dụng một bộ thẻ liên quan nhưng riêng biệt, <meta name="twitter:...">, để kiểm soát cụ thể cách một liên kết được xem trước trên nền tảng của họ. Hầu hết các trang web đều thiết lập cả hai: thẻ Open Graph để tương thích rộng rãi, và thẻ Twitter Card để tinh chỉnh bản xem trước trên X (ví dụ chọn thẻ hình ảnh lớn thay vì thẻ tóm tắt nhỏ).

Nếu thiếu các thẻ này, liên kết được chia sẻ hoặc không hiển thị bản xem trước nào, hoặc nền tảng sẽ cố đoán tiêu đề và hình ảnh từ nội dung thô của trang — thường chọn nhầm tiêu đề, một hình ảnh ngẫu nhiên trong bài, hoặc không có gì cả. Việc thiết lập rõ ràng og:title, og:description và og:image giúp bạn hoàn toàn kiểm soát cách nội dung được hiển thị trước khi ai đó nhấp vào.

Tại Sao Nên Dùng?

Xem trước trực tiếp — thấy chính xác thẻ chia sẻ sẽ trông như thế nào ngay khi bạn nhập, trước khi xuất bản bất cứ điều gì.
Tạo cả thẻ Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name) và thẻ Twitter Card cùng một lúc.
Bao quát các trường mà các nền tảng thực sự đọc: tiêu đề, mô tả, URL chuẩn, hình ảnh, tên trang web, loại nội dung và kiểu thẻ Twitter.
Chạy hoàn toàn phía trình duyệt — tiêu đề, mô tả và URL của bạn không bao giờ rời khỏi trình duyệt.
Miễn phí, không cần đăng nhập, không giới hạn — sao chép kết quả và dán vào HTML của bạn.

Cách Sử Dụng

Nhập tiêu đề trang của bạn và một mô tả ngắn (tiêu đề nên dưới ~60 ký tự, mô tả khoảng 155–160 ký tự).
Nhập URL chuẩn của trang và URL tuyệt đối của hình ảnh xem trước (URL hình ảnh phải đầy đủ, ví dụ https://example.com/hinh-anh.jpg, không phải đường dẫn tương đối).
Tùy chọn thiết lập tên trang web, chọn og:type (website, article, product, profile, video, music), và chọn loại Twitter Card (summary hoặc summary_large_image).
Kiểm tra thẻ xem trước trực tiếp để xác nhận tiêu đề, mô tả và hình ảnh phối hợp tốt với nhau.
Nhấp "Sao chép" và dán các thẻ <meta> được tạo vào phần <head> của trang, ngay trước thẻ đóng </head>.

Ví dụ

Đầu vào

Tiêu đề: "10 công cụ dành cho lập trình viên miễn phí bạn sẽ thực sự dùng"
Mô tả: "Danh sách chọn lọc các công cụ chạy trên trình duyệt cho JSON, regex, UUID và hơn thế nữa — không cần cài đặt."
URL: https://example.com/blog/dev-tools
Hình ảnh: https://example.com/images/dev-tools-cover.jpg

Đầu ra

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

Chỉ những trường bạn điền mới xuất hiện trong kết quả — để trống tên trang web sẽ đơn giản khiến og:site_name bị bỏ qua trong đầu ra.

Những lỗi thường gặp cần tránh

Hoàn toàn không thiết lập og:image — nếu thiếu, hầu hết các nền tảng sẽ không hiển thị hình ảnh xem trước hoặc lấy ngẫu nhiên một hình ảnh từ trang, thường trông lỗi hoặc thiếu chuyên nghiệp.
Dùng đường dẫn hình ảnh tương đối như /images/cover.jpg thay vì URL đầy đủ như https://example.com/images/cover.jpg — trình thu thập dữ liệu mạng xã hội thường không xử lý được đường dẫn tương đối.
Sai tỷ lệ khung hình ảnh — hình vuông hoặc hình dọc sẽ bị cắt xén khó coi khi nền tảng ép vào khung ngang 1,91:1; luôn thiết kế hình ảnh chia sẻ gần với kích thước 1200×630.
Tiêu đề hoặc mô tả bị cắt ngắn — giữ og:title dưới ~60 ký tự và og:description dưới ~155–160 ký tự để không bị cắt bằng dấu ba chấm trên hầu hết các nền tảng.
Quên cập nhật bản xem trước đã lưu bộ nhớ đệm — sau khi thay đổi thẻ og trên một trang đã hoạt động, bản xem trước cũ có thể vẫn còn trong bộ nhớ đệm của Facebook hoặc LinkedIn cho đến khi bạn buộc thu thập lại thủ công bằng công cụ gỡ lỗi của họ.

Từng thẻ được dùng ở đâu

og:title, og:description và og:image là ba thẻ mà gần như mọi nền tảng đều đọc để dựng bản xem trước. og:url cho trình thu thập dữ liệu biết liên kết chuẩn nào nên được liên kết với bản xem trước, điều này quan trọng nếu cùng một nội dung có thể truy cập qua nhiều URL. og:site_name hiển thị một nhãn nhỏ (như tên đơn vị xuất bản hoặc thương hiệu) phía trên tiêu đề trên một số nền tảng, chẳng hạn như Facebook.

og:type thay đổi loại đối tượng mà trang đại diện đối với các trình thu thập dữ liệu hỗ trợ mô hình đối tượng phong phú hơn của Open Graph — ví dụ, article kích hoạt og:article:published_time và og:article:author trên các nền tảng đọc chúng, mặc dù hầu hết các bản xem trước mạng xã hội bỏ qua các trường bổ sung này và chỉ dùng bộ ba cốt lõi tiêu đề/mô tả/hình ảnh.

twitter:card kiểm soát bố cục cụ thể trên X: summary hiển thị một hình thu nhỏ vuông nhỏ bên cạnh văn bản, trong khi summary_large_image hiển thị một hình ảnh rộng toàn phần phía trên văn bản — lựa chọn thứ hai gần như luôn tốt hơn cho nội dung có hình ảnh bìa ý nghĩa.

Câu Hỏi Thường Gặp

og:image nên có kích thước bao nhiêu?

1200×630px là kích thước được khuyến nghị — đủ lớn cho màn hình mật độ điểm ảnh cao và gần với tỷ lệ khung hình khoảng 1,91:1 mà Facebook, LinkedIn và X cắt xén theo. Giữ tệp dưới 5–8MB, dùng JPG hoặc PNG, và đảm bảo URL hình ảnh là URL tuyệt đối đầy đủ, không phải đường dẫn tương đối — hầu hết các trình thu thập dữ liệu không thể xử lý đúng đường dẫn hình ảnh tương đối.

Tại sao bản xem trước của tôi không hiện ra khi chia sẻ liên kết?

Những nguyên nhân phổ biến nhất là: thiếu og:image, URL hình ảnh là đường dẫn tương đối thay vì tuyệt đối, trình thu thập dữ liệu bị chặn bởi robots.txt, hoặc nền tảng đang hiển thị phiên bản đã lưu bộ nhớ đệm của một bản xem trước cũ. Cả Facebook và LinkedIn đều lưu bộ nhớ đệm bản xem trước rất mạnh — hãy dùng Sharing Debugger của Facebook hoặc Post Inspector của LinkedIn để buộc thu thập lại sau khi bạn cập nhật thẻ.

Sự khác biệt giữa thẻ og: và twitter: là gì?

Thẻ og: (og:title, og:description, og:image, v.v.) thuộc chuẩn Open Graph, được Facebook, LinkedIn, Slack, Discord, WhatsApp và hầu hết các nền tảng khác đọc. Thẻ twitter: là định dạng riêng của Twitter/X. Nếu thiếu twitter:title hoặc twitter:image, X sẽ tự động dùng thẻ og: tương ứng — nhưng thiết lập rõ ràng cả hai giúp bạn kiểm soát tốt hơn, bao gồm việc chọn summary_large_image để có hình ảnh xem trước lớn.

Tôi nên dùng og:type nào?

"website" là lựa chọn mặc định an toàn cho hầu hết các trang, bao gồm trang chủ và nội dung chung. Dùng "article" cho bài blog và tin tức (nó mở khóa các thẻ bổ sung dành riêng cho bài viết như thời gian xuất bản), "product" cho trang thương mại điện tử, và "profile" cho trang hồ sơ cá nhân hoặc người dùng. Loại này chủ yếu ảnh hưởng đến việc thuộc tính Open Graph bổ sung nào hợp lệ, chứ không ảnh hưởng đến giao diện cơ bản của thẻ xem trước.

Công cụ này có lưu trữ hoặc gửi dữ liệu của tôi đi đâu không?

Không. Toàn bộ quá trình tạo diễn ra cục bộ trong trình duyệt của bạn bằng JavaScript thuần túy. Không có gì bạn nhập được truyền đi, ghi lại hoặc lưu trữ — đóng tab là mọi thứ được xóa sạch.