Xem thử thẻ chia sẻ trên mạng xã hội: kích thước ảnh, độ dài chữ và thẻ Open Graph cần có
Công cụ dựng ba khung xem thử theo phong cách Facebook, X và LinkedIn từ bốn thông tin bạn tự nhập gồm tiêu đề, mô tả, đường dẫn ảnh và địa chỉ trang. Đây là bản mô phỏng để ước lượng bố cục và độ dài chữ, không phải công cụ đọc thẻ Open Graph từ website của bạn.
Tính năng nổi bật
- Nhập tiêu đề, mô tả, đường dẫn ảnh và địa chỉ trang, khung xem thử cập nhật ngay khi gõ
- Ba khung mô phỏng theo phong cách trình bày của Facebook, X và LinkedIn
- Khung Facebook hiện tên miền viết hoa ở trên, tiêu đề rồi mô tả bên dưới ảnh
- Khung X hiện đường dẫn đầy đủ phía trên tiêu đề
- Khung LinkedIn đặt tiêu đề lên trước rồi mới tới tên miền và mô tả
- Ảnh được cắt theo kiểu phủ kín khung nên bạn thấy ngay phần bị cắt mất
- Tiêu đề và mô tả ở khung Facebook bị cắt sau hai dòng, đúng cách nền tảng này rút gọn
- Chạy hoàn toàn trong trình duyệt, không gọi tới website nào của bạn
Vì sao nên thử trước khi bấm đăng
Thẻ chia sẻ là thứ quyết định người ta có bấm vào liên kết của bạn hay không, nhưng nó lại là phần hiếm khi được kiểm tra trước. Lý do rất thực tế: cách duy nhất để thấy nó là đăng thử lên, mà đăng thử thì hoặc bạn phải xóa đi hoặc bạn đã tiêu mất lượt hiển thị đầu tiên, vốn là lượt được phân phối mạnh nhất. Tệ hơn, các nền tảng đều lưu đệm dữ liệu của một địa chỉ sau lần đọc đầu tiên, nên nếu tiêu đề hay ảnh sai thì sửa xong vẫn hiện cái cũ và bạn phải đi làm mới thủ công. Một khung xem thử giúp bạn bắt được hai lỗi phổ biến nhất ngay tại bàn làm việc: tiêu đề dài quá bị cắt mất phần quan trọng, và ảnh có chữ nằm ở mép nên bị xén khi hệ thống cắt theo tỷ lệ khác. Cần nói rõ giới hạn: công cụ này dựng khung từ nội dung bạn gõ vào chứ không đọc mã nguồn trang của bạn, nên nó kiểm tra bố cục và câu chữ chứ không kiểm tra được thẻ Open Graph đã gắn đúng chưa.
Lợi ích khi sử dụng
- Ước lượng được độ dài tiêu đề và mô tả trước khi viết vào mã nguồn
- Thấy ngay phần ảnh bị xén khi khung cắt theo tỷ lệ khác với ảnh gốc
- So sánh ba cách trình bày cạnh nhau thay vì đăng thử ba lần
- Không tốn lượt hiển thị đầu tiên của bài đăng để đi thử
- Không cần đăng nhập tài khoản mạng xã hội nào
Cách xem thử thẻ chia sẻ
- 1Gõ đúng tiêu đề bạn định đặt trong thẻ og:title, không phải tiêu đề bài viết trên trang nếu hai cái khác nhau.
- 2Gõ phần mô tả tương ứng thẻ og:description, giữ trong khoảng một hai câu.
- 3Dán đường dẫn tuyệt đối của ảnh chia sẻ, phải là địa chỉ công khai xem được mà không cần đăng nhập.
- 4Dán địa chỉ trang đầy đủ có cả phần https, vì khung xem thử cần tách tên miền từ đó.
- 5Chuyển qua lại ba thẻ để xem chữ có bị cắt không và phần quan trọng của ảnh có nằm trong khung không.
Bộ thẻ Open Graph tối thiểu cần có
Giao thức Open Graph do Facebook giới thiệu năm 2010 và nay được hầu hết nền tảng dùng chung, kể cả những nơi không thuộc mạng xã hội như phần mềm nhắn tin nội bộ. Bốn thẻ được coi là bắt buộc gồm og:title cho tiêu đề, og:type cho loại nội dung với giá trị thường dùng là website hoặc article, og:image cho ảnh, và og:url cho địa chỉ chuẩn của trang. Thẻ og:description tuy không bắt buộc nhưng thiếu nó thì nền tảng tự lấy một đoạn bất kỳ trong trang, thường là đoạn không liên quan. Nên bổ sung thêm og:site_name cho tên website và og:locale với giá trị vi_VN. Về phía X, bộ thẻ riêng bắt đầu bằng twitter, trong đó twitter:card quyết định kiểu thẻ với hai giá trị hay dùng là summary cho ảnh vuông nhỏ và summary_large_image cho ảnh lớn ngang. Điểm tiện lợi là khi thiếu thẻ riêng của X, nền tảng này tự lấy các thẻ Open Graph tương ứng, nên bạn thường chỉ cần thêm mỗi twitter:card. Tất cả các thẻ này phải nằm trong phần đầu của tài liệu HTML và giá trị của og:image cùng og:url phải là địa chỉ tuyệt đối, không dùng đường dẫn tương đối.
Kích thước ảnh chia sẻ nên đặt bao nhiêu
Con số an toàn cho gần như mọi nền tảng là 1200 nhân 630 điểm ảnh, tương ứng tỷ lệ khoảng 1,91 trên 1, và đây cũng là kích thước Facebook khuyến nghị. Dưới ngưỡng 600 nhân 315 thì Facebook không dựng thẻ ảnh lớn nữa mà chuyển sang kiểu thẻ nhỏ với ảnh vuông bên trái, khiến bài đăng kém nổi bật hẳn. LinkedIn khuyến nghị chiều rộng tối thiểu 1200 điểm ảnh và cũng dùng tốt ảnh 1200 nhân 627. Với X, kiểu thẻ ảnh lớn dùng tỷ lệ 2 trên 1 nên ảnh 1200 nhân 630 vẫn hiển thị được nhưng sẽ bị xén nhẹ ở trên dưới, còn kiểu thẻ tóm tắt thì cắt về hình vuông. Về dung lượng, nên giữ tệp dưới 5 megabyte để an toàn cho mọi nền tảng. Hệ quả thực hành quan trọng nhất: vì mỗi nền tảng xén theo tỷ lệ khác nhau, đừng bao giờ đặt chữ hoặc logo sát mép ảnh. Hãy chừa một vùng an toàn khoảng 10 phần trăm ở mỗi cạnh và dồn mọi nội dung quan trọng vào phần giữa, đây là cách duy nhất để ảnh trông ổn ở mọi nơi mà không phải làm nhiều phiên bản.
Độ dài tiêu đề và mô tả bị cắt ở đâu
Không có con số tuyệt đối vì các nền tảng cắt theo chiều rộng hiển thị chứ không theo số ký tự, và chiều rộng đó khác nhau giữa máy tính, điện thoại và ứng dụng nhắn tin. Nhưng có khoảng an toàn dùng được. Với tiêu đề, giữ trong khoảng 60 tới 70 ký tự thì gần như chắc chắn không bị cắt ở đâu; Facebook thường hiển thị được nhiều hơn một chút trên máy tính nhưng cắt sớm hơn trên điện thoại. Với mô tả, khoảng 110 tới 130 ký tự là an toàn, và Facebook thường rút gọn còn hai dòng như bạn thấy trong khung xem thử. Nguyên tắc quan trọng hơn con số: hãy viết sao cho phần quan trọng nhất nằm ở đầu câu, vì phần bị cắt luôn là phần đuôi. Đừng đặt tên thương hiệu ở đầu tiêu đề nếu nó không phải thứ khiến người ta bấm vào; đưa nó về cuối hoặc bỏ hẳn vì tên miền đã hiện sẵn ngay trên thẻ. Cũng đừng để mô tả bị cắt giữa một con số hay giữa một cụm từ khiến câu đổi nghĩa, đây là lỗi trông rất cẩu thả và khá thường gặp.
Vì sao sửa xong rồi mà chia sẻ vẫn hiện nội dung cũ
Đây là câu hỏi phổ biến nhất về thẻ chia sẻ, và nguyên nhân là bộ nhớ đệm. Khi một địa chỉ được chia sẻ lần đầu, nền tảng cử trình thu thập của mình tới đọc các thẻ rồi lưu lại kết quả trong một khoảng thời gian. Những lần chia sẻ sau, nó lấy từ bản đã lưu chứ không đọc lại trang, nên bạn sửa thẻ trong mã nguồn mà bên ngoài vẫn hiện cái cũ. Cách xử lý là dùng chính công cụ chính thức của từng nền tảng để buộc đọc lại. Facebook có công cụ gỡ lỗi chia sẻ, dán địa chỉ vào rồi bấm nút quét lại là bản đệm được cập nhật, đồng thời nó liệt kê đầy đủ các thẻ nó đọc được cùng cảnh báo nếu thiếu thẻ nào. LinkedIn có công cụ kiểm tra bài đăng làm việc tương tự. Riêng X thì công cụ kiểm tra thẻ trước đây đã ngừng hoạt động nên không còn cách làm mới thủ công, bạn chỉ có thể chờ bộ đệm hết hạn. Một mẹo thực dụng: hãy chạy công cụ gỡ lỗi ngay sau khi xuất bản bài mới, trước khi bạn hoặc bất kỳ ai chia sẻ nó, để bản đệm đầu tiên đã là bản đúng.
Công cụ này không làm được gì
Nói rõ để bạn dùng đúng chỗ. Công cụ không tải trang của bạn về và không đọc thẻ Open Graph từ mã nguồn, nên nó không trả lời được câu hỏi tôi đã gắn thẻ đúng chưa; nội dung trong khung là thứ bạn tự gõ vào. Nó cũng không kiểm tra kích thước hay dung lượng tệp ảnh, không cảnh báo khi ảnh nhỏ hơn ngưỡng khuyến nghị, không xuất ra đoạn mã thẻ để bạn dán vào trang, và không mô phỏng các nơi khác như Zalo, Pinterest, Slack hay Discord. Ba khung hiện có là bản dựng gần đúng về bố cục chứ không sao chép chính xác giao diện của từng nền tảng, và các nền tảng vẫn thay đổi cách trình bày thẻ liên kết theo thời gian nên khoảng cách này sẽ còn nới rộng. Một lưu ý kỹ thuật nhỏ: ô địa chỉ trang cần một địa chỉ hợp lệ có đầy đủ phần giao thức, vì khung xem thử phải tách tên miền từ đó; nếu bạn gõ thiếu hoặc gõ sai định dạng thì phần xem thử sẽ không dựng lên được. Quy trình đầy đủ nên là: dùng công cụ này để chốt câu chữ và bố cục ảnh, rồi dùng công cụ gỡ lỗi chính thức của nền tảng để xác nhận thẻ đã gắn đúng trên trang thật.
Câu hỏi thường gặp (FAQ)
Công cụ có tự đọc thẻ Open Graph từ website của tôi không?
Không. Nó chỉ dựng khung xem thử từ bốn thông tin bạn tự gõ vào. Muốn kiểm tra thẻ đã gắn đúng trên trang thật hay chưa, hãy dùng công cụ gỡ lỗi chia sẻ của Facebook hoặc công cụ kiểm tra bài đăng của LinkedIn, chúng liệt kê đầy đủ các thẻ đọc được từ trang.
Ảnh chia sẻ nên có kích thước bao nhiêu?
Con số an toàn cho gần như mọi nền tảng là 1200 nhân 630 điểm ảnh, tương ứng tỷ lệ khoảng 1,91 trên 1. Dưới ngưỡng 600 nhân 315 thì Facebook không dựng thẻ ảnh lớn nữa mà chuyển sang kiểu thẻ nhỏ, khiến bài đăng kém nổi bật hẳn. Nên giữ dung lượng tệp dưới 5 megabyte.
Vì sao chữ trên ảnh bị cắt mất?
Vì mỗi nền tảng xén ảnh theo tỷ lệ khác nhau, và cách hiển thị trên điện thoại lại khác trên máy tính. Cách phòng duy nhất là chừa vùng an toàn khoảng 10 phần trăm ở mỗi cạnh và dồn toàn bộ chữ cùng logo vào phần giữa ảnh, thay vì làm nhiều phiên bản ảnh cho từng nơi.
Tiêu đề nên dài bao nhiêu ký tự?
Khoảng 60 tới 70 ký tự là an toàn ở mọi nền tảng và mọi kích thước màn hình. Không có con số tuyệt đối vì việc cắt dựa trên chiều rộng hiển thị chứ không theo số ký tự. Quan trọng hơn là đặt phần đáng giá nhất ở đầu câu, vì phần bị cắt luôn là phần đuôi.
Những thẻ Open Graph nào là bắt buộc?
Bốn thẻ được coi là bắt buộc gồm og:title, og:type, og:image và og:url. Thẻ og:description tuy không bắt buộc nhưng nếu thiếu thì nền tảng tự lấy một đoạn bất kỳ trong trang, thường là đoạn không liên quan. Nên bổ sung thêm og:site_name và og:locale.
Có cần thêm thẻ riêng cho X không?
Thường chỉ cần thêm twitter:card với giá trị summary_large_image nếu muốn ảnh lớn ngang, hoặc summary nếu muốn ảnh vuông nhỏ. Các phần còn lại như tiêu đề, mô tả và ảnh sẽ được X tự lấy từ thẻ Open Graph khi không tìm thấy thẻ riêng tương ứng.
Sửa thẻ rồi mà chia sẻ vẫn hiện nội dung cũ, phải làm sao?
Do nền tảng đã lưu đệm kết quả đọc lần đầu. Với Facebook, dán địa chỉ vào công cụ gỡ lỗi chia sẻ rồi bấm quét lại để cập nhật bản đệm. LinkedIn có công cụ kiểm tra bài đăng làm việc tương tự. Riêng X không còn công cụ làm mới thủ công nên phải chờ bộ đệm hết hạn.
Có cách nào tránh việc bản đệm đầu tiên bị sai không?
Có, và đây là mẹo đáng làm thành thói quen: ngay sau khi xuất bản một trang mới, hãy chạy công cụ gỡ lỗi chia sẻ của Facebook cho địa chỉ đó trước khi bạn hoặc bất kỳ ai chia sẻ. Như vậy bản đệm đầu tiên đã là bản đúng và bạn không phải đi sửa sau.
Đường dẫn ảnh cần thỏa điều kiện gì?
Phải là địa chỉ tuyệt đối đầy đủ chứ không phải đường dẫn tương đối, và phải xem được công khai mà không cần đăng nhập. Ảnh nằm sau tường đăng nhập, ảnh trên môi trường thử nghiệm chặn theo địa chỉ IP hay ảnh chỉ có trên máy của bạn đều không hiển thị được với trình thu thập của nền tảng.
Khung xem thử có giống hệt giao diện thật không?
Không, đây là bản dựng gần đúng về bố cục. Các nền tảng vẫn thay đổi cách trình bày thẻ liên kết theo thời gian, và cùng một thẻ hiển thị khác nhau giữa ứng dụng trên điện thoại với bản web trên máy tính. Hãy dùng công cụ để ước lượng độ dài chữ và vùng ảnh bị xén.
Có xem thử được trên Zalo hay Pinterest không?
Không, công cụ chỉ có ba khung theo phong cách Facebook, X và LinkedIn. Tin tốt là các nền tảng khác cũng đọc cùng bộ thẻ Open Graph, nên khi thẻ đã gắn đúng và ảnh theo tỷ lệ chuẩn thì phần lớn nơi khác đều hiển thị được, chỉ khác nhau về cách trình bày.
Khung xem thử không hiện ra thì do đâu?
Thường do ô địa chỉ trang chưa đúng định dạng. Khung xem thử cần tách tên miền từ địa chỉ nên bạn phải nhập địa chỉ hợp lệ có đầy đủ phần https ở đầu. Nhập thiếu phần giao thức hoặc để trống ô này sẽ khiến phần xem thử không dựng lên được.
Từ khóa liên quan
- open graph là gì
- thẻ og image
- kích thước ảnh chia sẻ facebook
- ảnh og 1200x630
- twitter card summary large image
- xem trước link khi chia sẻ
- facebook sharing debugger
- linkedin post inspector
- sửa og tag không cập nhật
- xóa cache khi share link facebook
- og:title bao nhiêu ký tự
- og:description độ dài chuẩn
- thẻ meta cho mạng xã hội
- ảnh chia sẻ bị cắt chữ
- chia sẻ link lên zalo hiện ảnh
- og:url canonical
- tăng tỷ lệ click khi chia sẻ
- meta tag facebook cho website
- preview bài đăng linkedin
- công cụ kiểm tra thẻ open graph
