Xem trước Open Graph & Thẻ mạng xã hội

Xem trước cách một liên kết bung thành thẻ mạng xã hội trên X, LinkedIn, Slack, Discord và Facebook từ tiêu đề, mô tả, URL hình ảnh và URL trang.

Đang tải công cụ…

Xem trước Open Graph & Thẻ mạng xã hộiXem trước Open Graph & Thẻ mạng xã hội cho thấy liên kết của bạn sẽ trông như thế nào khi được chia sẻ trên các nền tảng mạng xã hội. Nhập tiêu đề, mô tả, URL hình ảnh và URL trang, sau đó chuyển đổi giữa X, LinkedIn, Slack, Discord và Facebook để xem bản mô phỏng trực tiếp của thẻ liên kết cho từng nền tảng. Mọi thứ đều được kết xuất trong trình duyệt của bạn — văn bản của bạn không bao giờ được tải lên, và URL hình ảnh được tải thẳng từ máy chủ của nó vào bản xem trước, không thông qua máy chủ của chúng tôi.

Xem trước Open Graph & Thẻ mạng xã hội là gì?

Đây là công cụ xem trước trực quan cho thẻ Open Graph (OG) và thẻ mạng xã hội. Các thẻ meta Open Graph và Twitter Card cho các nền tảng biết phải hiển thị tiêu đề, tóm tắt và hình ảnh nào khi ai đó chia sẻ liên kết của bạn, và công cụ này tái tạo lại thẻ liên kết đó để bạn có thể kiểm tra trước khi xuất bản. Các nhà tiếp thị, người viết nội dung và lập trình viên dùng nó khi ra mắt một bài blog, trang đích hoặc trang sản phẩm để xác nhận tiêu đề không bị cắt, hình ảnh lấp đầy khung và tên miền hiển thị đúng. Chọn một nền tảng bằng nút điều khiển phân đoạn để xem bố cục riêng của nó: X, Facebook và LinkedIn kết xuất một hình ảnh biểu ngữ lớn với tiêu đề và mô tả bên dưới, trong khi Slack và Discord hiển thị một thẻ gọn với thanh nhấn, tên miền và một hình thu nhỏ. Dòng tên miền được suy ra tự động từ URL trang. Công cụ chỉ mô phỏng thẻ từ các giá trị bạn nhập — nó không thu thập dữ liệu trang trực tiếp của bạn cũng như không đọc các thẻ meta hiện có.

Cách sử dụng Xem trước Open Graph & Thẻ mạng xã hội

  1. Nhập tiêu đề trang sẽ xuất hiện làm tiêu đề chính của thẻ.
  2. Viết mô tả (dòng tóm tắt hiển thị dưới tiêu đề).
  3. Dán một URL hình ảnh tuyệt đối (lý tưởng là 1200×630) để tải hình ảnh xem trước.
  4. Nhập URL trang — tên miền hiển thị trên thẻ được suy ra từ đó.
  5. Chuyển đổi giữa X, LinkedIn, Slack, Discord và Facebook để so sánh bố cục của từng nền tảng.
  6. Điều chỉnh tiêu đề và mô tả cho đến khi không có gì bị cắt và thẻ trông ưng ý.

Ví dụ

Thẻ bài blog

Tiêu đề 'How to Bake Sourdough', một mô tả ngắn, một hình ảnh og.png và URL https://blog.example.com/sourdough được kết xuất thành một thẻ biểu ngữ lớn trên X với tên miền blog.example.com phía trên tiêu đề.

Bung thẻ Slack/Discord

Khi chuyển sang Slack, các giá trị tương tự hiển thị dưới dạng thẻ gọn với một thanh nhấn bên trái, tên miền, tiêu đề và một hình thu nhỏ vuông nhỏ bên phải.

Thiếu hình ảnh

Để trống URL hình ảnh và bản xem trước hiển thị một khung giữ chỗ theo đúng tỷ lệ khung hình để bạn vẫn có thể đánh giá khoảng cách và bố cục văn bản.

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

Tôi có thể xem trước những nền tảng nào?
Năm: X (Twitter), LinkedIn, Slack, Discord và Facebook. X, Facebook và LinkedIn được vẽ thành thẻ biểu ngữ hình lớn, trong khi Slack và Discord dùng kiểu bung gọn với thanh nhấn và một hình thu nhỏ. Dùng nút chuyển nền tảng để chuyển giữa chúng ngay lập tức.
Nó có đọc các thẻ Open Graph từ trang trực tiếp của tôi không?
Không. Nó không thu thập hay tải trang của bạn và không phân tích các thẻ meta hiện có. Nó dựng thẻ hoàn toàn từ tiêu đề, mô tả, URL hình ảnh và URL trang mà bạn nhập, nên đây là công cụ xem trước giả định chứ không phải công cụ kiểm định một trang đã xuất bản.
Hình ảnh xem trước đến từ đâu?
Hình ảnh được trình duyệt của bạn tải trực tiếp từ URL hình ảnh mà bạn nhập — nó đi từ máy chủ của chính hình ảnh đến trình duyệt của bạn, không qua máy chủ của chúng tôi. Nếu hình ảnh không xuất hiện, hãy kiểm tra xem URL có tuyệt đối (bắt đầu bằng https://) và truy cập công khai được không.
Vì sao tiêu đề hoặc mô tả của tôi bị cắt trong thẻ?
Các nền tảng mạng xã hội cắt bớt tiêu đề và mô tả dài, và bản xem trước mô phỏng điều đó bằng cách giới hạn số dòng. Nếu văn bản bị cắt ở đây thì nhiều khả năng cũng bị cắt khi chia sẻ, vì vậy hãy rút ngắn cho đến khi vừa vặn.
Dữ liệu của tôi có được gửi đến máy chủ không?
Không. Tiêu đề, mô tả và các URL bạn nhập vẫn nằm trong trình duyệt của bạn và không bao giờ được chúng tôi tải lên, ghi lại hay lưu trữ. Yêu cầu bên ngoài duy nhất là trình duyệt của bạn tải hình ảnh xem trước từ URL bạn cung cấp, đây là hành vi bình thường của trình duyệt.

Công cụ liên quan