Soạn thẻ Open Graph và Twitter Card với bản xem trước mạng xã hội trực tiếp.
Cập nhật lần cuối
Coddy dạy bạn bằng cách viết code thật ngay trên trình duyệt: bài học tương tác, phản hồi tức thì và AI hỗ trợ khi bạn bị kẹt.
Khi bạn chia sẻ một link trong bất kỳ ứng dụng hiện đại nào (một bài đăng, tin nhắn riêng, một kênh Slack), nền tảng đó sẽ tải URL và lấy ra một ít metadata để hiển thị *thẻ chia sẻ*: tiêu đề, mô tả, hình ảnh và tên trang web. Metadata này không lấy từ nội dung hiển thị trên trang mà từ một nhóm thẻ <meta> cụ thể trong <head>. Giao thức Open Graph, do Facebook tạo ra năm 2010, định nghĩa phần lớn các thẻ này. X (trước đây là Twitter) bổ sung vài thẻ riêng với tiền tố twitter:. LinkedIn, Discord, Slack, iMessage, WhatsApp và Pinterest đều đọc cùng các thẻ đó với chút khác biệt nhỏ.
Làm đúng các thẻ này chỉ cần một lần cho mỗi trang, nhưng tác động thì rất lớn. Trang không có hình Open Graph trông như bị lỗi khi được chia sẻ. Tiêu đề quá dài bị cắt giữa chừng. Ảnh og:image sai tỷ lệ bị mọi nền tảng thêm viền đen. Công cụ này giúp bạn tinh chỉnh các giá trị với bản xem trước trực tiếp, để thấy lỗi bị cắt chữ hay cắt ảnh *trước khi* đưa trang lên.
Mọi thứ chạy ngay trên máy bạn. Dữ liệu biểu mẫu, bản xem trước và HTML được tạo ra không bao giờ rời khỏi trình duyệt, nên bạn có thể dán URL chưa ra mắt hay nội dung chưa công bố mà không lo bị lộ.
property (<meta property="og:title">), còn thẻ SEO tiêu chuẩn và thẻ Twitter Card dùng name (<meta name="description">, <meta name="twitter:card">).title, meta description), Open Graph (og:title, og:description) và Twitter (twitter:title, twitter:description).og:image nên có kích thước 1200×630, được phục vụ qua HTTPS và dùng URL tuyệt đối: đường dẫn tương đối sẽ hỏng khi máy chủ khác tải trang.twitter:card của X quyết định bố cục: summary là ảnh thu nhỏ hình vuông, summary_large_image là banner tràn chiều rộng mà hầu hết thương hiệu muốn.Nhắm khoảng từ 50 đến 60 ký tự. Facebook cắt ở khoảng 95 ký tự và X ở khoảng 70. Mở đầu bằng giá trị, không phải tên thương hiệu: "Cách deploy với Cloudflare Workers" tốt hơn "Blog Coddy · Hướng dẫn triển khai".
Nhắm khoảng từ 120 đến 155 ký tự. Phần lớn nền tảng cắt ở khoảng 200. Hãy viết câu hoàn chỉnh: mô tả xuất hiện dưới tiêu đề trong mọi thẻ, và những mẩu câu bị cắt trông như chưa viết xong.
Dùng URL https:// tuyệt đối của chính trang đó, không phải link theo dõi hay link chuyển hướng. Trình thu thập Open Graph dựa vào og:url để gộp các lượt chia sẻ trùng nhau, nên URL chính tắc giúp số lượt chia sẻ và bản xem trước luôn nhất quán.
1200×630 là kích thước lý tưởng cho thẻ summary_large_image trên X và thẻ tiêu chuẩn trên Facebook và LinkedIn. Dùng PNG hoặc JPEG, dưới khoảng 5 MB. Luôn dùng URL tuyệt đối: đường dẫn tương đối sẽ hỏng vì trình thu thập của mạng xã hội truy cập URL từ máy chủ của chính nó.
Dán khối trong khung **Thẻ <head> được tạo** vào <head> của trang. Sau khi triển khai, kiểm tra bằng công cụ gỡ lỗi của từng nền tảng (Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector) và buộc thu thập lại nếu sau này bạn đổi hình ảnh.
Các thẻ dưới đây bao quát mọi thứ mà các nền tảng mạng xã hội đọc hiện nay. Thẻ có property= thuộc giao thức Open Graph; thẻ có name= là biến thể SEO tiêu chuẩn hoặc Twitter Card. Đặc tả tham khảo: Open Graph, X Cards.
| Thẻ | Được dùng bởi | Khuyến nghị | Ghi chú |
|---|---|---|---|
og:title | FB, LinkedIn, Slack, Discord | 50 đến 60 ký tự | Dùng <title> thay thế nếu thiếu, nhưng vẫn nên đặt. |
og:description | FB, LinkedIn, Slack, Discord | 120 đến 155 ký tự | Dùng meta description thay thế nếu thiếu. |
og:image | Mọi nền tảng | 1200×630, < 5 MB, HTTPS, URL tuyệt đối | Bắt buộc là URL tuyệt đối, đường dẫn tương đối sẽ hỏng. |
og:image:alt | Khả năng tiếp cận | Mô tả hình ảnh | Được trình đọc màn hình và một số nền tảng sử dụng. |
og:url | FB, LinkedIn | URL https:// chính tắc | Dùng để gộp lượt chia sẻ từ các biến thể query string khác nhau. |
og:type | FB, LinkedIn | website hoặc article | article mở khóa article:published_time, article:author. |
og:site_name | FB, Discord | Tên thương hiệu | Hiển thị thành dòng ghi nguồn nhỏ phía trên hoặc phía dưới thẻ. |
twitter:card | X | summary_large_image | summary cho ảnh thu nhỏ hình vuông, summary_large_image cho bố cục banner. |
twitter:title | X | Giống og:title | X dùng og:title thay thế nếu thiếu, nên đặt cả hai cho chắc. |
twitter:description | X | Giống og:description | Dùng og:description thay thế nếu thiếu. |
twitter:image | X | Giống og:image | Dùng og:image thay thế nếu thiếu. |
twitter:site | X | @yourbrand | Tài khoản X của bên xuất bản, dùng cho một số số liệu phân tích. |
Đặt **og:type** thành article, thêm **Tác giả** và **Thời gian đăng** trong phần dành riêng cho bài viết, và dùng ảnh bìa 1200×630. Bản xem trước sẽ cập nhật để cho thấy thẻ trông thế nào trên từng nền tảng.
og:type=article mở khóa các thẻ riêng cho bài viết (article:published_time, article:author) mà một số nền tảng (Discord, LinkedIn) dùng để hiển thị tác giả. Twitter bỏ qua chúng nhưng cũng không báo lỗi.
Giữ **og:type** là website. Dùng tên sản phẩm làm tiêu đề, một câu nêu giá trị cốt lõi làm mô tả, và ảnh hero hoặc ảnh chụp màn hình đã cắt làm hình ảnh.
Landing page không cần metadata của bài viết. Thành phần được nhấn nhiều nhất trên thẻ chia sẻ của một landing page thường là hình ảnh, vì vậy hãy đầu tư một ảnh 1200×630 thật gọn gàng.
Tiêu đề: "Concept - Section · Docs". Mô tả: một câu giải thích khái niệm. Hình ảnh: ảnh bìa chung cho tài liệu hoặc ảnh chụp màn hình giao diện liên quan.
Trang tài liệu thường được chia sẻ trong kênh Slack và chuỗi bài trên X. Một ảnh bìa tài liệu nhất quán giúp chúng dễ nhận ra giữa bảng tin dày đặc, ngay cả trước khi ai đó đọc tiêu đề.
og:image tương đối như /images/cover.png. Trình thu thập của mạng xã hội truy cập trang từ máy chủ *của họ*: đường dẫn tương đối sẽ trỏ vào tên miền của chính nền tảng đó và trả về 404. Luôn dùng URL https:// tuyệt đối.twitter:card. Thiếu thẻ này, X mặc định dùng thẻ tối giản không có hình. Thêm twitter:card=summary_large_image để có bố cục banner mà gần như thương hiệu nào cũng muốn.og:image:alt. Thẻ này không tốn gì, giúp người dùng trình đọc màn hình, và một vài nền tảng hiển thị nó làm văn bản alt trên thẻ chia sẻ.og:image.<meta>: tiêu đề, mô tả, hình ảnh, loại nội dung và một số thông tin khác. Ngày nay mọi nền tảng mạng xã hội và nhắn tin lớn đều đọc nó, nên nó trở thành chuẩn thực tế cho metadata của thẻ chia sẻ.og: tương ứng khi thiếu thẻ twitter: riêng, nên về mặt kỹ thuật chỉ cần Open Graph là đủ. Nhưng thêm twitter:card, twitter:site và twitter:creator giúp bạn kiểm soát kỹ hơn cách thẻ hiển thị trên X.1200×630 pixel (tỷ lệ 1,91:1) là kích thước an toàn nhất. Facebook, LinkedIn và X đều hiển thị tốt tỷ lệ này. Giữ tệp dưới khoảng 5 MB và phục vụ qua HTTPS tại một URL tuyệt đối: đường dẫn tương đối sẽ hỏng khi máy chủ khác tải trang của bạn.
<title> và meta description của bạn. Đôi khi Google có lấy og:image cho tìm kiếm hình ảnh và Discover, nhưng đó không phải tín hiệu xếp hạng.Có, hầu hết framework đều hỗ trợ ảnh Open Graph động. Next.js có OG Image Generation API, SvelteKit và Astro có cách làm tương tự. Hãy tạo ảnh khi có request và lưu cache thật kỹ, vì trình thu thập của mạng xã hội hết thời gian chờ rất nhanh.
