트위터 카드 미리보기이란?
Twitter Card Preview는 링크가 Twitter/X에서 공유될 때 어떻게 보이는지 확인할 수 있습니다. URL을 입력하거나 제목, 설명, 이미지를 직접 입력하여 게시 전에 Summary 및 Summary with Large Image 카드 유형을 모두 미리 볼 수 있습니다.
미리보기는 Twitter/X 웹 클라이언트와 같은 비율로 렌더링됩니다. Summary with Large Image는 블로그 글이나 제품 출시에 권장되는 2:1 배너, Summary는 카테고리 페이지나 참고 링크에 어울리는 1:1 썸네일입니다. 대응하는 meta 태그도 함께 만들어 주므로, 사이트 <head>에 그대로 붙여 넣으면 됩니다.
사용 방법
- 1단계 — 제목, 설명, 이미지 URL을 입력하거나, 페이지의 HTML을 붙여넣어 기존 twitter: 및 og: 태그를 한 번에 가져옵니다.
- 2단계 — 카드 유형을 선택합니다: Summary(작은 썸네일) 또는 Summary with Large Image(배너 스타일 미리보기).
- 3단계 — 실시간 미리보기로 링크가 Twitter/X 타임라인에서 실제로 어떻게 렌더링되는지 확인하고, 필요하면 전체 트윗 안과 LinkedIn, Facebook, Slack, Discord에서의 모습도 함께 보며 필드를 조정합니다.
사용 시기
- 블로그 글이나 기사 링크를 트윗하기 전에 청중에게 어떻게 보일지 확인할 때.
- 공유 카드가 깨졌거나 로고만 잘려 보이는 기존 랜딩 페이지를 점검할 때.
- meta 태그를 넣기 전에 페이지 성격에 맞는 카드 유형(Summary, Large Image)을 정할 때.
결과
블로그 게시물 링크를 Twitter/X에 공유하려고 합니다. 페이지의 HTML을 붙여넣어 태그를 불러오면 카드에 설명이 누락되어 있고 이미지가 잘려 있다는 것을 확인할 수 있습니다. 두 필드를 수정하고 Large Image 카드가 전문적으로 보이는지 확인한 후 트윗합니다.
자주 묻는 질문
- Summary와 Summary with Large Image는 어떻게 다른가요?
- Summary는 왼쪽에 작은 정사각형 썸네일, 오른쪽에 제목과 설명을 둡니다. Summary with Large Image는 제목 위에 넓은 배너를 얹습니다. 큰 쪽이 타임라인에서 차지하는 면적이 크고 클릭률도 대체로 더 높습니다.
- Twitter/X가 실제로 보여 주는 이미지 크기는 어떻게 되나요?
- Summary with Large Image의 표시 영역은 대략 2:1(예: 1200×600 px)입니다. Twitter는 300×157부터 4096×4096까지 받지만 2:1로 잘리므로, 중요한 글자나 얼굴은 중앙의 2:1 영역 안에 있어야 합니다.
- 이 meta 태그들을 쓰려면 Twitter Developer 승인이 필요한가요?
- 필요 없습니다. Twitter Card meta 태그는 어떤 공개 사이트에서도 승인 없이 동작합니다. 승인을 요구하던 옛 validator는 폐지됐습니다. <head>에 태그를 넣고 공개 배포하면, 다음에 누가 URL을 공유할 때 카드가 나옵니다.
- meta 태그가 맞는데도 Twitter에서 카드가 갱신되지 않아요.
- Twitter는 카드 응답을 매우 적극적으로 캐시합니다. 태그를 고친 뒤에도 옛 카드가 몇 시간 남기도 합니다. URL에 트래킹 접미사(?v=2나 UTM)를 붙여 공유하면 새 fetch를 강제할 수 있습니다. robots.txt에서 Twitterbot을 막은 것도 흔한 원인입니다.
- Open Graph와 Twitter 태그 중 무엇을 써야 하나요?
- twitter:* 태그가 없으면 Twitter는 Open Graph(og:title, og:description, og:image)로 폴백하므로 보통 OG만으로 충분합니다. Twitter가 고를 이미지와 레이아웃을 완전히 통제하고 싶다면 twitter:card와 twitter:image도 함께 넣으세요.