읽는 데 4분
링크 미리보기가 깨져 보이는 이유(그리고 고치는 법)
Slack, iMessage, X에 링크를 붙였을 때 미리보기가 비어 있거나 잘못 나오는 건 대개 몇 개의 Open Graph 태그 때문입니다. 여기 체크리스트를 정리했습니다.
페이지를 배포하고 Slack에 링크를 붙였는데 이미지 없는 맨 URL만 뜨거나, 더 심하게는 지난달 제목이 나옵니다. 링크 미리보기는 Open Graph와 Twitter 메타 태그로 만들어지며, 이들이 없거나 잘못되면 모든 플랫폼이 볼품없는 형태로 대체합니다.
미리보기를 좌우하는 태그
<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" />흔한 원인
- og:image가 상대 경로인 경우 — 반드시 절대 URL이어야 합니다.
- 이미지가 너무 작은 경우 — 1200×630을 목표로 하세요.
- 태그가 클라이언트 측에서 주입되어 크롤러가 전혀 보지 못하는 경우.
- 캐시가 예전 미리보기를 내보내는 경우 — 다시 스크래핑해 새로고침하세요.
OG Image 도구는 모든 페이지에 브랜드가 적용된 카드를 렌더링하고, 배포 전에 Slack, iMessage, X, LinkedIn에서 언펄이 어떻게 보일지 미리 보여줍니다 — 그런 다음 스킬이 태그를 레포지토리에 연결해 서버 측에서 렌더링되도록 합니다.