2026-03-28

Twitter Card Image Size and Preview Checklist

Choose the right Twitter card image size, metadata, WebP export, and troubleshooting checks so shared links render cleanly on X and other social feeds.

Twitter Card Image Size and Preview Checklist

Cập nhật lần cuối: June 28, 2026

Ảnh thẻ Twitter là ảnh xem trước xuất hiện khi ai đó chia sẻ một URL trên X. Nó cần đủ lớn để trông sắc nét, đủ nhỏ để các crawler có thể tải nhanh chóng, và phải được khai báo bằng metadata hoạt động ngay cả khi nền tảng dự phòng về Open Graph tags.

Hướng dẫn này cung cấp cho bạn một danh sách kiểm tra xuất bản thực tế: kích thước, thẻ (tags), định dạng file, kiểm tra CDN, và cách khắc phục các thẻ không chịu cập nhật.

Trả lời nhanh: Bạn nên sử dụng ảnh thẻ Twitter nào?

Sử dụng WebP hoặc JPEG 1200 by 630 pixel cho hầu hết các liên kết được chia sẻ, đặc biệt khi bạn muốn một thẻ ảnh lớn. Hãy giữ chủ thể quan trọng tránh xa các cạnh, làm cho văn bản dễ đọc ở kích thước thumbnail, và sử dụng URL HTTPS tuyệt đối trong cả twitter:image và og:image.

Đối với X, hãy đặt twitter:card thành summary_large_image khi hình ảnh là điểm thu hút chính. Giữ file dưới giới hạn ảnh thẻ được tài liệu hóa một cách thoải mái và xác minh rằng URL CDN cuối cùng trả về HTTP 200 trước khi xuất bản.

Thiết lập đáng tin cậy rất đơn giản:

  • Xuất ảnh kích thước 1200 by 630 cho phần xem trước.
  • Sử dụng URL CDN cuối cùng, không phải đường dẫn tương đối.
  • Thêm twitter:title, twitter:description, và twitter:image.
  • Thêm các thẻ og:title, og:description, và og:image tương ứng làm fallback.
  • Kiểm tra URL trực tiếp sau khi triển khai, sau đó làm mới cache nền tảng nếu ảnh cũ vẫn xuất hiện.

Ảnh thẻ Twitter là gì?

Ảnh thẻ Twitter là URL hình ảnh được khai báo trong metadata trang để X có thể xây dựng một bản xem trước phong phú. Nó không giống với ảnh đầu tiên trong bài viết của bạn. Một crawler đọc phần head HTML, tìm các thẻ card, tải ảnh, và lưu trữ bản xem trước đã được cache cho URL được chia sẻ.

Các ví dụ markup thẻ của riêng X vẫn mô tả các loại thẻ summary và summary_large_image trong tài liệu và ví dụ nhà phát triển của nó. Sự khác biệt thực tế là kích thước xem trước: summary_large_image cung cấp đủ không gian cho hình ảnh để chứa một bài blog, sản phẩm, công cụ hoặc liên kết chiến dịch.

Open Graph rất quan trọng vì nhiều nền tảng xã hội, ứng dụng chat và hệ thống xem trước liên kết đọc og:image. Giao thức Open Graph định nghĩa og:title, og:type, og:image, và og:url là metadata cốt lõi. Hãy sử dụng cả thẻ Twitter/X và thẻ Open Graph để một parser bị thiếu không làm hỏng mọi bản xem trước.

Metadata field Dùng cho Lưu ý thực tế
twitter:card Chọn bố cục summary hoặc large-image Sử dụng summary_large_image cho hầu hết các bài viết và trang đích
twitter:image Ảnh xem trước chính của X Sử dụng URL hình ảnh HTTPS tuyệt đối
og:image Ảnh xem trước fallback cho ứng dụng xã hội và nhắn tin Thường khớp với twitter:image trừ khi nền tảng cần cắt khác
og:url URL canonical cho trang được chia sẻ Khớp với URL trang công khai canonical
title and description tags Ngữ cảnh trình duyệt và tìm kiếm Giữ chúng nhất quán với metadata xã hội

Để làm việc về metadata hình ảnh liên quan, hãy kết hợp điều này với hướng dẫn Tối ưu hóa hình ảnh cho SEO và Danh sách kiểm tra Tối ưu hóa Hình ảnh Hoàn chỉnh.

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

