Vì sao bản xem trước liên kết của bạn trông sai, và cách sửa bằng Open Graph

Bạn chia sẻ liên kết đến trang đích mới và bản xem trước hiện lên không có ảnh, tiêu đề là của trang chủ, hoặc một banner từ hai chiến dịch trước. Bản thân trang vẫn ổn. Bản xem trước được tạo từ thứ khác: vài dòng mã trong phần head của trang mà hầu hết mọi người không bao giờ thấy.

Bài viết này trình bày sáu nguyên nhân đứng sau phần lớn các bản xem trước bị lỗi, theo thứ tự nên kiểm tra. Nếu bạn muốn các thẻ được viết sẵn, trình tạo Open Graph miễn phí sẽ tạo chúng, mã hóa đúng cách và kiểm tra theo các giới hạn bên dưới.

Cách một bản xem trước liên kết được tạo ra

Khi một liên kết được dán vào bài đăng hoặc tin nhắn, ứng dụng gửi một crawler đến trang. Crawler đọc các thẻ <meta> trong <head> và vẽ thẻ xem trước từ đó. Các thẻ này đến từ giao thức Open Graph, trong đó có bốn thẻ bắt buộc:

• og:title: tiêu đề của trang như nó nên hiện trên thẻ.
• og:type: loại trang, thường là website hoặc article.
• og:image: hình ảnh.
• og:url: URL chuẩn của trang, mà giao thức gọi là mã định danh vĩnh viễn.

Thêm og:description là bạn có thẻ hoàn chỉnh. Một bộ tối thiểu, đầy đủ trông như sau:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

Nguyên nhân 1: thiếu các thẻ

Nếu không có thẻ og:, mỗi ứng dụng phải dùng bất cứ thứ gì khác nó tìm thấy trên trang, chẳng hạn <title> hoặc ảnh đầu tiên, và việc nó chọn gì là tùy ứng dụng. Đó là lý do một liên kết có thể trông ổn ở nơi này nhưng hỏng ở nơi khác. Cách sửa là khai báo bốn thẻ bắt buộc cùng một mô tả trên mọi trang bạn muốn người khác chia sẻ, không chỉ trang chủ. Một trang sản phẩm được chia sẻ với thẻ của trang chủ sẽ hiện thẻ của trang chủ.

Nguyên nhân 2: URL ảnh là đường dẫn tương đối

Lỗi này dễ bỏ sót, vì trang vẫn trông ổn trong trình duyệt của bạn. content="/images/og.jpg" hoạt động với trình duyệt đang ở trên trang của bạn, nhưng crawler nằm ngoài trang đó. Hãy ghi địa chỉ đầy đủ, bắt đầu bằng https:// và tên miền của bạn. Điều tương tự áp dụng cho og:url.

Nguyên nhân 3: ảnh sai kích thước hoặc sai tỷ lệ

Mỗi nền tảng nêu rõ điều nó muốn, và tình cờ chúng đồng thuận ở ảnh ngang rộng:

• LinkedIn nói trong hướng dẫn làm cho trang web dễ chia sẻ rằng ảnh nên có kích thước ít nhất 1200 × 627 pixel, tỷ lệ khuyến nghị 1.91:1, và không lớn hơn 5 MB.
• Meta trong các thực hành tốt nhất về chia sẻ khuyến nghị ảnh rộng ít nhất 1080 pixel cho màn hình độ phân giải cao, và rộng ít nhất 600 để hiển thị quảng cáo liên kết hình ảnh.
• Thẻ ảnh lớn của X hỗ trợ tỷ lệ 2:1 từ 300 × 157 đến 4096 × 4096 pixel, dưới 5MB, ở định dạng JPG, PNG, WEBP hoặc GIF, và không hỗ trợ SVG, theo tài liệu dành cho nhà phát triển của họ (trang gốc hiện đã chuyển hướng, nên liên kết này đi qua Internet Archive).

Một kích thước phù hợp cho cả ba: 1200 × 630. Nó vượt mức tối thiểu 1200 × 627 của LinkedIn, rộng hơn 1080 của Meta, và tỷ lệ của nó là 1200 ÷ 630 = 1.905, nằm trong sai số 5% so với 2:1 của X. Ảnh vuông hoặc ảnh dọc sẽ bị cắt để vừa thẻ ngang, nên hãy giữ phần quan trọng ở giữa. Máy tính tỷ lệ khung hình cho thấy phần cắt giữa giữ lại những gì.

Cũng khai báo kích thước trong các thẻ. Meta yêu cầu og:image:width và og:image:height để crawler của họ có thể hiển thị ảnh ngay lập tức thay vì tải về và xử lý trước. hướng dẫn cho webmaster của họ nói ngắn gọn: hãy chỉ rõ chiều cao và chiều rộng để ảnh hiển thị đúng ngay lần đầu được chia sẻ.

Nguyên nhân 4: các thẻ được thêm bởi JavaScript

Một số trình tạo website và ứng dụng một trang (single-page app) thêm thẻ meta sau khi trang đã tải, trong trình duyệt. Một crawler đọc HTML mà máy chủ của bạn gửi có thể không bao giờ chạy đoạn mã đó, nên nó không bao giờ thấy các thẻ. Hãy kiểm tra mã nguồn của trang (View Source, không phải inspector, vốn hiển thị trang sau khi script đã chạy). Nếu các thẻ không có trong mã nguồn, crawler có lẽ cũng không thấy chúng. Cách sửa nằm ở cài đặt website hoặc template phía máy chủ của bạn.

