","err_audit_input_required":"먼저 메타 태그가 포함된 HTML을 붙여넣으세요.","mockups_heading":"링크 미리보기로 표시되는 방식","mockups_disclaimer":"이 4개의 카드는 계획 목적으로만 제작된 각 플랫폼의 실제 링크 미리보기 크롬에 대한 대략적인 스타일입니다. 이는 Twitter/X, Facebook, LinkedIn 또는 Discord의 라이브 가져오기 또는 스크린샷이 아니며 플랫폼은 시간이 지남에 따라 자체 미리보기 UI 스타일을 변경할 수 있습니다.","mockup_twitter_heading":"트위터 / 엑스","mockup_facebook_heading":"페이스북","mockup_linkedin_heading":"링크드인","mockup_discord_heading":"불화","mockup_image_alt":"링크 미리보기 이미지","mockup_no_image":"제공된 이미지가 없습니다.","mockup_no_image_short":"이미지 없음","domain_default_fallback":"example.com","audit_missing_title":"og:title 누락 — 대부분의 플랫폼에서는 제목 없이 일반 제목이나 빈 제목을 표시합니다.","audit_missing_description":"og:description 누락 — 미리보기 카드에 요약 텍스트가 표시되지 않습니다.","audit_missing_image":"og:image 누락 — 대부분의 플랫폼에서는 이미지가 표시되지 않거나 페이지에서 발견된 첫 번째 이미지로 대체됩니다.","audit_missing_url":"og:url 누락 — 이 항목이 없으면 대체 URL 공유(추적 매개변수, AMP 버전 등 포함)가 표준 페이지에 통합되지 않을 수 있습니다.","audit_title_too_long":"og:title은 {length}자입니다. 대부분의 플랫폼에서 잘리는 ~{max} 문자 지점 위에 있습니다.","audit_title_long":"og:title은 {length}자입니다. 일부 플랫폼에서는 잘리기 시작하는 ~{max} 문자 지점을 넘어서지만 다른 곳에서는 여전히 완전히 표시될 수 있습니다.","audit_title_ok":"og:title은 {length}자입니다. 대부분의 플랫폼에서 안전한 범위 내에 있습니다.","audit_description_too_long":"og:description은 {length}자입니다. 대부분의 플랫폼에서 잘리는 ~{max} 문자 지점을 초과합니다.","audit_description_long":"og:description은 {length}자입니다. 일부 플랫폼에서는 자르기 시작하는 ~{max} 문자 지점을 초과합니다.","audit_description_ok":"og:description은 {length}자입니다. 대부분의 플랫폼에서 안전한 범위 내에 있습니다.","audit_url_not_absolute":"og:url 값 \"{value}\"은(는) 절대 http(s) URL이 아닙니다. 페이지의 전체 표준 URL이어야 합니다.","audit_image_not_absolute":"og:이미지 값 \"{value}\"은(는) 절대 http(s) URL이 아닙니다. 대부분의 플랫폼에는 정규화된 이미지 URL이 필요합니다.","audit_image_dims_small":"선언된 og:image:width/height는 {w}×{h}입니다. 링크 미리보기에 대해 널리 권장되는 최소 1200×630보다 낮습니다.","audit_image_dims_ok":"선언된 og:image:width/height는 {w}×{h}입니다. 널리 권장되는 최소 1200×630을 충족합니다.","audit_image_dims_unparseable":"og:image:width/og:image:height가 있지만 유효한 숫자가 아닙니다.","audit_image_dims_unknown":"og:image:width/og:image:height가 선언되지 않았습니다. 실제 픽셀 크기는 이미지를 가져오지 않고는 확인할 수 없습니다. 이 도구는 개인정보 보호를 위해 설계상 그렇게 하지 않습니다. 권장 최소: 1200×630.","audit_twitter_card_missing":"twitter:card 태그 없음 — Twitter/X는 일반적으로 동등한 og: 태그로 대체되지만 명시적인 twitter:card가 더 안정적입니다.","audit_twitter_card_invalid":"twitter:카드 값 \"{value}\"은(는) Twitter의 카드 유효성 검사기가 허용하는 네 가지 값(요약, 요약_대형_이미지, 앱, 플레이어) 중 하나가 아닙니다.","audit_twitter_card_ok":"twitter:card는 유효한 값인 \"{value}\"입니다.","audit_large_image_needs_image":"twitter:card는 summary_large_image이지만 og:image 또는 twitter:image를 찾을 수 없습니다. 이 카드 유형을 제대로 렌더링하려면 이미지가 필요합니다.","audit_twitter_title_fallback":"twitter:title 세트 없음 — Twitter/X는 og:title로 대체됩니다.","audit_twitter_description_fallback":"twitter:description 세트 없음 — Twitter/X는 og:description으로 대체됩니다.","audit_twitter_image_fallback":"twitter:image가 설정되지 않음 — Twitter/X는 og:image로 대체됩니다.","audit_duplicate_tag_item":"\"{tag}\"은(는) {count}번 선언되었습니다. 대부분의 플랫폼에서 마지막으로 구문 분석된 항목만 실제로 적용됩니다."};
⭐ 0
🔍
텍스트 이미지 PDF 및 문서 오디오 음악 전자 회로 시간 유틸리티 검증인 신비주의 게임

