Công cụ kiểm tra Twitter Card

Khi ai đó chia sẻ liên kết của bạn trên X (Twitter), nền tảng sẽ đọc các thẻ meta twitter: của trang để dựng thẻ xem trước: bố cục, tiêu đề, mô tả, hình ảnh và thông tin nguồn. Nếu thiếu các thẻ này, liên kết sẽ được đăng dưới dạng URL trần, không có thẻ. Dán HTML của trang vào bên dưới, và công cụ này kiểm tra xem ba thẻ bắt buộc, twitter:card, twitter:title và twitter:description, có mặt hay không, đồng thời hiển thị giá trị mà nó đọc được từ mỗi thẻ, để bạn sửa một bản xem trước bị hỏng trước khi đăng.

Cách kiểm tra thẻ của bạn

  1. 1

    Dán HTML của trang

    Bạn có thể dán riêng phần `<head>` hoặc toàn bộ tài liệu. Công cụ chỉ xem xét các thẻ `<meta>`, nên mọi mã khác đều bị bỏ qua.

  2. 2

    Công cụ tìm ba thẻ bắt buộc

    `twitter:card`, `twitter:title` và `twitter:description`, mức tối thiểu mà mọi loại thẻ đều cần. Các thẻ khác như `twitter:image` không được kiểm tra ở đây.

  3. 3

    Xem những gì được tìm thấy

    Mỗi thẻ khớp được liệt kê kèm giá trị đọc từ thuộc tính `content`, để bạn xem nhanh nội dung.

  4. 4

    Sửa những gì còn thiếu

    Bất kỳ thẻ nào trong ba thẻ bị thiếu đều được đánh dấu là thiếu. Thêm nó vào `<head>` và dán lại HTML để kiểm tra lần nữa.

Bốn loại thẻ của X (Twitter)

Bố cục do giá trị twitter:card quyết định. Công cụ này đọc giá trị bạn nhập; bốn loại mà X hỗ trợ là:

Loại thẻ Giá trị twitter:card Cách dùng điển hình
Tóm tắt summary Bài viết và trang nội dung thông thường
Tóm tắt kèm ảnh lớn summary_large_image Bài blog có ảnh nổi bật
Trình phát player Âm thanh hoặc video nhúng
Ứng dụng app Liên kết cài đặt ứng dụng kèm dữ liệu cửa hàng

Thẻ bắt buộc và thẻ nên có

Công cụ này chỉ kiểm tra nhóm đầu tiên, ba thẻ mà X cần cho mọi thẻ hiển thị.

Bắt buộc (được kiểm tra ở đây):

  • twitter:card, bố cục sẽ dùng
  • twitter:title, tiêu đề (X hiển thị khoảng 70 ký tự đầu)
  • twitter:description, phần tóm tắt (X hiển thị khoảng 200 ký tự đầu)

Nên có (không kiểm tra ở đây, nhưng nên thêm):

  • twitter:image, một URL tuyệt đối https:// tới tệp PNG, JPG hoặc GIF; tối thiểu 300 x 157 px cho thẻ tóm tắt và 800 x 418 px cho summary_large_image
  • twitter:site, @handle của thương hiệu bạn
  • twitter:creator, @handle của tác giả
  • twitter:image:alt, văn bản thay thế cho khả năng tiếp cận

