본문으로 건너뛰기

트위터 카드란?

image

정의​

트위터 카드(Twitter Card)는 트위터(현재는 X로 명칭 변경)에서 링크를 공유할 때 풍부한 미디어 경험을 제공하기 위한 메타데이터 시스템입니다. 일반적으로 트윗에 URL을 포함하면 단순한 링크만 표시되지만, 트위터 카드를 설정하면 이미지, 제목, 설명이 포함된 시각적으로 매력적인 카드 형태로 표시됩니다.

트위터 카드는 HTML 문서의 <head> 섹션에 <meta name="twitter:xxx"> 형식의 태그로 구현됩니다. 오픈 그래프(Open Graph)와 유사하지만, 트위터 플랫폼에 특화된 기능을 제공합니다. 트위터는 4가지 주요 카드 타입을 지원하며, 각각 다른 용도와 레이아웃을 가지고 있습니다: Summary Card(요약 카드), Summary Card with Large Image(큰 이미지 요약 카드), App Card(앱 카드), Player Card(플레이어 카드).

트위터 카드를 올바르게 설정하면 링크의 클릭률이 크게 향상됩니다. 연구에 따르면 이미지가 포함된 트윗은 텍스트만 있는 트윗보다 최대 150% 높은 리트윗률을 보입니다. 특히 뉴스 미디어, 블로그, 전자상거래 사이트에서 트위터 카드는 필수적인 마케팅 도구가 되었습니다. 트위터 카드가 없다면 여러분의 링크는 타임라인에서 쉽게 무시될 수 있습니다.

특징​

  • 다양한 카드 타입: Summary, Summary with Large Image, App, Player 등 콘텐츠 유형에 따라 적합한 카드를 선택할 수 있습니다. 각 타입은 다른 레이아웃과 기능을 제공합니다.
  • 높은 참여도: 트위터 카드가 적용된 링크는 일반 링크보다 클릭률과 리트윗률이 2-3배 높습니다. 시각적 요소가 사용자의 주목을 끌기 때문입니다.
  • 오픈 그래프와 호환: 트위터는 트위터 카드 태그가 없으면 오픈 그래프 태그를 대체로 사용합니다. 하지만 최적의 결과를 위해서는 트위터 카드 전용 태그를 사용하는 것이 좋습니다.
  • 검증 도구 제공: 트위터는 Card Validator라는 공식 도구를 제공하여 카드가 올바르게 표시되는지 미리 확인할 수 있습니다.
  • 리치 미디어 지원: Player Card를 사용하면 동영상과 오디오를 트위터 타임라인에서 직접 재생할 수 있어 사용자 경험이 크게 향상됩니다.

활용 방법​

트위터 카드를 효과적으로 구현하고 활용하는 방법은 다음과 같습니다.

1단계: 카드 타입 선택 콘텐츠의 성격에 맞는 트위터 카드 타입을 선택합니다. 블로그 글이나 기사는 대부분 Summary Card with Large Image가 가장 효과적입니다. 제품 페이지나 포트폴리오도 큰 이미지 카드가 좋습니다. 동영상 콘텐츠는 Player Card를, 모바일 앱 홍보는 App Card를 사용하세요.

2단계: 기본 트위터 카드 태그 추가 웹페이지의 <head> 섹션에 트위터 카드 메타 태그를 추가합니다. 최소한 twitter:card, twitter:title, twitter:description, twitter:image 네 가지는 반드시 포함해야 합니다.

<head>
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="블로그 SEO 완벽 가이드">
  <meta name="twitter:description" content="검색 순위를 올리는 실전 SEO 전략">
  <meta name="twitter:image" content="https://example.com/seo-guide.jpg">
</head>

3단계: 추가 정보 태그 포함 사이트 또는 작성자의 트위터 계정을 추가하면 카드에 표시되어 팔로워를 늘릴 수 있습니다. twitter:site는 웹사이트의 트위터 계정이고, twitter:creator는 콘텐츠 작성자의 계정입니다.

