Softonic

Xem trước Open Graph

Bước 1 / 2
Tiếp theo

Nhập tiêu đề, mô tả, tên trang, URL trang và URL ảnh, rồi công cụ này sẽ dựng một thẻ chia sẻ Facebook và X (Twitter) trực tiếp, cập nhật theo từng phím gõ. Đây là một không gian thử nghiệm thiết kế cho các thẻ Open Graph của bạn: không có gì bị truy cập hay xuất bản, nên bạn có thể tập dượt độ dài tiêu đề và cách cắt ảnh cho đến khi thẻ trông ưng ý, rồi sao chép câu chữ vào các thẻ og: thật của mình.

Cách bản xem trước được dựng nên

  1. 1

    Nhập các trường của thẻ

    Tiêu đề, tên trang, mô tả, URL trang và URL ảnh. Mỗi trường tương ứng với một thẻ og:.

  2. 2

    Xem các thẻ cập nhật

    Bản dựng Facebook và X được vẽ lại khi bạn nhập, sử dụng đúng bố cục và cách cắt chữ thật của mỗi nền tảng.

  3. 3

    Thêm URL ảnh

    Dán một địa chỉ ảnh https tuyệt đối để thấy cách cắt; để trống thì thẻ Facebook sẽ hiển thị ảnh giữ chỗ.

  4. 4

    Sao chép vào các thẻ og: của bạn

    Khi thẻ đọc lên thấy ổn, hãy chuyển đúng tiêu đề, mô tả và ảnh đó vào các thẻ meta của trang.

Mỗi trường trở thành gì

Trường Thẻ Open Graph Hiển thị trên thẻ chia sẻ
Tiêu đề og:title Tiêu đề đậm, cắt còn một dòng
Mô tả og:description Tiêu đề phụ màu xám, giới hạn hai dòng
Tên trang og:site_name Nhãn nhỏ phía trên tiêu đề Facebook
URL og:url Hiển thị tên miền; do phần host quyết định
URL ảnh og:image Cắt theo tỷ lệ 1.91:1 trên cả hai thẻ dựng

Công cụ đọc phần host từ URL bạn nhập, nên https://blog.example.com/post sẽ hiển thị blog.example.com trên thẻ.

Hai thẻ, và điểm khác nhau

  • Facebook hiển thị ảnh cắt theo tỷ lệ 1.91:1, rồi tên miền viết hoa nhỏ, tiêu đề đậm trên một dòng, và mô tả tối đa hai dòng. Khi không có URL ảnh, nó dựng một ảnh giữ chỗ màu xám, đây là nguyên nhân phổ biến nhất khiến một lượt chia sẻ trở nên phẳng và thiếu ảnh ngoài thực tế.
  • X (Twitter) hiển thị thẻ summary_large_image bo góc: ảnh cắt theo tỷ lệ 2:1, tên miền, tiêu đề và mô tả bên dưới.

Chỉnh câu chữ cho vừa khung

  • Tiêu đề: nhắm tới 60 đến 70 ký tự. Facebook cắt khoảng 88 và X khoảng 70, nên tiêu đề trong vòng 70 ký tự sẽ nguyên vẹn ở mọi nơi.
  • Mô tả: giữ dưới khoảng 160 ký tự; thẻ giới hạn còn hai dòng và phần còn lại bị loại bỏ.
  • Ảnh: thiết kế ở 1200 x 630 px để cách cắt 1.91:1 gọn gàng, và đặt trên một URL https:// tuyệt đối. Đường dẫn tương đối sẽ không tải được khi các thẻ lên trực tuyến.
  • Tên trang: ngắn gọn và chỉ thương hiệu, không kèm khẩu hiệu. Nó nằm phía trên tiêu đề dưới dạng một nhãn.

Danh sách kiểm tra ngày xuất bản

  • [ ] Tiêu đề dưới 70 ký tự
  • [ ] Mô tả dưới 160 ký tự
  • [ ] URL ảnh là tuyệt đối (https, không phải // hay đường dẫn tương đối)
  • [ ] Ảnh thiết kế ở 1200 x 630 px, JPG hoặc PNG
  • [ ] URL khớp với canonical mà bạn sẽ xuất bản
  • [ ] Câu chữ đã được sao chép vào các thẻ og: thật, rồi kiểm tra lại bằng trình kiểm tra

Câu hỏi thường gặp

Không. Bạn tự nhập các trường của thẻ và công cụ dựng thử xem chúng sẽ trông ra sao. Đây là một không gian thử nghiệm thiết kế, không phải trình thu thập dữ liệu, nên nó hoạt động cả khi trang chưa lên mạng. Để đọc các thẻ đã có sẵn trên một trang, hãy dán HTML của trang đó vào Open Graph Checker.

Một thẻ Facebook và một thẻ ảnh lớn của X (Twitter). Chúng dùng cùng các giá trị Open Graph, nên một thẻ đọc lên thấy ổn ở đây là một tham chiếu tốt cho LinkedIn, Slack, Discord và các ứng dụng khác mở rộng liên kết từ chính các thẻ og: đó, mỗi nền tảng có giới hạn hơi khác nhau.

Vì trường ảnh đang để trống, hoặc URL bạn dán không phải một địa chỉ https tuyệt đối hợp lệ. Hãy thêm một URL ảnh https đầy đủ và phần cắt ảnh sẽ xuất hiện ngay. Khi lên trực tuyến, hãy giữ tệp dưới 5 MB và phục vụ với một content-type image/* công khai.

Mỗi nền tảng cắt ở một điểm khác nhau (Facebook gần 88 ký tự, X gần 70), và thẻ dựng thử phản ánh điều đó. Hãy rút tiêu đề còn 60 đến 70 ký tự và nó sẽ nguyên vẹn trên mọi nền tảng.

Công cụ liên quan

Trình kiểm tra độ dài mô tả siêu dữ liệu

Đo mô tả meta theo ký tự và pixel ước tính, so sánh các mốc biên tập và xem bố cục minh họa trên máy tính lẫn thiết bị di động.

Trình trích liên kết bên ngoài

Dán mã HTML thô, tùy chọn nhập URL gốc và nhận danh sách sạch, không trùng lặp tất cả liên kết ngoài http/https trong mã để phục vụ kiểm toán liên kết và đánh giá SEO.

Trình kiểm tra header bảo mật HTTP

Dán header phản hồi HTTP và kiểm tra cục bộ HSTS, CSP, clickjacking, MIME, referrer cùng chính sách cross-origin.

Trình mô phỏng kết quả Google

Xem snippet gần đúng theo kiểu Google với giới hạn ký tự cho điện thoại và máy tính. Bản nháp chỉ ở trong phiên trình duyệt này.

Bộ đếm tần suất từ

Tìm các từ xuất hiện lặp lại nhiều nhất trong văn bản, kèm số lần và phần trăm mật độ. Hữu ích cho biên tập, kiểm tra SEO và audit nội dung.

Trình tạo schema FAQ

Tạo mã đánh dấu JSON-LD FAQPage từ các cặp câu hỏi và câu trả lời để trang của bạn đủ điều kiện xuất hiện trong kết quả nhiều định dạng và ô trả lời của Google.

Công cụ này có phiên bản bằng các ngôn ngữ khác