트위터 카드 메타태그를 만드는 순서
- 카드 형식을 고릅니다. 가로 이미지를 크게 보여주려면
summary_large_image, 작은 정사각형 썸네일과 요약을 함께 보여주려면summary를 선택합니다. - 공유될 페이지 제목과 설명을 입력합니다. 검색 제목을 그대로 복사하기보다 X 게시물에서 링크 내용을 오해하지 않을 정도로 구체적으로 적습니다.
- 페이지 URL과 이미지 URL을 넣습니다. 둘 다
https://로 시작하는 공개 절대 URL이어야 합니다. 로그인·쿠키·사내망이 필요한 주소는 미리보기 크롤러가 읽지 못할 수 있습니다. - 이미지 대체 설명을 적습니다. 이미지 안의 글자를 반복하기보다 이미지가 전달하는 핵심 장면과 정보를 짧게 설명합니다.
- 생성 코드를 HTML의
<head>에 한 번만 넣습니다. CMS나 SEO 플러그인이 같은 태그를 이미 출력한다면 중복 값을 먼저 정리하세요.
생성되는 Twitter Card·Open Graph 태그
| 태그 | 역할 | 확인할 점 |
|---|---|---|
twitter:card | 요약형 또는 큰 이미지형 카드 선택 | summary와 summary_large_image 중 하나 |
twitter:title | X 링크 미리보기 제목 | 실제 페이지 내용과 일치 |
twitter:description | X 링크 미리보기 설명 | 과장·누락 없이 핵심 행동 설명 |
twitter:image | X 미리보기 이미지 | 공개 HTTPS 절대 URL |
twitter:image:alt | 이미지 대체 설명 | 이미지의 의미를 텍스트로 설명 |
twitter:site·twitter:creator | 사이트·작성자 계정 표기용 값 | 실제 운영 계정만 @아이디 형식으로 입력 |
og:title·og:description·og:image·og:url | 다른 SNS와 메신저의 공통 미리보기 정보 | Twitter 태그와 서로 다른 제목·이미지를 내보내지 않는지 확인 |
summary와 summary_large_image 선택 기준
summary_large_image는 대표 이미지 자체가 중요한 뉴스, 블로그, 상품 소개에 어울립니다. summary는 로고나 아이콘과 함께 제목·설명을 먼저 읽게 할 때 유용합니다. 이 도구의 카드는 입력값을 확인하기 위한 근사 미리보기이며 실제 X 앱의 크기·자르기·문구 생략을 보증하지 않습니다.
큰 이미지형에는 가로형 원본, 요약형에는 정사각형에서도 핵심이 남는 원본을 준비하세요. 인물 얼굴, 가격, 날짜, 로고처럼 잘리면 의미가 달라지는 요소는 가장자리에서 떨어뜨리고 실제 모바일·데스크톱 게시 화면을 모두 확인합니다.
배포 후 5분 검증 순서
- 공개 페이지의 ‘페이지 소스 보기’에서
twitter:card와 제목·설명·이미지 태그가 실제 서버 응답에 있는지 확인합니다. JavaScript 실행 뒤에만 생기는 값은 크롤러가 놓칠 수 있습니다. - 같은 이름의 태그가 여러 번 나오지 않는지 찾습니다. 테마, 플러그인, 프레임워크가 각각 메타태그를 만들면 플랫폼이 원하지 않는 값을 고를 수 있습니다.
- 페이지 URL과 이미지 URL을 시크릿 창에서 열어 로그인 없이 200 응답이 나오는지 확인합니다. 리디렉션이 많거나 접근이 차단되면 최종 주소를 사용합니다.
robots.txt, 방화벽, 봇 차단 설정이 X의 링크 수집을 막지 않는지 확인합니다. 이미지도 페이지와 별도로 외부 접근이 가능해야 합니다.- 마지막으로 실제 X 작성 화면에 공개 URL을 붙여 카드, 자르기, 제목과 설명을 확인합니다. 기존 공유 캐시가 남아 있을 수 있으므로 코드 변경 직후의 화면만으로 성공을 단정하지 않습니다.
미리보기가 나오지 않을 때
- 태그가 브라우저 개발자 도구에만 보임: 클라이언트 렌더링 전에 서버 HTML의
<head>에서도 출력하도록 바꿉니다. - 이미지만 비어 있음: 상대경로, HTTP 주소, 로그인 필요, 이미지 핫링크 차단과 응답 형식을 확인합니다.
- 옛 제목이 보임: 중복 태그와 CDN·플랫폼 캐시를 확인합니다. 검수 도구가 캐시 삭제를 보장한다고 가정하지 마세요.
- 원하는 카드와 다름: X 화면은 서비스 업데이트와 기기별 레이아웃에 따라 달라질 수 있습니다. 생성기 미리보기보다 실제 게시 화면을 최종 기준으로 삼습니다.
보안·정책상 확인할 점
미리보기 이미지는 공개 URL이므로 개인정보, 내부 대시보드, 미공개 상품 이미지가 포함되지 않았는지 확인하세요. X의 현행 개발자 정책은 카드 자산을 HTTPS로 제공하고 오해를 유발하거나 문맥과 무관한 URL·미디어를 사용하지 않도록 안내합니다. 카드 제목과 이미지로 다른 목적지를 가장하지 말고 실제 링크 내용과 일치시켜야 합니다.
공식 기준 확인: X Developer Policy의 X Cards 항목과 X 개발자 문서 포털을 2026년 7월 26일 확인했습니다. 구형 Website Cards 문서 URL은 현재 포털로 이동하므로, 고정 규격이나 검수기 동작을 영구 보장하지 않고 실제 공개 URL 테스트를 우선합니다.