Bắt đầu với 1200 by 630 pixels. Nó khớp với tỷ lệ cắt xem trước xã hội phổ biến 1.91:1, cung cấp đủ pixel cho các nền tảng để giảm kích thước sạch sẽ, và hoạt động tốt khi cùng một hình ảnh được tái sử dụng làm og:image.

Tránh thiết kế thẻ chỉ hoạt động ở kích thước đầy đủ. Các nguồn cấp (feeds) cắt, thay đổi kích thước và đặt văn bản xung quanh hình ảnh. Nhãn nhỏ, ảnh chụp màn hình UI mỏng, và nền phức tạp thường trông ổn trong công cụ thiết kế nhưng trở nên khó đọc trong một thẻ chia sẻ thực tế.

Graphic showing a 1200 by 630 Twitter card image with WebP, file size, HTTPS, and edge-safe design notes

Trường hợp sử dụng Ảnh đề xuất Tại sao nó hiệu quả Lưu ý
Bài blog hoặc hướng dẫn 1200 x 630 WebP Cắt xem trước lớn, khả năng tương thích nền tảng rộng Văn bản tiêu đề nhỏ
Ra mắt sản phẩm 1200 x 630 WebP hoặc JPEG Sản phẩm vẫn hiển thị sau khi giảm kích thước Cắt cạnh sản phẩm
Trang công cụ Ảnh chụp màn hình dựa trên 1200 x 630 Cho thấy công cụ hoạt động như thế nào trước khi nhấp vào Văn bản UI quá nhỏ để đọc
Trang chỉ có logo 1200 x 630 với đệm rộng rãi Giữ cho logo không bị cảm giác chật chội Xem trước trông trống rỗng
Chiến dịch thân thiện với hình vuông Biến thể riêng 1200 x 1200 khi cần Hữu ích cho các nền tảng có cắt dạng hình vuông Không được tái sử dụng nó một cách mù quáng làm thẻ X

Sử dụng bài viết Best Image Resizer for Social Media khi bạn cần nhiều loại cắt nền tảng, và sử dụng Facebook Ad Image Sizes khi cùng một creative cũng cung cấp cho mạng xã hội trả phí.

Cách viết metadata như thế nào?

Đặt các thẻ này trong HTML được render bằng máy chủ (server-rendered), bên trong phần <head> của trang. Không phụ thuộc vào JavaScript phía client để chèn các thẻ xã hội sau khi tải. Các crawler xem trước liên kết có thể không thực thi ứng dụng của bạn theo cách một trình duyệt làm.

Three-row metadata diagram showing twitter card, twitter image, and open graph image tags for social previews

Sử dụng mẫu này cho một bài viết hoặc trang công cụ thông thường:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Twitter Card Image Size and Preview Checklist">
<meta name="twitter:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta name="twitter:image" content="https://cdn.example.com/blog/twitter-card-image.webp">

<meta property="og:type" content="article">
<meta property="og:title" content="Twitter Card Image Size and Preview Checklist">
<meta property="og:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta property="og:image" content="https://cdn.example.com/blog/twitter-card-image.webp">
<meta property="og:url" content="https://example.com/blog/twitter-card-image">

Giữ các kiểm tra này trong quy trình đánh giá mã (code review):

  1. URL hình ảnh là tuyệt đối và bắt đầu bằng https://.
  2. URL hình ảnh là URL CDN cuối cùng, không phải đường dẫn build cục bộ.
  3. Tiêu đề trang và tiêu đề xã hội mô tả cùng một trang.
  4. Mô tả xã hội đủ ngắn để quét trong bản xem trước.
  5. URL canonical và og:url trỏ đến cùng một trang công khai.
  6. Ảnh thẻ không bị chặn bởi robots.txt, xác thực, hoặc quy tắc hotlink.
  7. Phản hồi máy chủ bao gồm loại nội dung hình ảnh chính xác.

Hướng dẫn SEO hình ảnh của Google cũng khuyến nghị ngữ cảnh hình ảnh mô tả, URL hình ảnh có thể crawl được, và các định dạng được hỗ trợ trong Google Images best practices. Lời khuyên đó không dành riêng cho Twitter, nhưng nó là kỷ luật xuất bản tương tự: làm cho hình ảnh quan trọng dễ dàng để crawler khám phá, tải xuống và hiểu.

