Vì sao bản xem trước liên kết của bạn trông hỏng (và cách sửa)

Bạn xuất bản một trang, dán link vào Slack, và nhận về một URL trơ trọi không hình ảnh — hoặc tệ hơn, tiêu đề của tháng trước. Bản xem trước liên kết được điều khiển bởi các thẻ meta Open Graph và Twitter, và khi chúng bị thiếu hoặc sai, mọi nền tảng đều rơi về một thứ gì đó xấu xí.

Những thẻ điều khiển bản xem trước

<meta property="og:title" content="Your page title" />
<meta property="og:description" content="One clear sentence." />
<meta property="og:image" content="https://yoursite.com/og.png" />
<meta name="twitter:card" content="summary_large_image" />

Những thủ phạm quen thuộc

• ·og:image là một đường dẫn tương đối — nó phải là một URL tuyệt đối.
• ·Ảnh quá nhỏ; hãy nhắm tới 1200×630.
• ·Thẻ được chèn ở phía client, nên crawler không bao giờ thấy chúng.
• ·Một bộ nhớ đệm đang phục vụ bản xem trước cũ — hãy quét lại để làm mới nó.

Công cụ OG Image kết xuất một tấm thẻ mang thương hiệu cho mọi trang và cho bạn xem trước cách link bung ra trên Slack, iMessage, X và LinkedIn trước khi xuất bản — rồi kỹ năng này nối các thẻ vào repo của bạn để chúng được kết xuất ở phía server.