Xem thẻ Open Graph của một trang và dựng thử ảnh xem trước khi chia sẻ
Nhập một đường dẫn, công cụ tải mã nguồn trang qua một dịch vụ trung gian rồi bóc ra các thẻ og:title, og:description, og:image, og:url, og:site_name và og:type, sau đó dựng hai khung mô phỏng theo kiểu thẻ chia sẻ của Facebook và của X. Dùng để phát hiện thẻ thiếu hoặc sai trước khi bấm đăng.
Tính năng nổi bật
- Đọc sáu thẻ Open Graph quan trọng nhất và hiển thị giá trị thật của từng thẻ
- Tự lùi về thẻ tiêu đề và thẻ mô tả thông thường của trang khi không tìm thấy thẻ Open Graph
- Đánh dấu rõ những thẻ không có thay vì để trống gây hiểu nhầm
- Dựng hai khung xem trước mô phỏng thẻ chia sẻ trên Facebook và trên X
- Hiển thị tên miền lấy từ chính đường dẫn bạn nhập ở dòng nguồn của khung xem trước
- Nhận cả thẻ khai báo bằng thuộc tính property lẫn thẻ khai báo bằng thuộc tính name
- Ẩn khung ảnh khi đường dẫn ảnh hỏng, nhờ đó bạn phát hiện ngay ảnh không tải được
- Bấm phím Enter là chạy, không cần đăng nhập hay cài tiện ích mở rộng
Thẻ chia sẻ là thứ quyết định người ta có bấm vào liên kết hay không
Khi một đường dẫn được dán vào bảng tin, vào nhóm chat hay vào kênh làm việc nội bộ, thứ người ta nhìn thấy trước tiên không phải nội dung trang mà là khối xem trước gồm một tấm ảnh, một dòng tiêu đề và một dòng mô tả. Khối đó chiếm diện tích lớn hơn nhiều so với dòng chữ đi kèm, và nó được dựng từ vài thẻ meta trong mã nguồn. Nếu thiếu ảnh, liên kết co lại thành một dòng chữ nhỏ và tỷ lệ người bấm vào giảm rõ rệt. Nếu tiêu đề bị lấy từ thẻ mặc định, người xem có thể thấy tên chuyên mục thay vì tên bài. Nếu ảnh sai tỷ lệ, phần bị cắt thường rơi trúng chỗ đặt chữ. Vấn đề là những lỗi này chỉ lộ ra sau khi đã đăng, mà lúc đó các nền tảng đã lưu tạm dữ liệu cũ nên sửa xong vẫn chưa thấy thay đổi ngay. Kiểm tra trước khi đăng là cách rẻ nhất để tránh cả chuỗi phiền phức đó.
Lợi ích khi sử dụng
- Biết chính xác giá trị thẻ đang có thay vì đoán từ mã nguồn trang
- Phát hiện ngay ảnh xem trước không tải được vì đường dẫn hỏng hoặc bị chặn
- Thấy trước tiêu đề dài bị cắt tới đâu để kịp rút gọn
- Kiểm tra được cả trang của đối thủ để tham khảo cách họ viết tiêu đề chia sẻ
- Không phải đăng thử rồi xóa bài, việc vừa mất thời gian vừa dễ để lại dấu vết
Cách kiểm tra một đường dẫn
- 1Dán đường dẫn đầy đủ kèm phần https vào ô nhập rồi bấm Enter hoặc bấm nút tìm kiếm.
- 2Chờ vài giây để công cụ tải mã nguồn trang qua dịch vụ trung gian và bóc các thẻ ra.
- 3Đọc bảng dữ liệu bên trái, tìm những dòng ghi là không có để biết thẻ nào đang thiếu.
- 4Nhìn hai khung xem trước để ước lượng phần tiêu đề và mô tả có bị cắt hay không, và ảnh có hiện được không.
- 5Nếu phát hiện lỗi, sửa thẻ meta trên website rồi chạy lại công cụ, sau đó dùng công cụ chính thức của từng nền tảng để làm mới bộ nhớ tạm.
Bộ thẻ tối thiểu cần có và cách khai báo cho đúng
Một trang muốn hiển thị đẹp khi chia sẻ cần ít nhất năm thẻ. Thẻ og:title là tiêu đề hiển thị trong khối xem trước, nên viết riêng cho ngữ cảnh mạng xã hội chứ không nhất thiết trùng thẻ tiêu đề dùng cho tìm kiếm. Thẻ og:description là dòng mô tả bên dưới, khoảng hai tới bốn dòng tùy nền tảng. Thẻ og:image là ảnh xem trước và phải là đường dẫn tuyệt đối bắt đầu bằng https, đường dẫn tương đối kiểu gạch chéo rồi tên tệp sẽ không hoạt động. Thẻ og:url nên trùng với đường dẫn chính thức của trang, tức trùng thẻ canonical, để mọi lượt chia sẻ dồn về một địa chỉ thay vì bị chia lẻ giữa bản có www và bản không có www. Thẻ og:type nhận giá trị website cho trang thường và article cho bài viết. Điểm kỹ thuật hay sai: các thẻ Open Graph khai báo bằng thuộc tính property chứ không phải name, trong khi các thẻ dành riêng cho X lại dùng name. Nhiều hệ quản trị nội dung xuất sai chỗ này khiến thẻ tồn tại trong mã nguồn nhưng nền tảng không đọc được.
Kích thước và tỷ lệ ảnh xem trước
Kích thước được dùng phổ biến nhất là 1200 nhân 630 điểm ảnh, tương ứng tỷ lệ khoảng 1,91:1, và đây là cỡ an toàn cho Facebook lẫn LinkedIn. Với thẻ ảnh lớn trên X, tỷ lệ 2:1 vừa khít hơn, tức 1200 nhân 600 điểm ảnh. Nếu chỉ làm một tệp dùng chung, hãy dựng ở 1200 nhân 630 và chừa lề an toàn khoảng năm phần trăm ở mỗi cạnh trên dưới để phần bị cắt không ăn vào chữ hay logo. Ảnh nhỏ hơn 200 nhân 200 điểm ảnh thường bị bỏ qua hoàn toàn, còn ảnh quá nặng có thể không được tải kịp. Vài lưu ý khác thường bị bỏ sót: nên khai báo thêm og:image:width và og:image:height để nền tảng dựng khung ngay lần đầu mà không phải chờ tải ảnh; nên thêm og:image:alt mô tả nội dung ảnh cho người dùng trình đọc màn hình; và ảnh phải nằm ở địa chỉ công khai, không đứng sau tường đăng nhập, không chặn bởi tệp robots hay tường lửa, vì trình thu thập của nền tảng truy cập ảnh bằng một máy khác chứ không dùng phiên đăng nhập của bạn.
Vì sao nền tảng vẫn hiện thông tin cũ sau khi bạn đã sửa
Các nền tảng lưu lại kết quả đọc thẻ để không phải tải lại trang mỗi lần có người chia sẻ, và bộ nhớ tạm này tồn tại khá lâu. Nghĩa là sau khi bạn sửa thẻ meta, liên kết dán ra vẫn hiện ảnh và tiêu đề cũ. Với Facebook, cách xử lý là mở công cụ gỡ lỗi chia sẻ của họ, dán đường dẫn vào rồi bấm thu thập lại; thao tác này buộc hệ thống đọc lại trang ngay lập tức. Với LinkedIn, có công cụ kiểm tra bài đăng làm việc tương tự. Với X thì hiện không còn công cụ kiểm tra thẻ công khai, nên cách thực tế là thêm một tham số truy vấn vô hại vào cuối đường dẫn để tạo ra một địa chỉ mà hệ thống chưa từng thấy. Với Zalo và các ứng dụng nhắn tin, thường phải chờ bộ nhớ tạm hết hạn. Bài học rút ra là hãy kiểm tra thẻ trước khi công bố đường dẫn lần đầu, vì sau đó việc sửa luôn tốn thêm một bước và đôi khi phải chờ.
Đường dẫn của bạn đi qua một dịch vụ trung gian
Đây là điểm cần nói rõ. Trình duyệt không cho phép một trang web tự tải mã nguồn của trang khác tên miền, vì vậy công cụ phải nhờ một dịch vụ trung gian công cộng lấy hộ mã nguồn rồi trả về. Hệ quả thực tế: đường dẫn bạn nhập được gửi tới máy chủ của bên thứ ba đó, không phải chỉ nằm trên máy bạn. Với địa chỉ công khai thì không có vấn đề gì, nhưng đừng dán vào đây những đường dẫn nội bộ, đường dẫn môi trường thử nghiệm hay đường dẫn có kèm mã truy cập trong chuỗi truy vấn. Hệ quả thứ hai là công cụ phụ thuộc vào dịch vụ trung gian đó: nếu nó bận, chậm hoặc bị trang đích chặn thì bạn nhận thông báo lỗi dù trang của bạn hoàn toàn bình thường. Hệ quả thứ ba là mã nguồn nhận về là bản thô do máy chủ trả ra. Với những trang dựng thẻ meta bằng mã chạy phía trình duyệt, các thẻ đó không có trong bản thô nên công cụ sẽ báo thiếu, dù trình duyệt của người dùng vẫn thấy đủ.
Khung xem trước là tham khảo, không phải bản chụp chính xác
Hai khung mô phỏng trong công cụ dựng lại bố cục quen thuộc của thẻ chia sẻ, nhưng chúng không thể giống hệt bản thật vì mỗi nền tảng có quy tắc riêng và thay đổi giao diện theo thời gian. Điểm khác biệt lớn nhất cần biết: khung mang nhãn X ở đây vẫn lấy dữ liệu từ các thẻ Open Graph chứ không đọc riêng bộ thẻ dành cho nền tảng đó. Trong thực tế, nếu trang của bạn có khai báo thẻ riêng cho X thì chúng được ưu tiên hơn thẻ Open Graph, còn nếu không có thì nền tảng mới lùi về đọc Open Graph. Ngoài ra kiểu thẻ hiển thị phụ thuộc vào một thẻ chuyên biệt quyết định dùng ảnh nhỏ bên trái hay ảnh lớn phía trên, mà công cụ này không đọc. Số dòng mô tả được giữ lại cũng khác nhau giữa các nền tảng và giữa giao diện di động với máy tính. Vì vậy hãy dùng khung xem trước để phát hiện thẻ thiếu và ảnh hỏng, còn với chiến dịch quan trọng thì kiểm tra thêm bằng công cụ chính thức của nền tảng.
Câu hỏi thường gặp (FAQ)
Open Graph là gì?
Là một bộ thẻ meta đặt trong phần đầu của trang web, cho phép chủ trang quyết định tiêu đề, mô tả và ảnh hiển thị khi đường dẫn được chia sẻ. Bộ thẻ này do Facebook đưa ra nhưng nay được hầu hết nền tảng đọc, gồm LinkedIn, Zalo, Slack, Discord, Telegram và nhiều ứng dụng nhắn tin khác.
Ảnh xem trước nên để kích thước bao nhiêu?
1200 nhân 630 điểm ảnh là cỡ an toàn nhất, tương ứng tỷ lệ khoảng 1,91:1. Với thẻ ảnh lớn trên X, tỷ lệ 2:1 vừa khít hơn. Ảnh nhỏ hơn 200 nhân 200 điểm ảnh thường bị bỏ qua. Hãy chừa lề an toàn ở hai cạnh trên dưới để phần bị cắt không ăn vào chữ.
Vì sao công cụ báo không tìm thấy thẻ dù trang tôi có khai báo?
Ba nguyên nhân thường gặp. Một là trang dựng thẻ bằng mã chạy phía trình duyệt, mà công cụ đọc mã nguồn thô từ máy chủ nên không thấy. Hai là thẻ khai báo sai thuộc tính, thẻ Open Graph phải dùng property chứ không phải name. Ba là dịch vụ trung gian bị trang đích chặn nên không lấy được mã nguồn.
Đường dẫn tôi nhập có bị gửi đi đâu không?
Có. Vì trình duyệt không cho tải mã nguồn của trang khác tên miền, công cụ phải nhờ một dịch vụ trung gian công cộng lấy hộ, nên đường dẫn của bạn đi qua máy chủ bên thứ ba đó. Đừng dán vào đây đường dẫn nội bộ, đường dẫn môi trường thử nghiệm hay đường dẫn có kèm mã truy cập.
Đã sửa thẻ rồi mà chia sẻ vẫn ra ảnh cũ, phải làm sao?
Các nền tảng lưu tạm kết quả đọc thẻ khá lâu. Với Facebook, hãy mở công cụ gỡ lỗi chia sẻ của họ, dán đường dẫn rồi bấm thu thập lại để buộc hệ thống đọc mới. LinkedIn có công cụ kiểm tra bài đăng tương tự. Với các ứng dụng nhắn tin thì thường phải chờ bộ nhớ tạm hết hạn.
og:title có cần khác thẻ tiêu đề của trang không?
Không bắt buộc nhưng thường nên khác. Thẻ tiêu đề dùng cho tìm kiếm hay kèm tên thương hiệu và từ khóa, trong khi tiêu đề chia sẻ nên viết ngắn và hấp dẫn hơn vì nó cạnh tranh với hàng loạt bài khác trên bảng tin. Nếu để trống, nền tảng sẽ lùi về đọc thẻ tiêu đề thông thường.
og:url nên đặt giá trị gì?
Đặt bằng đúng đường dẫn chính thức của trang, tức trùng với thẻ canonical. Việc này gom mọi lượt chia sẻ về một địa chỉ thay vì bị chia lẻ giữa các biến thể có www và không có www, có dấu gạch chéo cuối và không có, hoặc kèm tham số theo dõi chiến dịch.
Vì sao khung xem trước không hiện ảnh?
Vì trình duyệt không tải được ảnh từ đường dẫn trong thẻ og:image. Nguyên nhân hay gặp là dùng đường dẫn tương đối thay vì đường dẫn tuyệt đối, ảnh nằm sau tường đăng nhập, ảnh bị chặn bởi cấu hình máy chủ, hoặc tệp đã bị xóa. Hãy thử mở thẳng đường dẫn ảnh trong một tab mới để kiểm tra.
Có cần khai báo riêng bộ thẻ cho X không?
Không bắt buộc, vì X sẽ lùi về đọc Open Graph khi không tìm thấy thẻ riêng. Nhưng nếu bạn muốn kiểm soát kiểu hiển thị, hãy khai báo thẻ quyết định loại thẻ chia sẻ để chọn giữa ảnh nhỏ bên trái và ảnh lớn phía trên. Lưu ý bộ thẻ này dùng thuộc tính name chứ không phải property.
Mô tả nên dài bao nhiêu?
Khoảng 110 tới 160 ký tự là an toàn. Mỗi nền tảng cắt ở độ dài khác nhau và bản hiển thị trên điện thoại còn ngắn hơn bản trên máy tính, nên hãy đặt ý quan trọng nhất ở đầu câu. Viết dài hơn không có hại nhưng phần dôi ra gần như chắc chắn không ai đọc thấy.
Trang không có thẻ Open Graph thì chia sẻ sẽ ra gì?
Nền tảng sẽ tự đoán: lấy thẻ tiêu đề làm tiêu đề, lấy thẻ mô tả thông thường làm mô tả, và chọn một ảnh bất kỳ trong trang làm ảnh xem trước, thường là ảnh đầu tiên đủ lớn. Kết quả thường lộn xộn, hay gặp là lấy trúng logo hoặc một biểu tượng nhỏ, nên tốt nhất là khai báo đầy đủ.
Khung xem trước ở đây có giống hệt bản thật không?
Không, đây là mô phỏng để tham khảo. Mỗi nền tảng có cách cắt ảnh, số dòng mô tả và bố cục riêng, lại thay đổi theo thời gian và khác nhau giữa giao diện di động với máy tính. Hãy dùng nó để phát hiện thẻ thiếu và ảnh hỏng, còn với chiến dịch quan trọng nên kiểm tra bằng công cụ chính thức của nền tảng.
Từ khóa liên quan
- kiểm tra thẻ open graph
- open graph là gì
- og:image kích thước chuẩn
- xem trước link khi chia sẻ facebook
- thẻ meta chia sẻ mạng xã hội
- og:title og:description
- facebook sharing debugger
- linkedin post inspector
- twitter card meta tag
- chia sẻ link không hiện ảnh
- sửa ảnh xem trước facebook
- xóa cache open graph
- og:url và canonical
- kích thước ảnh 1200x630
- meta tag cho zalo
- kiểm tra meta tag của website
- thẻ og bị thiếu
- preview link trước khi đăng
- og:type article website
- công cụ kiểm tra og tags miễn phí
