Blog
April 2, 2026

Open Graph Tags là gì? Hướng dẫn về Link Preview và Chia sẻ Xã hội

Khi bạn chia sẻ một liên kết trên Facebook, LinkedIn, Slack, hoặc Twitter, một thẻ preview thường xuất hiện — với tiêu đề, mô tả và hình ảnh. Những bản xem trước này không phải là phép thuật. Chúng được kiểm soát bởi các thẻ Open Graph (OG) trong HTML của trang của bạn.

Làm đúng các thẻ Open Graph có nghĩa là các liên kết được chia sẻ của bạn trông chuyên nghiệp và nhận được nhiều lần nhấp chuột hơn. Làm sai có nghĩa là preview xấu xí, hình ảnh bị thiếu hoặc văn bản dự phòng chung chung.

Open Graph Protocol là gì?

Open Graph là giao thức được tạo bởi Facebook vào năm 2010 cho phép các trang web xác định cách chúng xuất hiện khi được chia sẻ trên các nền tảng xã hội. Nó sử dụng các thẻ meta trong phần HTML <head>:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short summary of the page" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />

Khi một nền tảng xã hội phát hiện một URL được chia sẻ, nó sẽ tìm nạp trang và đọc các thẻ này để tạo thẻ preview.

Thẻ Open Graph Cần thiết

og:title

Tiêu đề được hiển thị trong thẻ preview. Giữ nó dưới 60 ký tự để hiển thị tốt nhất trên các nền tảng.

<meta property="og:title" content="How to Create Branded Short Links" />

Mẹo:

  • Đừng chỉ sao chép thẻ <title> của bạn — tối ưu hóa để tăng sự tham gia xã hội
  • Đặt những từ quan trọng ở phía trước
  • Tránh clickbait (các nền tảng có thể phạt)

og:description

Tóm tắt ngắn được hiển thị bên dưới tiêu đề. Nhắm mục tiêu 120-160 ký tự.

<meta property="og:description" content="Create custom branded short links with click tracking and analytics. Set up in 5 minutes." />

og:image

Hình ảnh được hiển thị trong preview. Đây là thẻ có ảnh hưởng lớn nhất — các bài viết có hình ảnh nhận được tương tác cao hơn đáng kể.

<meta property="og:image" content="https://example.com/social-preview.jpg" />

Yêu cầu hình ảnh theo nền tảng:

Nền tảngKích thước được đề xuấtTỷ lệ khung hình
Facebook1200 × 630 px1.91:1
Twitter1200 × 628 px1.91:1
LinkedIn1200 × 627 px1.91:1
Slack500 × 500 px tối thiểuBất kỳ

Sử dụng 1200 × 630 pixel để bao gồm tất cả các nền tảng.

og:url

URL chính tắc cho trang. Điều này cho các nền tảng biết URL nào cần hiển thị và giúp ngăn chặn nội dung trùng lặp.

<meta property="og:url" content="https://example.com/page" />

og:type

Mô tả loại nội dung. Các giá trị phổ biến:

  • website — cho các trang chủ và các trang chung
  • article — cho các bài viết trên blog và bài viết
  • product — cho các trang sản phẩm

Thẻ Twitter Card

Twitter sử dụng các thẻ meta của riêng nó (ngoài Open Graph) cho các thẻ preview:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Nếu các thẻ Twitter card không có, Twitter sẽ quay lại các thẻ Open Graph. Hầu hết các trang web đặt cả hai để kiểm soát tối đa.

Cách các nền tảng xã hội tìm nạp dữ liệu Open Graph

Khi bạn chia sẻ một URL:

  1. 1
    Trình thu thập dữ liệu của nền tảng truy cập URL
  2. 2
    Nó đọc HTML <head> cho các thẻ OG
  3. 3
    Nó lưu vào bộ đệm dữ liệu thẻ preview
  4. 4
    Các lần chia sẻ tiếp theo của cùng một URL sử dụng phiên bản được lưu vào bộ đệm

Quan trọng: Các thay đổi đối với các thẻ OG không được phản ánh ngay lập tức. Các nền tảng lưu vào bộ đệm nặng nề, vì vậy bạn có thể cần phải xóa bộ đệm theo cách thủ công (xem gỡ lỗi bên dưới).

Điều gì sẽ xảy ra nếu bạn chia sẻ một URL mà bạn không kiểm soát — hoặc bạn muốn các thẻ preview khác nhau cho các ngữ cảnh khác nhau?

