Meta Tag OG Preview
Tạo trọn bộ thẻ meta SEO và Open Graph từ một biểu mẫu đơn giản, đồng thời xem trước trực tiếp trang của bạn hiển thị thế nào trên kết quả tìm kiếm Google và dưới dạng thẻ chia sẻ Facebook/Twitter. Dùng công cụ này mỗi khi bạn xây dựng hoặc kiểm tra một trang và muốn có sẵn thẻ <head> cùng bản xem trước mạng xã hội ở cùng một nơi.
Các bước sử dụng
- Trong thẻ Thông tin trang, điền Tiêu đề (Title) và Mô tả (Description) — bộ đếm ký tự (60 / 160) chuyển xanh khi bạn nằm trong độ dài lý tưởng, vàng khi gần giới hạn và đỏ khi quá dài.
- Nhập URL của trang (dùng cho liên kết canonical,
og:urlvà tên miền hiển thị trong bản xem trước) và URL ảnh (og:image) trỏ tới ảnh chia sẻ của bạn (lý tưởng là 1200×630). - Thiết lập các trường bổ sung khi cần: Tên site, og:type (website / article / product / profile), Ngôn ngữ (locale) (ví dụ
vi_VN), Robots (index/noindex, follow/nofollow), Từ khóa, Tác giả, Màu chủ đề, Twitter card (summary_large_image / summary) và Twitter @site. - Quan sát các khung Kết quả Google, Thẻ Facebook / OG và Thẻ Twitter bên phải cập nhật tức thì khi bạn gõ.
- Xem lại khối Thẻ meta đã tạo ở dưới cùng, rồi bấm Sao chép và dán các thẻ vào
<head>của trang.
Mẹo
- Giữ Tiêu đề khoảng 60 ký tự và Mô tả khoảng 160 ký tự để bản xem trước không bị cắt bởi công cụ tìm kiếm và các nền tảng mạng xã hội.
- Dùng og:image cỡ khoảng 1200×630 (tỉ lệ 1.91:1) cho
summary_large_image; bản xem trước tải đúng URL ảnh thật, nên nếu nó hiện trống thì URL sai hoặc không truy cập được. - Chọn Twitter card
summaryđể có bản xem trước vuông nhỏ hơn, hoặcsummary_large_imagecho banner rộng hết chiều ngang — khung Twitter sẽ đổi hình dạng theo lựa chọn. - Các trường tùy chọn để trống (Tác giả, Từ khóa, Twitter @site) sẽ tự động bị bỏ khỏi kết quả, vì vậy cứ để trống những gì bạn không cần.
Câu hỏi thường gặp
Công cụ này có lưu trữ ảnh hay đăng tải gì không?
Không. Nó chỉ tạo mã thẻ <head> từ dữ liệu bạn nhập và hiển thị bản xem trước. Bạn tự sao chép các thẻ và thêm vào trang của mình; og:image chỉ là một URL do bạn lưu trữ ở nơi khác.
Tại sao ảnh hiển thị trống trong bản xem trước Facebook/Twitter?
Bản xem trước tải đúng URL ảnh bạn đã gõ. Nếu trống, có thể URL bị sai chính tả, không truy cập công khai được hoặc bị chặn — hãy mở URL đó trên một tab trình duyệt để kiểm tra xem có tải được không.
Bộ đếm ký tự chính xác đến mức nào?
Chúng đánh dấu các giới hạn thường được khuyến nghị (khoảng 60 cho tiêu đề, 160 cho mô tả). Xanh nghĩa là trong khoảng lý tưởng, vàng là hơi quá, đỏ là dễ bị cắt. Công cụ tìm kiếm đo theo độ rộng pixel, nên hãy xem đây là hướng dẫn hữu ích chứ không phải quy tắc tuyệt đối.