OG & Twitter Card 생성기 — 메타 태그 빌더, 감사 및 미리보기
폼에서 바로 붙여넣을 수 있는 Open Graph 및 Twitter Card <meta> 태그를 빌드하거나, 기존 <head>를 붙여넣어 누락된 태그, 제목·설명 길이, twitter:card 유효성을 감사한 후, 실제 스타일을 재현한 트위터/X, 페이스북, 링크드인, 디스코드 링크 카드 모형으로 미리보기까지 가능합니다.
🔒 전적으로 귀하의 브라우저에서 처리됩니다. 여기에 입력하는 어떤 것도 업로드되지 않습니다.
결과
Open Graph 및 Twitter Card 메타 태그는 링크가 Slack, iMessage, 트윗, 디스코드 채널에 붙여넣어지는 순간 어떻게 보일지 결정합니다. 즉, 플랫폼이 본문 텍스트에서 긁어모은 것이 아니라 페이지 자체의 <head>가 선택한 제목, 설명, 이미지입니다. 이 도구는 단순한 템플릿 채우기가 아닌 빌더이자 감사 도구입니다. 빌드 모드에서는 제목, 설명, 이미지 URL, 정식 URL, 콘텐츠 유형, 트위터 카드 유형을 입력하면 페이지 <head>에 바로 붙여넣을 수 있는 정확한 <meta property="og:..."> 및 <meta name="twitter:..."> 태그 블록을 구성하며, 빈 필드는 내용이 비어 있는 태그를 생성하지 않고 건너뜁니다.
감사 모드에서는 기존 <head> 마크업이나 페이지 전체 HTML을 붙여넣으면 도구가 브라우저의 기본 DOMParser로 파싱하여 이미 존재하는 모든 og: 및 twitter: 메타 태그를 추출한 후 실제로 중요한 검사를 실행합니다. 흔히 요구되는 네 가지 태그(og:title, og:description, og:image, og:url)가 누락되면 표시됩니다. og:title은 일부 플랫폼에서 잘리기 시작하는 약 60자 지점과 대부분의 플랫폼에서 잘리는 약 90자 지점을 기준으로 측정됩니다. og:description은 대부분의 플랫폼이 잘라내는 약 155~200자 범위를 기준으로 측정됩니다. twitter:card는 트위터의 카드 유효성 검사기가 허용하는 네 가지 실제 값(summary, summary_large_image, app, player)과 대조하여 확인되며, 그 외의 값이면 표시됩니다. 그리고 중복 태그(동일한 속성이 두 번 선언되는, 놀라울 정도로 흔한 복사-붙여넣기 버그)는 이름을 구체적으로 지적합니다.
이미지 크기는 정직하게 다룹니다. 이 도구는 이미지를 가져오지 않고서는 실제 픽셀 크기를 확인할 수 없으며, 이 사이트의 '외부 요청 없음' 정책에 따라 고의로 절대 가져오지 않습니다. HTML에 og:image:width 및 og:image:height가 이미 선언되어 있다면 그 선언된 숫자를 널리 권장되는 1200×630 최소 기준에 맞춰 확인하고, 그렇지 않으면 가짜 통과/실패 대신 명확한 안내 메모를 제공합니다. 두 모드 모두 동일한 네 가지 링크 미리보기 모형을 렌더링합니다. 트위터/X(twitter:card 값에 따라 간결한 '요약' 썸네일 레이아웃과 전체 너비 'summary_large_image' 레이아웃을 전환), 페이스북, 링크드인, 디스코드이며, 각각 로고만 다른 하나의 상자가 아니라 각 플랫폼의 실제 타이포그래피와 레이아웃 규칙에 맞춰 스타일을 재현했습니다. 또한, 모든 모형은 실제 플랫폼이 시간이 지나며 미리보기 크롬을 변경할 수 있고, 이 도구는 이를 확인하기 위해 플랫폼을 가져오거나 스크래핑하지 않으므로 계획 목적의 예시 근사치임을 명확히 표시합니다.