Tính năng custom social previews của Linkly cho phép bạn ghi đè dữ liệu Open Graph cho bất kỳ liên kết ngắn nào:

  • Đặt tiêu đề, mô tả và hình ảnh tùy chỉnh
  • Các bản xem trước khác nhau cho các đối tượng khác nhau
  • Không cần phải chỉnh sửa HTML của trang đích
  • Hoạt động cho bất kỳ URL nào, ngay cả các trang bạn không sở hữu

Điều này đặc biệt hữu ích khi:

  • Chia sẻ nội dung của bên thứ ba với thương hiệu của bạn
  • Kiểm tra A/B các thẻ preview khác nhau để xem cái nào nhận được nhiều lần nhấp chuột hơn
  • Trang đích có các thẻ OG kém hoặc bị thiếu

Gỡ lỗi Open Graph Tags

Facebook Sharing Debugger

Công cụ của Facebook cho phép bạn xem trước và làm mới dữ liệu OG được lưu vào bộ đệm:

  1. 1
    Nhập URL của bạn
  2. 2
    Nhấp vào Debug
  3. 3
    Xem Facebook đọc những gì từ trang của bạn
  4. 4
    Nhấp vào Scrape Again để xóa bộ đệm

Twitter Card Validator

Trình xác thực của Twitter hiển thị cách thẻ của bạn sẽ xuất hiện và làm nổi bật các vấn đề.

LinkedIn Post Inspector

Công cụ của LinkedIn xem trước thẻ liên kết của bạn và làm mới dữ liệu được lưu vào bộ đệm.

Mẹo chung

  • Kiểm tra nguồn: Xem nguồn trang của bạn và tìm kiếm og: để xác minh các thẻ có mặt
  • Sử dụng URL tuyệt đối: URL hình ảnh phải là tuyệt đối (bắt đầu bằng https://), không tương đối
  • Kiểm tra sau các thay đổi: Luôn xóa bộ đệm nền tảng sau khi cập nhật các thẻ OG
  • Kiểm tra hiển thị JavaScript: Một số nền tảng không thể thực thi JavaScript, vì vậy các thẻ OG phải ở trong phản hồi HTML ban đầu

Những sai lầm phổ biến

  1. 1
    Thiếu og:image: Các bài viết không có hình ảnh nhận được ít nhất 2-3 lần nhấp chuột hơn
  2. 2
    Hình ảnh quá nhỏ: Sử dụng ít nhất 1200 × 630 pixel
  3. 3
    Tỷ lệ khung hình sai: Hình ảnh bị cắt một cách khó xử
  4. 4
    Bộ đệm cũ: Cập nhật các thẻ OG của bạn nhưng quên xóa bộ đệm nền tảng
  5. 5
    Thẻ trùng lặp: Nhiều thẻ OG cùng loại gây ra hành vi không thể dự đoán
  6. 6
    Hình ảnh HTTP: Sử dụng HTTPS cho URL hình ảnh — một số nền tảng chặn hình ảnh HTTP
  7. 7
    URL tương đối: Trình thu thập dữ liệu nền tảng không thể giải quyết các đường dẫn tương đối

Open Graph cho các loại nội dung khác nhau

Bài viết trên blog

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-04-02" />
<meta property="article:author" content="Your Name" />

Sản phẩm

<meta property="og:type" content="product" />
<meta property="product:price:amount" content="29.99" />
<meta property="product:price:currency" content="USD" />

Video

<meta property="og:type" content="video.other" />
<meta property="og:video" content="https://example.com/video.mp4" />

Kết luận

Các thẻ Open Graph là một bổ sung nhỏ cho HTML của bạn có tác động lớn đến cách nội dung của bạn xuất hiện trên toàn bộ web xã hội. Làm cho chúng đúng — với tiêu đề, mô tả và hình ảnh phù hợp — trực tiếp tăng tỷ lệ nhấp chuột khi các liên kết của bạn được chia sẻ.

Muốn custom link preview mà không cần chỉnh sửa HTML? Bắt đầu với Linkly và tùy chỉnh thẻ social preview cho bất kỳ liên kết ngắn nào — đặt tiêu đề, mô tả và hình ảnh của riêng bạn.

Nhận ngay 100 liên kết rút gọn và theo dõi 500 lượt nhấp chuột mỗi tháng hoàn toàn miễn phí.

Bắt đầu miễn phí

Không cần thẻ tín dụng

Khối lượng giao dịch lớn? Hãy liên hệ với đội ngũ của chúng tôi.