Nên sử dụng WebP, JPEG hay PNG cho ảnh thẻ Twitter?

Sử dụng WebP khi nền tảng và mục tiêu xem trước của bạn hỗ trợ, đặc biệt đối với đồ họa bài viết, bản xem trước sản phẩm và ảnh chụp màn hình có màu sắc hỗn hợp. Sử dụng JPEG để tương thích rộng rãi hoặc các thẻ nặng về ảnh. Chỉ sử dụng PNG khi tính trong suốt hoặc cạnh không mất dữ liệu đủ quan trọng để biện minh cho kích thước file lớn hơn.

image file type guide của MDN giải thích rằng WebP hỗ trợ cả nén lossy và lossless. Sự linh hoạt đó hữu ích cho các thẻ xã hội vì một hình ảnh duy nhất có thể chứa kết cấu ảnh, màu thương hiệu phẳng, và văn bản.

Đối với bài viết này, tôi đã mã hóa và kiểm tra bốn đồ họa WebP 1200 by 630 cục bộ bằng ImageMagick và kiểm tra kích thước đầu ra trước khi xuất bản. Chúng nằm trong khoảng từ 14 KB đến 28 KB vì chúng là các đồ họa sạch với kết cấu hạn chế. Ảnh sản phẩm thực tế và ảnh chụp màn hình chi tiết thường sẽ lớn hơn.

Format Phù hợp với Rủi ro điển hình Điểm khởi đầu thực tế
WebP Hầu hết các đồ họa xem trước xã hội và thẻ ảnh hỗn hợp Một số công cụ cũ có thể không xem bản nháp cục bộ Xuất WebP lossy khoảng chất lượng 80-85
JPEG Xem trước nặng về ảnh và nhu cầu tương thích bảo thủ Không trong suốt, khả năng viền xung quanh văn bản Xuất khoảng chất lượng 82-88
PNG Logo, độ trong suốt, đồ họa phẳng sắc nét Kích thước file lớn Chỉ sử dụng khi lossless là cần thiết
AVIF Hình ảnh hiện đại rất nhỏ Hệ sinh thái xem trước có thể kém dự đoán hơn Thử nghiệm cẩn thận trước khi sử dụng làm thẻ duy nhất

Nếu ảnh thẻ cũng là hero của trang, hãy làm theo hướng dẫn Image Compression Ratio để bản xem trước trông sạch sẽ mà không làm nặng trang. Nếu bạn đang so sánh các định dạng hiện đại, hãy đọc AVIF vs WebP Comparison.

Làm thế nào để hình ảnh dễ đọc trong nguồn cấp (feed)?

Thiết kế thẻ cho nơi nhỏ nhất nó sẽ được nhìn thấy, chứ không phải trên artboard trong trình chỉnh sửa của bạn. Bản xem trước nguồn cấp có thể hẹp hơn bản gốc, và giao diện người dùng xung quanh cạnh tranh sự chú ý.

Sử dụng các quy tắc thiết kế này:

  • Đặt chủ thể hoặc tiêu đề chính ở khu vực an toàn trung tâm.
  • Để đệm xung quanh khuôn mặt, sản phẩm, logo và văn bản.
  • Sử dụng một thông điệp ngắn, không phải tiêu đề bài viết đầy đủ cộng với phụ đề cộng với huy hiệu.
  • Kiểm tra hình ảnh ở chiều rộng 600 pixels trước khi phê duyệt nó.
  • Tránh ảnh chụp màn hình với nhãn nhỏ trừ khi UI tự nó là câu chuyện.
  • Giữ độ tương phản đủ cao để nhìn lướt qua nhanh chóng.
  • Không sử dụng ảnh stock chung chung khi trang nói về một công cụ, sản phẩm hoặc quy trình kỹ thuật.

Một ảnh thẻ hữu ích nên trả lời câu hỏi "liên kết này nói về cái gì?" trước khi người đọc nghiên cứu tiêu đề. Đối với bài blog, đó có thể là một sơ đồ đơn giản. Đối với hướng dẫn thương mại điện tử, nó có thể là ví dụ ảnh sản phẩm. Đối với bộ chuyển đổi hoặc bộ thay đổi kích thước, nó có thể là ảnh chụp màn hình công cụ đã được cắt.

Tại sao ảnh thẻ Twitter của tôi không hiển thị?

