Bạn đăng một trang, dán link vào nhóm chat hay bài đăng mạng xã hội, và thẻ chia sẻ hiện sai ảnh, không có ảnh, hoặc tiêu đề của tháng trước. Trang không có lỗi; lỗi nằm ở các thẻ, hoặc nền tảng đang hiện bản sao đọc từ trước. Bài này liệt kê các thẻ quan trọng, tính cụ thể cách mỗi nền tảng cắt ảnh chia sẻ, và kết thúc bằng các lỗi đứng sau phần lớn thẻ chia sẻ bị hỏng. Bạn có thể tạo và kiểm tra thẻ trong công cụ tạo thẻ meta và Open Graph trong lúc đọc.
Các thẻ trang thật sự cần
Các nền tảng đọc một nhóm nhỏ thẻ trong <head>. Với một bài viết thông thường, chừng này là đủ:
<title>Cách pha cà phê pour-over tại nhà</title>
<meta name="description" content="Hướng dẫn pour-over từng bước: tỉ lệ 1:16, ủ 30 giây và tổng thời gian khoảng ba phút." />
<link rel="canonical" href="https://example.com/huong-dan/pour-over" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Cách pha cà phê pour-over tại nhà" />
<meta property="og:description" content="Hướng dẫn pour-over từng bước: tỉ lệ 1:16, ủ 30 giây và tổng thời gian khoảng ba phút." />
<meta property="og:url" content="https://example.com/huong-dan/pour-over" />
<meta property="og:image" content="https://example.com/anh/pour-over-1200x630.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Phễu pour-over thủy tinh đặt trên cốc" />
<meta name="twitter:card" content="summary_large_image" />Ba chi tiết quyết định nó có chạy hay không:
- Open Graph dùng `property`, không phải `name`. Đa số trình đọc bỏ qua lỗi này, nhưng không phải tất cả. Thẻ riêng của X thì dùng
name. - Mọi URL đều phải đầy đủ.
og:imagelà/anh/the.jpgsẽ không được đa số trình thu thập ghép với địa chỉ trang. Hãy viết đủhttps://. - `twitter:card` là thẻ X duy nhất không bỏ được. X dùng lại
og:title,og:description,og:image, nhưng thiếutwitter:cardlàsummary_large_imagethì nó hiện bố cục ô vuông nhỏ hoặc không hiện gì.
og:image:width và og:image:height không bắt buộc, nhưng giúp Facebook vẽ thẻ ngay lần chia sẻ đầu tiên thay vì chờ tải và đo ảnh.
Mỗi nền tảng cắt ảnh 1200 x 630 thế nào
1200 x 630 là kích thước đa số nền tảng khuyên dùng: Meta yêu cầu tối thiểu 1200 x 630 để ảnh sắc nét (nhỏ nhất 600 x 315, dưới mức đó thẻ thu lại thành ảnh nhỏ), LinkedIn yêu cầu 1200 x 627. Tỉ lệ là 1200 / 630 = 1,905, gần với 1,91:1 mà Facebook và LinkedIn vẽ. Các bố cục khác sẽ cắt ảnh. Giả sử cắt ở giữa, như thường thấy:
| Nơi hiển thị | Tỉ lệ thẻ | Phần giữ lại của ảnh 1200 x 630 | Bị mất |
|---|---|---|---|
| Facebook, LinkedIn | 1,91:1 | 1200 x 628 | 1 px trên và dưới |
| Thẻ lớn của X | 2:1 | 1200 x 600 | 15 px trên và dưới |
| Thẻ nhỏ của X, nhiều ứng dụng chat | 1:1 | 630 x 630 | 285 px trái và phải |
Dòng cuối là dòng khiến nhiều người bất ngờ: ảnh thu nhỏ hình vuông chỉ giữ hơn một nửa chiều rộng. Vì vậy hãy thiết kế ảnh có vùng an toàn: mọi thứ phải còn sau mọi kiểu cắt nên nằm trong 600 x 600 px ở giữa (cắt vuông rộng 630, cắt 2:1 cao 600). Logo ở góc và chữ chạy sát mép là thứ mất đầu tiên.
Ảnh vuông thì ngược lại. Một ảnh Instagram 1080 x 1080 dùng làm og:image trên thẻ 1,91:1 chỉ giữ 1080 x 565: mất 257 px ở trên và 257 px ở dưới, thường là mất luôn khuôn mặt hoặc dòng tít. Hãy làm riêng một bản 1200 x 630; công cụ cắt ảnh làm việc đó với khung cố định.
Tiêu đề và mô tả dài bao nhiêu?
Không có một giới hạn chung, vì mỗi nền tảng cắt ở chỗ khác nhau:
- Google cắt tiêu đề theo độ rộng điểm ảnh, khoảng 600 px trên máy tính, tức chừng 50 đến 60 ký tự.
- Thẻ X nhận 70 ký tự tiêu đề và 200 ký tự mô tả.
- Facebook thường hiện một hai dòng tiêu đề và có thể ẩn hẳn mô tả trên điện thoại.
Mục tiêu thực tế: tiêu đề dưới 60 ký tự, bắt đầu bằng những từ quan trọng; mô tả 110 đến 160 ký tự, vẫn có nghĩa khi bị cắt sau câu đầu. Công cụ đếm ký tự như người đọc, nên "Cà phê" là sáu ký tự chứ không phải tám đơn vị mã.
Vì sao ảnh cũ cứ quay lại
Nền tảng đọc một URL một lần rồi giữ kết quả. Đổi og:image xong, lần chia sẻ sau vẫn có thể hiện ảnh cũ. Cách xử lý:
- Facebook: mở Sharing Debugger, nhập URL và bấm "Scrape again".
- LinkedIn: Post Inspector đọc lại trang khi bạn kiểm tra.
- X hiện không có nút làm mới công khai; thẻ cập nhật khi bộ nhớ đệm hết hạn.
- Ở mọi nơi: đặt tên tệp mới cho ảnh mới (
the-v2.jpg). URL đổi thì mọi bộ nhớ đệm, kể cả CDN, đều coi là ảnh mới.
Các lỗi thường gặp
- `og:image` là đường dẫn tương đối. Nguyên nhân phổ biến nhất của thẻ không có ảnh.
- Ảnh nằm sau đăng nhập, tường lửa hoặc bị `robots.txt` chặn. Trình thu thập như
facebookexternalhitphải tải được ảnh. - Tệp quá lớn hoặc định dạng lạ. Dùng JPEG hoặc PNG dưới vài MB; WebP và AVIF không phải nơi nào cũng đọc.
- `og:title` và `<title>` vô tình khác nhau. Được phép, nhưng thường là giá trị mặc định bị quên như "Trang chủ".
- Thiếu `og:url` hay canonical ở trang có tham số theo dõi. Khi đó lượt chia sẻ link
?utm_source=...bị tính là trang khác. - Chỉ thử trên dòng thời gian của mình. Hãy dán link vào một cuộc trò chuyện riêng trên từng nền tảng trước khi công bố.
Thử ngay
Dán mã nguồn trang hiện tại vào công cụ tạo thẻ meta và Open Graph ở mục "Bắt đầu từ HTML của một trang có sẵn". Danh sách kiểm tra chỉ ra ngay ảnh dùng đường dẫn tương đối hay tiêu đề quá dài, còn phần xem trước cho thấy kiểu cắt vuông xử lý ảnh của bạn ra sao. Chọn tệp ảnh trên máy để thấy nó trong thẻ; không có gì được tải lên.