Nguyên nhân 5: ký tự đặc biệt làm hỏng thẻ

Một tiêu đề có dấu ngoặc kép bên trong, như The "only" linen you need, sẽ làm đóng thuộc tính content="..." sớm và phần còn lại của tiêu đề bị mất. Các ký tự có ý nghĩa bên trong thuộc tính phải được mã hóa: " thành ", & thành &, và < thành <. Trình duyệt và crawler sẽ đổi chúng về ký tự gốc khi đọc thẻ. Trình tạo sẽ làm việc này cho bạn, và đó là một nửa lý do nên dùng nó.

Nguyên nhân 6: ứng dụng nhớ phiên bản cũ

Bạn đã sửa các thẻ, chia sẻ lại, và thẻ cũ vẫn còn đó. Đó là bộ nhớ đệm. Các ứng dụng lưu lại những gì chúng đã thu thập và tái sử dụng, và hai mạng lớn đều cung cấp công cụ để yêu cầu xem lại mới:

• Facebook: dán URL vào Sharing Debugger của Meta. hướng dẫn cho webmaster của Meta nói rằng nó hiển thị các thẻ crawler đã thu thập, cùng mọi lỗi hoặc cảnh báo, và kích hoạt một lần thu thập mới. Các thực hành tốt nhất của Meta bổ sung rằng nội dung đã thu thập nếu không sẽ cập nhật theo chu kỳ tiêu chuẩn 24 giờ.
• LinkedIn: chạy URL qua Post Inspector. trang trợ giúp của LinkedIn nói rõ về giới hạn: việc làm mới chỉ thay đổi bản xem trước cho bài đăng mới. Các bài đăng đã có URL vẫn giữ bản cũ.

Ghi nhớ lưu ý về LinkedIn này trước khi ra mắt. Hãy kiểm tra bản xem trước trước khi bài đầu tiên được đăng, vì bạn không thể sửa một bài cũ bằng cách sửa trang.

Thẻ twitter:card: một dòng, không phải bốn

X cũng đọc Open Graph. tài liệu tham chiếu cho card markup của họ liệt kê một giá trị dự phòng cho mỗi thẻ: twitter:title lấy từ og:title, twitter:description lấy từ og:description, twitter:image lấy từ og:image, và twitter:image:alt lấy từ og:image:alt. Vì vậy bạn không cần lặp lại mọi thứ. Dòng duy nhất cần thêm là twitter:card: summary_large_image cho ảnh toàn chiều rộng, hoặc summary cho một ô vuông nhỏ. Nếu bỏ qua, cùng tài liệu đó nói X có thể hiển thị thẻ tóm tắt nhỏ thay thế, đó là lý do một ảnh lớn đôi khi hiện thành ảnh thu nhỏ. Tài liệu đó cũng giới hạn tiêu đề ở 70 ký tự, mô tả ở 200 và văn bản thay thế (alt) ở 420.

Kiểm tra trước khi ra mắt trong năm phút

1. Xem mã nguồn của trang và tìm các thẻ og:. Cả bốn thẻ bắt buộc, cộng một mô tả.
2. Kiểm tra og:image và og:url có bắt đầu bằng https://.
3. Mở riêng URL ảnh trong trình duyệt. Ảnh phải tải được, ở kích thước 1200 × 630 hoặc gần đó.
4. Dán URL vào Sharing Debugger và Post Inspector rồi đọc các thẻ xem trước.
5. Chỉ khi đó mới chia sẻ.

Hermoso nằm ở đâu

Hermoso là một tác nhân tiếp thị AI: nó nghiên cứu các quảng cáo đang hiệu quả trên thị trường của bạn, tạo quảng cáo hình ảnh và video đúng thương hiệu, lên lịch bài đăng lên chính các tài khoản của bạn và chạy chiến dịch trả phí trên tài khoản quảng cáo của bạn. Một bản xem trước liên kết tốt là thứ làm cho những bài đăng đó đáng được nhấp. Hermoso hoạt động trong ứng dụng web, hoặc bên trong Claude, ChatGPT và Cursor thông qua máy chủ MCP của nó.

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

Tại sao liên kết của tôi không hiện ảnh trên Facebook hoặc LinkedIn?

Thường là thẻ og:image bị thiếu, dùng đường dẫn tương đối thay vì địa chỉ https:// đầy đủ, hoặc trỏ đến một ảnh quá nhỏ. LinkedIn yêu cầu ít nhất 1200 × 627 pixel. Sau khi sửa, hãy chạy URL qua Sharing Debugger của Meta hoặc Post Inspector của LinkedIn để họ tải lại.

Ảnh Open Graph nên có kích thước bao nhiêu?

1200 × 630 pixel hoạt động với các mạng lớn. Nó đáp ứng mức tối thiểu 1200 × 627 của LinkedIn ở khoảng 1.91:1, rộng hơn 1080 pixel mà Meta khuyến nghị, và gần với tỷ lệ 2:1 mà X hỗ trợ cho thẻ ảnh lớn.

Làm sao để cập nhật bản xem trước liên kết trên LinkedIn?

Sửa các thẻ trên trang, rồi nhập URL vào Post Inspector của LinkedIn. Bản xem trước được làm mới chỉ áp dụng cho bài mới. Các bài đã chứa URL vẫn giữ bản xem trước cũ.

Tôi có cần thẻ twitter: nếu đã có thẻ og: không?

Chỉ cần twitter:card. X sẽ lấy og:title, og:description, og:image và og:image:alt khi các phiên bản twitter: bị thiếu.