example.com
페이지 제목 미리보기
메타 설명이 여기에 표시됩니다.
트위터(X) 카드 미리보기
트위터(X)에 링크를 올렸을 때 보이는 카드 미리보기를 확인하고, 큰 이미지 카드(summary_large_image)용 메타태그 코드를 만들어 드립니다.
example.com
페이지 제목 미리보기
메타 설명이 여기에 표시됩니다.
example.com
페이지 제목 미리보기
메타 설명이 여기에 표시됩니다.
example.com
페이지 제목 미리보기
메타 설명이 여기에 표시됩니다.
메타태그 코드
트위터 카드, og 태그로도 됩니다
트위터(X)는 twitter: 태그가 있으면 그것을, 없으면 오픈그래프(og:) 태그를 읽어 카드를 만듭니다. 큰 이미지 카드를 쓰려면 twitter:card를summary_large_image로 지정하고, 제목·설명·이미지를 채우면 됩니다.
위 도구는 트위터 카드를 포함한 4개 플랫폼 미리보기를 한 번에 보여주고, twitter·og 태그를 함께 담은 코드를 생성합니다.
사용법
- 점검할 페이지 URL을 붙여넣고 "불러오기"를 누릅니다.
- 트위터(X) 카드 미리보기와 누락 태그를 확인합니다.
- 메타태그 코드를 복사해 페이지
<head>에 적용합니다.
자주 묻는 질문
트위터 카드 종류(summary vs summary_large_image)는 뭐가 다른가요?
summary는 작은 정사각 썸네일 카드, summary_large_image는 큰 가로형 이미지 카드입니다. 보통 시각적으로 눈에 띄는 summary_large_image를 많이 씁니다. twitter:card 값으로 지정하며, 이 도구는 큰 이미지 카드 기준으로 미리보기를 보여줍니다.
트위터 전용 태그를 꼭 넣어야 하나요?
twitter:title·twitter:description·twitter:image가 없으면 트위터(X)는 오픈그래프(og:) 태그로 폴백합니다. 따라서 og 태그만 잘 넣어도 카드가 뜨는 경우가 많지만, 트위터에서 다르게 보이고 싶다면 twitter: 태그를 별도로 지정합니다.
twitter:image:alt나 twitter:site 같은 태그도 넣어야 하나요?
필수는 아닙니다. twitter:image:alt는 이미지 대체 텍스트(접근성)에, twitter:site는 사이트 계정(@handle) 표기에 쓰입니다. 기본 카드는 card·title·description·image만으로 뜨며, 필요할 때 보조 태그를 더하면 됩니다.
카드가 바로 갱신되지 않아요.
트위터(X)도 미리보기를 일정 시간 캐시합니다. 태그를 고친 뒤 시간이 지나면 갱신되며, 새 URL로 테스트하면 즉시 새 카드를 볼 수 있습니다.