OG 및 Twitter 카드 생성기 — 메타 태그 빌더, 감사자 및 미리보기

즉시 붙여넣을 수 있는 Open Graph 및 Twitter 카드 <meta> 태그를 양식에서 작성하거나 기존 <head>를 붙여넣어 누락된 태그, 제목/설명 길이 및 twitter:card 유효성을 감사한 다음 완전히 스타일이 변경된 Twitter/X, Facebook, LinkedIn 및 Discord 링크 카드 모형에서 두 가지를 모두 미리 봅니다.

Buy Me a Coffee at ko-fi.com
처리 중... 0%
입력 읽기
태그 작성/감사
렌더링 미리보기
완료

결과

Open Graph 및 Twitter Card 메타 태그는 링크가 Slack, iMessage, 트윗 또는 Discord 채널에 붙여넣는 순간의 링크 모양을 결정합니다. 즉, 플랫폼이 눈에 보이는 본문 텍스트에서 긁어내는 것이 아니라 페이지 자체 <head>에서 선택한 제목, 설명 및 이미지입니다. 이 도구는 일반 템플릿 필러가 아닌 작성기이자 감사자입니다. BUILD 모드에서 제목, 설명, 이미지 URL, 표준 URL, 콘텐츠 유형 및 Twitter 카드 유형을 입력하면 페이지의 <head>에 붙여넣을 수 있는 정확한 <meta property="og:..."> 및 <meta name="twitter:..."> 태그 블록이 구성됩니다. 빈 콘텐츠가 포함된 속이 빈 태그를 내보내는 대신 비어 있는 필드를 건너뜁니다.

AUDIT 모드에서는 기존 <head> 마크업이나 전체 페이지의 HTML을 붙여넣고 도구는 이를 브라우저의 기본 DOMParser로 구문 분석하여 이미 존재하는 모든 og: 및 twitter: 메타 태그를 추출한 다음 실제로 중요한 검사를 실행합니다. 일반적으로 필요한 4개의 태그(og:title, og:description, og:image, og:url)가 누락된 경우 플래그가 지정됩니다. og:title은 일부 플랫폼에서 자르기 시작하는 대략 60자 지점과 대부분의 플랫폼에서 자르기 시작하는 대략 90자 지점을 기준으로 측정됩니다. og:설명은 대부분의 플랫폼에서 잘라내기 전에 허용되는 대략 155~200자 범위를 기준으로 측정됩니다. twitter:card는 Twitter의 카드 유효성 검사기가 허용하는 실제 4가지 값(summary, summary_large_image, app, player)과 비교하여 확인되고 다른 값인 경우 플래그가 지정됩니다. 중복된 태그(동일한 속성이 두 번 선언됨, 놀랍게도 일반적인 복사-붙여넣기 버그)는 이름으로 호출됩니다.

