트위터 카드 검사기

누군가 X(트위터)에서 여러분의 링크를 공유하면, 플랫폼은 페이지의 twitter: 메타 태그를 읽어 미리보기 카드(레이아웃, 제목, 설명, 이미지, 출처 표시)를 구성합니다. 이 태그가 없으면 링크는 카드 없이 맨 URL로 게시됩니다. 아래에 페이지 HTML을 붙여넣으면, 이 도구가 필수 태그 세 개 twitter:card, twitter:title, twitter:description가 있는지 확인하고, 각 태그에서 읽은 값을 보여 주어 게시 전에 깨진 미리보기를 고칠 수 있습니다.

카드를 검증하는 방법

  1. 1

    페이지 HTML을 붙여넣기

    `<head>` 부분만 붙여넣어도 되고 문서 전체를 붙여넣어도 됩니다. 검사기는 `<meta>` 태그만 살펴보므로 다른 마크업은 무시됩니다.

  2. 2

    필수 태그 세 개를 찾습니다

    `twitter:card`, `twitter:title`, `twitter:description`, 즉 모든 카드 유형에 필요한 최소한의 태그입니다. `twitter:image` 같은 다른 태그는 여기서 확인하지 않습니다.

  3. 3

    무엇이 발견됐는지 확인

    일치하는 각 태그가 `content` 속성에서 읽은 값과 함께 표시되어, 문구를 한눈에 검토할 수 있습니다.

  4. 4

    빠진 것을 고치기

    세 개 중 없는 태그는 누락으로 표시됩니다. `<head>`에 추가하고 HTML을 다시 붙여넣어 재확인하세요.

X(트위터) 카드의 네 가지 유형

레이아웃은 twitter:card 값으로 정해집니다. 이 검사기는 입력한 값을 읽습니다. X가 지원하는 네 가지는 다음과 같습니다.

카드 유형 twitter:card 값 일반적인 용도
요약 summary 기사와 일반 콘텐츠 페이지
큰 이미지 요약 summary_large_image 대표 이미지가 있는 블로그 글
플레이어 player 삽입된 오디오 또는 동영상
앱 app 스토어 메타데이터가 있는 앱 설치 링크

필수 태그와 권장 태그

이 도구는 첫 번째 그룹, 즉 X가 모든 카드에 필요로 하는 세 개의 태그만 확인합니다.

필수(여기서 확인):

  • twitter:card, 사용할 레이아웃
  • twitter:title, 제목(X는 대략 처음 70자를 표시)
  • twitter:description, 요약(X는 대략 처음 200자를 표시)

권장(여기서는 확인하지 않지만 추가하는 것이 좋음):

  • twitter:image, PNG, JPG 또는 GIF로 연결되는 https:// 절대 URL. 요약 카드는 최소 300 x 157 px, summary_large_image는 800 x 418 px
  • twitter:site, 브랜드의 @handle
  • twitter:creator, 작성자의 @handle
  • twitter:image:alt, 접근성을 위한 대체 텍스트

흔한 실수

  • Open Graph 태그만 사용. X는 og:title, og:description, og:image로 대체하므로 링크는 여전히 펼쳐지지만, twitter:card가 없으면 레이아웃은 기본적으로 작은 요약이 됩니다. 가능하면 두 세트를 모두 넣으세요.
  • 이미지가 너무 작음. 300 x 157 px 미만이면 카드가 텍스트만 남도록 축소될 수 있습니다.
  • 상대 경로 이미지 URL. twitter:image는 절대 URL(https://...)이어야 하며, 상대 경로는 무시됩니다.
  • name= 대신 property=. X와 이 검사기는 트위터 태그를 name="twitter:..."에서 읽습니다. property="twitter:..."는 Open Graph에서는 작동하지만 이 태그에는 쓰이지 않습니다.
  • 설명이 너무 김. 약 200자를 넘으면 X가 잘라내며, 대개 단어 중간에서 끊깁니다.

실제 카드를 확인하는 방법

X는 공식 Card Validator(cards-dev.twitter.com/validator)를 2023년에 종료했으므로, 실시간 미리보기를 보여 주는 공식 페이지는 더 이상 없습니다. 이 도구는 필수 태그가 있고 읽히는지 확인합니다. 실제 카드를 보려면 링크를 게시물 초안이나 자신에게 보내는 다이렉트 메시지로 공유하거나, 서드파티 링크 미리보기 확인 도구를 사용하세요. 태그를 고친 뒤에도 X가 계속 오래된 이미지를 보여 준다면, 이미지 URL에 ?v=2 같은 쿼리 문자열을 추가해 캐시를 우회하세요.

자주 묻는 질문

아니요. 붙여넣은 HTML을 읽어 필수 twitter: 태그 세 개가 있는지 확인하고 각 값을 보여 줍니다. 카드를 그리거나 실제 페이지를 가져오지는 않습니다. X는 자체 Card Validator를 2023년에 종료했으므로, 실제 카드를 확인하는 확실한 방법은 링크를 게시물 초안이나 자신에게 보내는 다이렉트 메시지로 공유하는 것입니다.

X는 og:title, og:description, og:image로 대체하므로 링크는 여전히 펼쳐지지만, twitter:card가 없으면 레이아웃은 기본적으로 작은 요약이 됩니다. 큰 이미지 카드를 원한다면 twitter:card를 명시적으로 summary_large_image로 설정해야 합니다. 참고로 이 검사기는 twitter: 태그만 확인하고 og: 태그는 확인하지 않습니다.

검사기는 이름 뒤에 작은따옴표나 큰따옴표로 쓰인 content 속성과 함께 name="twitter:..."를 찾습니다. 태그가 name= 대신 property="twitter:..."를 쓰거나 content를 name보다 앞에 두면, HTML이 유효해도 패턴이 일치하지 않습니다. name="..." content="..." 순서로 바꾸고 다시 확인하세요.

이 검사기는 대소문자에 관계없이 이름을 인식하므로 twitter:Card도 여기서 감지됩니다. 그래도 소문자(twitter:card)로 쓰세요. X가 문서에 정의하고 기대하는 형식이기 때문입니다.

간단히 말하면 예. 검사는 저희 서버에서 실행되므로, 붙여넣은 HTML은 그곳으로 전송되어 검사된 뒤 폐기됩니다. 저희는 도구가 사용됐다는 익명 기록만 남기며 여러분의 마크업은 저장하지 않고, 브라우저에서 동작하는 오프라인 도구가 아닙니다.

관련 도구

이 도구는 다른 언어로도 제공됩니다