Softonic

Trình tạo thẻ Open Graph

Bước 1 / 2
Tiếp theo

Điền tiêu đề, mô tả, URL chuẩn (canonical), hình ảnh xem trước và og:type, rồi trình tạo này sẽ viết ra các thẻ <meta> Open Graph tương ứng, sẵn sàng để dán vào <head> của trang. Những trường bạn để trống sẽ được bỏ qua, còn dấu ngoặc kép và dấu và (&) trong văn bản của bạn được escape để đánh dấu vẫn hợp lệ. Trình tạo chỉ viết năm thuộc tính og: cốt lõi, không viết thẻ Twitter Card hay thẻ bài viết.

Cách tạo các thẻ OG của bạn

  1. 1

    Chọn og:type

    website cho trang chủ, article cho bài đăng, product cho trang cửa hàng, video.other cho nội dung nhúng. Trường này là văn bản tự do, nên bất kỳ giá trị og:type hợp lệ nào cũng dùng được.

  2. 2

    Điền các trường cốt lõi

    Tiêu đề, mô tả, URL chuẩn và URL hình ảnh tuyệt đối. Bất kỳ trường nào bạn để trống đều bị bỏ khỏi kết quả.

  3. 3

    Tạo các thẻ

    Dấu ngoặc kép và dấu & được escape cho bạn, và bạn nhận một dòng meta cho mỗi trường đã điền.

  4. 4

    Sao chép khối vào phần head

    Dán vào `<head>` của mẫu trang, phía trên bất kỳ thẻ mạng xã hội nào bạn đã có.

Các thẻ mà trình tạo này sinh ra

<meta property="og:type" content="article">
<meta property="og:title" content="Your page title">
<meta property="og:description" content="A one-line description.">
<meta property="og:url" content="https://example.com/post/123">
<meta property="og:image" content="https://example.com/og-image.jpg">

Đó là toàn bộ kết quả. og:type luôn được viết ra, còn og:title, og:description, og:url và og:image chỉ được thêm khi bạn điền chúng. Năm thuộc tính này là những gì Facebook, LinkedIn, Slack, Discord, WhatsApp và X đọc trước tiên, nên chúng bao quát trường hợp phổ biến.

Trình tạo không viết thẻ card twitter:, og:image:width / og:image:height, og:site_name, og:locale hay thẻ article:. Nếu cần, hãy thêm chúng thủ công bên cạnh khối đã tạo.

Các giá trị og:type quan trọng

Loại Khi nào dùng
website Trang chủ, trang đích, nội dung tĩnh
article Bài đăng blog, tin tức, trang biên tập
product Trang chi tiết sản phẩm thương mại điện tử
video.other Nội dung video và nội dung nhúng
profile Trang hồ sơ tác giả hoặc người dùng
music.song Trang từng bài hát riêng lẻ

Các thẻ đáng thêm thủ công

Thẻ Chức năng Giá trị ví dụ
og:site_name Tên của toàn bộ trang web Example
og:locale Ngôn ngữ và khu vực của trang en_US
og:image:width Giúp trình thu thập bố trí thẻ nhanh hơn 1200
og:image:height Giúp trình thu thập bố trí thẻ nhanh hơn 630
twitter:card Bố cục thẻ trên X summary_large_image

X quay lại dùng các thẻ og: khi không có thẻ twitter:, nên một trang chỉ mang năm thuộc tính đã tạo vẫn hiển thị xem trước đúng ở đó. Chỉ thêm thẻ twitter: khi bạn muốn một tiêu đề, mô tả hoặc hình ảnh khác riêng cho X.

Những lỗi phổ biến mà trình tạo này giúp bạn tránh

  • name thay vì property. Thuộc tính Open Graph nằm trong property="og:...". Trình tạo luôn viết đúng thuộc tính.
  • Dấu ngoặc kép và dấu & chưa được escape. Ký tự " hoặc & thô trong tiêu đề của bạn làm hỏng thẻ. Trình tạo escape chúng cho bạn.
  • URL hình ảnh tương đối. Trình thu thập mạng xã hội chỉ chấp nhận URL tuyệt đối. Hãy dán địa chỉ https:// đầy đủ của hình ảnh, vì trình tạo không thêm tên miền của bạn.
  • Kích thước hình ảnh sai. 1200 × 630 px là kích thước an toàn phổ biến. Dưới 200 × 200 px hình ảnh thường bị từ chối.

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

Trong phần <head> của HTML, ở phía trên, tốt nhất là gần <title>. Trình thu thập đọc phần head và thường dừng sớm, nên giữ các thẻ OG ở gần đầu giúp chúng không bị bỏ sót trên các trang rất lớn.

Không. Nó chỉ viết năm thuộc tính og: cốt lõi. X quay lại dùng Open Graph khi không có thẻ twitter:, nên bản xem trước của bạn vẫn hoạt động. Chỉ thêm thẻ twitter: thủ công khi bạn muốn một tiêu đề, mô tả hoặc hình ảnh khác trên X.

1200 × 630 px, JPG hoặc PNG, là kích thước an toàn phổ biến. Hoạt động trên Facebook, LinkedIn, thẻ lớn của X, Slack, Discord và iMessage. Bất kỳ kích thước nào nhỏ hơn 200 × 200 px đều có nguy cơ bị từ chối hoàn toàn.

Hãy cho mỗi phiên bản ngôn ngữ một trang riêng với thẻ og: riêng, và thêm og:locale (ví dụ en_US) cùng og:locale:alternate cho các phiên bản khác một cách thủ công. Trình tạo này không viết thẻ locale cho bạn.

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 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.

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 kiểm tra sơ đồ trang web XML

Kiểm tra XML của sơ đồ trang web trong trình duyệt để tìm lỗi phân tích, vị trí còn thiếu, URL trùng lặp và giá trị trường phổ biến.

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.

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