이미지 크기는 정직하게 처리됩니다. 이 도구는 이미지를 가져오지 않고는 이미지의 실제 픽셀 크기를 확인할 수 없으며, 이 사이트의 외부 요청 금지 정책에 따라 의도적으로 그렇게 하지 않습니다. HTML에서 이미 og:image:width 및 og:image:height를 선언한 경우 선언된 숫자는 널리 권장되는 최소 1200×630과 비교하여 확인됩니다. 그렇지 않은 경우 조작된 합격 또는 불합격 대신 명확한 지침을 받게 됩니다. 두 모드 모두 동일한 4개의 링크 미리보기 모형을 렌더링합니다 — Twitter/X(twitter:card 값에 따라 컴팩트한 "요약" 썸네일 레이아웃과 전체 폭의 "summary_large_image" 레이아웃 간 전환), Facebook, LinkedIn 및 Discord — 각각은 서로 다른 로고가 있는 하나의 상자가 아닌 해당 플랫폼의 자체 타이포그래피 및 레이아웃 규칙에 맞게 스타일이 완전히 변경되었으며, 실제 플랫폼은 미리보기 스타일을 변경하므로 계획 목적을 위한 예시적 근사치로 명확하게 라벨이 지정되어 있습니다. 시간이 지남에 따라 Chrome을 사용하게 되며 이 도구는 확인을 위해 해당 항목을 가져오거나 긁어내지 않습니다.

🛡️
브라우저에서 실행됨

귀하의 파일과 입력 내용은 절대 이 장치를 떠나지 않습니다. 처리는 완전히 오프라인으로 실행됩니다. 100% 안전합니다.

허용되는 형식 및 규칙

  • BUILD 모드는 og:title, og:description, og:image, og:url, og:type, og:site_name 및 일치하는 twitter:card/twitter:site/twitter:title/description/image 태그를 구성하고, 공백으로 남겨진 모든 필드를 건너뛰고, 즉시 붙여넣기 가능한 블록의 원클릭 복사본을 사용합니다.
  • AUDIT 모드는 브라우저의 DOMParser를 통해 붙여넣은 HTML에서 모든 og:/twitter: <meta> 태그, 필수 태그 누락 플래그(og:title/description/image/url), 중복 태그 및 잘못된 twitter:card 값을 추출합니다.
  • 길이 지침은 일반적으로 인용되는 실제 임계값을 사용합니다. og:title은 일부 플랫폼에서 자르기 시작하기 전에 약 60자(가장 허용되는 경우 최대 약 90자), og:description은 약 155-200자입니다.
  • Twitter/X 카드를 Facebook, LinkedIn 및 Discord 미리 보기와 함께 선언된 카드 유형(작은 정사각형 썸네일이 포함된 소형 "요약" 카드 또는 전체 너비 "summary_large_image" 레이아웃)에 대한 올바른 레이아웃으로 렌더링합니다.

주요 이점

✓ 두 가지 실제 도구가 하나로 통합되어 있습니다. 양식에서 정확한 og: 및 twitter: <meta> 태그 HTML을 생성하는 BUILD 모드와 붙여넣은 HTML을 구문 분석하여 기존 태그를 찾고 등급을 매기는 AUDIT 모드입니다.
✓ 겉보기 체크리스트가 아닌 실제 검증: 필수 태그 누락, og:title/og:description 길이가 플랫폼에서 잘리는 실제 제한에 대해 확인되고 twitter:card가 실제 허용되는 4개 값에 대해 확인됩니다.
✓ 오프라인으로 확인할 수 없는 사항에 대해 솔직하게 설명합니다. HTML에서 이미 og:image:width/og:image:height를 선언하지 않는 한 이미지 픽셀 크기는 안내용일 뿐입니다. 이 도구는 개인정보 보호를 위해 설계상 이미지를 가져오지 않기 때문입니다.
✓ 동일한 제목/설명/이미지로 제작된 완전히 다른 4개의 플랫폼 모형(Twitter/X의 요약 대 summary_large_image 레이아웃, Facebook, LinkedIn, Discord)은 명확하게 설명이라는 라벨이 붙어 있습니다.

사용 사례

  • • 적절한 소셜 카드가 포함된 새 블로그 게시물을 발송하세요. 제목, 설명, 호스팅된 표지 이미지를 입력하고 og:/twitter: 태그 블록을 생성한 후 페이지의 <head>에 바로 붙여넣으세요.
  • • CMS 마이그레이션 후 기존 랜딩 페이지의 <head>를 감사하여 누락된 og:image, 일부 플랫폼에서 잘릴 만큼 긴 og:title 또는 남은 유효하지 않은 twitter:card 값을 찾아냅니다.
  • • 선언할 twitter:card 유형을 결정하기 전에 Twitter/X의 컴팩트 요약 카드와 전체 너비 summary_large_image 레이아웃에서 동일한 제목과 이미지가 어떻게 읽혀지는지 비교하세요.