<meta name="twitter:site" content="@zerocoke">
<meta name="twitter:creator" content="@kimcheolsu">

4단계: 이미지 최적화 트위터 카드 이미지는 매우 중요합니다. Summary Card는 최소 120x120px(1:1 비율), Summary with Large Image는 최소 300x157px(2:1 비율)이 필요합니다. 최적 크기는 1200x628px이며, 파일 크기는 5MB 이하여야 합니다. JPG, PNG, WEBP 형식을 지원합니다.

5단계: Card Validator로 테스트 트위터 Card Validator(https://cards-dev.twitter.com/validator)에 URL을 입력하여 카드가 올바르게 표시되는지 확인합니다. 오류가 있으면 즉시 수정하고 다시 테스트합니다. 미리보기를 통해 실제 트위터에서 어떻게 보일지 확인할 수 있습니다.

6단계: 오픈 그래프와 병행 사용 트위터는 트위터 카드 태그를 우선하지만, 없으면 오픈 그래프 태그를 사용합니다. 다른 소셜 플랫폼 최적화를 위해 오픈 그래프도 함께 구현하는 것이 좋습니다. 두 가지를 모두 사용해도 문제없으며, 이는 모범 사례로 권장됩니다.

예시​

예시 1: Summary Card with Large Image (가장 일반적)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>백링크 구축 전략 가이드</title>

  <!-- 트위터 카드 기본 태그 -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@zerocoke">
  <meta name="twitter:creator" content="@kimcheolsu">
  <meta name="twitter:title" content="백링크 구축 전략: 검색 순위 1페이지 진입하기">
  <meta name="twitter:description" content="효과적인 백링크 구축 방법과 피해야 할 실수들을 실전 사례와 함께 알려드립니다.">
  <meta name="twitter:image" content="https://zero-coke.com/img/backlink-strategy.jpg">
  <meta name="twitter:image:alt" content="백링크 구축 전략 인포그래픽">

  <!-- 오픈 그래프도 함께 (다른 플랫폼 대응) -->
  <meta property="og:title" content="백링크 구축 전략: 검색 순위 1페이지 진입하기">
  <meta property="og:description" content="효과적인 백링크 구축 방법과 피해야 할 실수들을 실전 사례와 함께 알려드립니다.">
  <meta property="og:image" content="https://zero-coke.com/img/backlink-strategy.jpg">
  <meta property="og:url" content="https://zero-coke.com/blog/backlink-strategy">
  <meta property="og:type" content="article">
</head>
<body>
  <!-- 페이지 콘텐츠 -->
</body>
</html>

예시 2: Summary Card (작은 이미지)

<head>
  <!-- 작은 썸네일이 어울리는 콘텐츠 -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@mynewssite">
  <meta name="twitter:title" content="오늘의 SEO 뉴스 요약">
  <meta name="twitter:description" content="구글 알고리즘 업데이트, 검색 트렌드, 업계 소식을 한눈에">
  <meta name="twitter:image" content="https://example.com/logo-square.jpg">
  <meta name="twitter:image:alt" content="뉴스 사이트 로고">
</head>

예시 3: Player Card (동영상 콘텐츠)

<head>
  <!-- 동영상이 직접 재생되는 카드 -->
  <meta name="twitter:card" content="player">
  <meta name="twitter:site" content="@videosite">
  <meta name="twitter:title" content="블로그 수익화 완벽 가이드 (15분)">
  <meta name="twitter:description" content="블로그로 월 100만원 벌기. 애드센스부터 제휴 마케팅까지">
  <meta name="twitter:image" content="https://example.com/video-thumbnail.jpg">
  <meta name="twitter:player" content="https://example.com/embed/player?video=123">
  <meta name="twitter:player:width" content="1280">
  <meta name="twitter:player:height" content="720">
  <meta name="twitter:player:stream" content="https://example.com/video-123.mp4">
  <meta name="twitter:player:stream:content_type" content="video/mp4">
</head>

예시 4: App Card (모바일 앱 홍보)

<head>
  <!-- 모바일 앱 다운로드 유도 -->
  <meta name="twitter:card" content="app">
  <meta name="twitter:site" content="@myappcompany">
  <meta name="twitter:title" content="블로그 매니저 - 블로그 통계 한눈에">
  <meta name="twitter:description" content="모바일에서 블로그 성과를 실시간으로 확인하세요">
  <meta name="twitter:image" content="https://example.com/app-icon.png">

  <!-- iOS 앱 정보 -->
  <meta name="twitter:app:name:iphone" content="블로그 매니저">
  <meta name="twitter:app:id:iphone" content="123456789">
  <meta name="twitter:app:url:iphone" content="blogmanager://open">

  <!-- Android 앱 정보 -->
  <meta name="twitter:app:name:googleplay" content="블로그 매니저">
  <meta name="twitter:app:id:googleplay" content="com.example.blogmanager">
  <meta name="twitter:app:url:googleplay" content="blogmanager://open">
</head>

예시 5: 전자상거래 제품 페이지

<head>
  <!-- 제품 페이지 최적화 -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@myshop">
  <meta name="twitter:title" content="프리미엄 무선 이어폰 XYZ-2000 - 50% 특별 할인">
  <meta name="twitter:description" content="노이즈 캔슬링, 30시간 재생. 오늘만 129,000원 → 64,500원">
  <meta name="twitter:image" content="https://shop.example.com/products/xyz-2000-promo.jpg">
  <meta name="twitter:image:alt" content="XYZ-2000 무선 이어폰 제품 사진">

  <!-- 제품 라벨 (선택사항) -->
  <meta name="twitter:label1" content="가격">
  <meta name="twitter:data1" content="64,500원">
  <meta name="twitter:label2" content="재고">
  <meta name="twitter:data2" content="한정 수량">
</head>

예시 6: 뉴스 기사

<head>
  <!-- 뉴스 기사에 최적화된 카드 -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@newsmedia">
  <meta name="twitter:creator" content="@journalist_kim">
  <meta name="twitter:title" content="2024년 SEO 트렌드: AI 검색이 바꾸는 게임">
  <meta name="twitter:description" content="구글의 SGE와 빙의 AI 챗이 검색 환경을 근본적으로 바꾸고 있습니다. SEO 전략도 변화해야 합니다.">
  <meta name="twitter:image" content="https://news.example.com/2024/ai-seo-trends.jpg">
  <meta name="twitter:image:alt" content="AI 검색 엔진 인터페이스">

  <!-- 오픈 그래프 article 태그도 함께 -->
  <meta property="og:type" content="article">
  <meta property="article:published_time" content="2024-03-23T09:00:00+09:00">
  <meta property="article:author" content="김기자">
  <meta property="article:section" content="기술">
</head>

예시 7: 이벤트/웨비나 홍보

<head>
  <!-- 이벤트 홍보 페이지 -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@eventorganizer">
  <meta name="twitter:title" content="2024 SEO 컨퍼런스 | 9월 15일 코엑스">
  <meta name="twitter:description" content="국내외 SEO 전문가 20명의 실전 노하우. 얼리버드 50% 할인 중!">
  <meta name="twitter:image" content="https://event.example.com/seo-conference-2024.jpg">
  <meta name="twitter:image:alt" content="SEO 컨퍼런스 2024 메인 비주얼">

  <!-- 라벨로 주요 정보 강조 -->
  <meta name="twitter:label1" content="일시">
  <meta name="twitter:data1" content="2024년 9월 15일">
  <meta name="twitter:label2" content="장소">
  <meta name="twitter:data2" content="코엑스 컨벤션센터">
</head>

장단점​

장점​

  • 클릭률 대폭 증가: 트위터 카드가 적용된 링크는 일반 링크보다 2-3배 높은 클릭률을 보입니다. 시각적으로 매력적인 카드가 타임라인에서 사용자의 주목을 끌기 때문입니다.

  • 브랜드 인지도 향상: 일관된 이미지와 메시지로 브랜드를 전문적으로 표현할 수 있습니다. 트위터 계정 정보가 카드에 표시되어 팔로워 증가에도 도움이 됩니다.

  • 리치 미디어 경험: Player Card를 사용하면 동영상을 트위터에서 직접 재생할 수 있어, 사용자가 사이트를 방문하지 않아도 콘텐츠를 소비할 수 있습니다. 이는 참여도를 크게 높입니다.

단점​

  • 추가 작업 필요: 오픈 그래프 외에 트위터 카드 태그를 별도로 추가해야 하므로 작업량이 늘어납니다. 특히 여러 소셜 플랫폼을 모두 최적화하려면 메타 태그가 많아집니다.

  • 플랫폼 종속성: 트위터 카드는 트위터(X)에서만 작동합니다. 다른 플랫폼에서는 오픈 그래프나 각 플랫폼의 고유 태그를 사용해야 합니다.

  • 이미지 제작 부담: 효과적인 트위터 카드를 위해서는 고품질 이미지가 필수입니다. 각 콘텐츠마다 적절한 이미지를 제작하거나 선택하는 것은 시간과 리소스가 필요한 작업입니다.

FAQ​

Q: 트위터 카드와 오픈 그래프 중 무엇을 사용해야 하나요? A: 둘 다 사용하는 것이 가장 좋습니다. 트위터는 트위터 카드 태그를 우선 사용하고, 없으면 오픈 그래프 태그를 대체로 사용합니다. 하지만 오픈 그래프는 페이스북, 링크드인, 카카오톡 등 다른 플랫폼에서도 사용되므로 함께 구현하세요. 트위터 카드 태그는 트위터 최적화를 위한 것이고, 오픈 그래프는 범용적인 소셜 미디어 최적화입니다.

Q: 트위터 카드가 표시되지 않습니다. 왜 그런가요? A: 여러 가지 원인이 있을 수 있습니다. 1) 메타 태그 문법 오류 - Card Validator로 확인하세요. 2) 이미지 크기 문제 - 최소 크기 요구사항을 충족하는지 확인하세요. 3) 이미지 접근 불가 - robots.txt가 이미지를 차단하지 않는지 확인하세요. 4) HTTPS 문제 - 가능하면 HTTPS URL을 사용하세요. 5) 캐시 문제 - Card Validator에서 URL을 다시 크롤링하면 해결될 수 있습니다.

Q: Summary Card와 Summary Large Image Card의 차이는? A: Summary Card는 작은 정사각형 썸네일(120x120px 이상)이 텍스트 옆에 표시되는 컴팩트한 형태입니다. 주로 로고나 아이콘에 적합합니다. Summary Large Image Card는 큰 직사각형 이미지(1200x628px 권장)가 카드 상단에 크게 표시됩니다. 블로그 글, 기사, 제품 페이지 등 대부분의 경우 Summary Large Image가 더 효과적입니다. 시각적 임팩트가 크고 클릭률도 훨씬 높습니다.

Q: 트위터 카드를 설정했는데 변경이 반영되지 않습니다. A: 트위터는 카드 정보를 캐싱하므로 변경사항이 즉시 반영되지 않을 수 있습니다. Card Validator(https://cards-dev.twitter.com/validator)에서 URL을 입력하고 "Preview card" 버튼을 클릭하면 최신 정보로 다시 크롤링됩니다. 이미 트윗된 링크의 카드는 업데이트되지 않으므로, 중요한 변경이라면 새로운 트윗을 작성하는 것이 좋습니다. 트위터의 캐시는 일반적으로 7일 정도 유지됩니다.