Hầu hết các ảnh thẻ bị lỗi đến từ một trong bốn nguyên nhân: crawler không thể tải URL, metadata trỏ đến sai ảnh, nền tảng đã cache phiên bản cũ, hoặc hình ảnh về mặt kỹ thuật hợp lệ nhưng là ứng cử viên xem trước kém.

Troubleshooting checklist graphic showing relative image URLs, crawler blocks, stale cached cards, and oversized files

Chạy chuỗi này trước khi thay đổi creative:

  1. Mở nguồn trang cuối cùng và xác nhận thẻ twitter:image tồn tại.
  2. Sao chép chính xác URL hình ảnh từ HTML đã render.
  3. Chạy curl -I đối với URL hình ảnh và xác nhận HTTP 200.
  4. Xác nhận loại nội dung phản hồi là một loại hình ảnh.
  5. Kiểm tra rằng URL hình ảnh không bị chuyển hướng qua tường xác thực (auth wall).
  6. Đảm bảo tệp hình ảnh không quá lớn.
  7. Xác nhận robots.txt không chặn hình ảnh hoặc trang.
  8. Thay đổi tên tệp hình ảnh khi bạn cần buộc cache mới.
  9. Kiểm tra lại trang đã triển khai, không phải URL xem trước cục bộ.
  10. Kiểm tra các thẻ Open Graph nếu thẻ hoạt động trong một ứng dụng nhưng không hoạt động trong ứng dụng khác.
Triệu chứng Nguyên nhân có thể xảy ra Cách khắc phục
Không thấy ảnh nào Thiếu hoặc twitter:image tương đối Sử dụng URL CDN HTTPS đầy đủ
Ảnh cũ xuất hiện Bản xem trước đã được cache Xuất bản một tên tệp mới và làm mới URL được chia sẻ
Ảnh xuất hiện bị cắt xấu Bố cục không an toàn Tái xuất với đệm nhiều hơn và chủ thể ở trung tâm
Tiêu đề xem trước sai Không khớp metadata Căn chỉnh twitter:title, og:title, và tiêu đề trang
Hoạt động cục bộ nhưng không hoạt động trực tiếp Đường dẫn cục bộ, xác thực, hoặc CDN bị chặn Kiểm tra URL sản xuất với curl -I

Crop Image Online Guide hữu ích khi chủ thể cần một vùng cắt an toàn hơn, và Image Aspect Ratio Changer bao gồm việc thay đổi creative từ hình vuông hoặc chân dung thành khung xem trước xã hội.

Danh sách kiểm tra trước khi xuất bản

Trước khi bạn đưa ra một trang phụ thuộc vào chia sẻ xã hội, hãy xem xét hình ảnh và metadata cùng nhau. Một tệp WebP hoàn hảo vẫn sẽ thất bại nếu thẻ trỏ đến URL của ngày hôm qua. Metadata hoàn hảo vẫn sẽ gây thất vọng nếu hình ảnh không thể đọc được trong nguồn cấp.

Sử dụng danh sách kiểm tra cuối cùng này:

  • Frontmatter hoặc CMS image là hình ảnh được sử dụng cho metadata xã hội.
  • Hình ảnh là duy nhất đối với trang hoặc rõ ràng liên quan đến trang.
  • URL hình ảnh là HTTPS và công khai.
  • Phần mở rộng tệp khớp với định dạng phản hồi thực tế.
  • Hình ảnh trả về HTTP 200 từ CDN.
  • Tiêu đề và mô tả không bị nhồi nhét từ khóa.
  • Ảnh xem trước có văn bản alt mô tả nơi nó xuất hiện trong nội dung bài viết.
  • Hình ảnh được kiểm tra trực quan ở kích thước xem trước desktop và mobile.
  • Trang có một URL canonical ổn định.
  • Thẻ được kiểm tra lại sau khi triển khai.

Một ảnh thẻ Twitter tốt là một hệ thống xuất bản nhỏ: một hình ảnh rõ ràng, metadata ổn định, một URL CDN nhanh chóng, và một bước kiểm tra tải cuối cùng. Khi những mảnh ghép đó đã sẵn sàng, khả năng xem trước bị lỗi trong quá trình ra mắt hoặc làm mới nội dung sẽ ít hơn nhiều.

Sử dụng các công cụ miễn phí trong khi bạn theo dõi hướng dẫn.

Nén một ảnhXóa nền

Đọc tiếp