Lỗi thường gặp

  • Chỉ có thẻ Open Graph. X sẽ chuyển sang dùng og:title, og:description và og:image, nên liên kết vẫn hiển thị, nhưng thiếu twitter:card thì bố cục mặc định là bản tóm tắt nhỏ. Hãy đưa vào cả hai bộ khi có thể.
  • Ảnh quá nhỏ. Dưới 300 x 157 px thẻ có thể thu lại chỉ còn văn bản.
  • URL ảnh tương đối. twitter:image phải là tuyệt đối (https://...); đường dẫn tương đối sẽ bị bỏ qua.
  • property= thay vì name=. X, và cả công cụ này, đọc thẻ Twitter từ name="twitter:...". Viết property="twitter:..." thì hợp lệ với Open Graph nhưng không dùng cho các thẻ này.
  • Mô tả quá dài. Vượt khoảng 200 ký tự, X sẽ cắt bớt, thường là giữa một từ.

Cách xem thẻ thật

X đã ngừng công cụ Card Validator chính thức (cards-dev.twitter.com/validator) vào năm 2023, nên không còn trang chính thức nào hiển thị bản xem trước trực tiếp. Công cụ này xác nhận các thẻ bắt buộc có mặt và đọc được; để xem thẻ thật, hãy chia sẻ liên kết trong bản nháp bài đăng hoặc trong tin nhắn trực tiếp gửi cho chính bạn, hoặc dùng một công cụ xem trước liên kết của bên thứ ba. Nếu sau khi sửa thẻ mà X vẫn hiển thị ảnh cũ, hãy thêm một chuỗi truy vấn như ?v=2 vào URL ảnh để vượt qua bộ nhớ đệm.

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

Không. Nó đọc HTML bạn dán và xác nhận ba thẻ twitter: bắt buộc có mặt, kèm giá trị của từng thẻ. Nó không vẽ thẻ và không tải trang trực tiếp của bạn. X đã đóng công cụ Card Validator của riêng họ vào năm 2023, nên cách đáng tin cậy để xem thẻ thật là chia sẻ liên kết trong bản nháp bài đăng hoặc trong tin nhắn trực tiếp gửi cho chính bạn.

X sẽ chuyển sang dùng og:title, og:description và og:image, nên liên kết vẫn hiển thị, nhưng thiếu twitter:card thì bố cục mặc định là bản tóm tắt nhỏ. Muốn có thẻ ảnh lớn, bạn phải đặt twitter:card thành summary_large_image một cách rõ ràng. Lưu ý công cụ này chỉ kiểm tra các thẻ twitter:, không kiểm tra các thẻ og: của bạn.

Nó tìm name="twitter:..." với thuộc tính content viết sau tên, trong dấu nháy đơn hoặc kép. Nếu thẻ của bạn dùng property="twitter:..." thay cho name=, hoặc đặt content trước name, mẫu sẽ không khớp dù HTML vẫn hợp lệ. Hãy sắp lại theo thứ tự name="..." content="..." rồi kiểm tra lại.

Công cụ này nhận diện tên bất kể chữ hoa hay chữ thường, nên twitter:Card cũng được phát hiện ở đây. Dù vậy, hãy viết thường (twitter:card), vì đó là dạng mà X ghi trong tài liệu và mong đợi.

Nói ngắn gọn: có. Việc kiểm tra chạy trên máy chủ của chúng tôi, nên HTML bạn dán được gửi tới đó, quét rồi loại bỏ. Chúng tôi chỉ lưu một ghi nhận ẩn danh rằng công cụ đã được dùng, không bao giờ lưu mã của bạn, và đây không phải công cụ ngoại tuyến chạy trong trình duyệt.

Công cụ liên quan

Bộ tạo tin nhắn văn bản giả mạo

Nhập cuộc trò chuyện của cả hai bên, xem trước các bong bóng chat và tải ảnh mô phỏng điện thoại dưới dạng PNG. Tin đã gửi màu xanh lá, tin nhận màu xám.

Tạo bộ ảnh Instagram giả mạo

Thiết kế các ảnh chụp màn hình bài đăng Instagram giả mạo với tên người dùng tùy chỉnh, chú thích, hình ảnh, biểu tượng xác thực và số lượt thích, dùng cho mục đích tạo mẫu thiết kế và bản thiết kế kịch bản.

Bộ tạo tweet giả

Tạo hình ảnh bài đăng giả trên Twitter hoặc X với tên người dùng tùy chỉnh, nội dung, phản hồi, lượt chia sẻ lại, lượt thích, dấu trang và màu huy hiệu xác minh.

Tổng hợp các bài đăng Facebook giả mạo

Tạo các ảnh chụp màn hình bài đăng giả trên Facebook một cách chân thực với hồ sơ tùy chỉnh, nội dung, thời điểm đăng, số lượng phản hồi và số bình luận.

Trình tạo ảnh chụp màn hình iMessage

Tạo hình ảnh chụp màn hình cuộc trò chuyện iMessage chân thực với các bong bóng màu xanh dương và xám, thời gian gửi tin nhắn, tên người liên hệ và thanh trạng thái của iOS.

Trình tạo hashtag Instagram

Chọn chủ đề, thêm từ khóa của riêng bạn và nhận hashtag Instagram được chia thành nhóm rộng, cụ thể và ngách, kèm một bộ 5 hashtag dùng ngay, đúng giới hạn cho mỗi bài đăng.

Công cụ này có phiên bản bằng các ngôn ngữ khác