Open Graph 메타태그 값을 입력하면 카카오톡 · 페이스북 · 트위터에서 공유될 때 어떻게 보이는지 미리 확인할 수 있습니다.
📱 미리보기
💬 카카오톡
📘 페이스북
🐦 트위터/X (summary_large_image)

HTML 메타태그 코드


        

    


    

        
OG 카드 미리보기 사용법

        
    
            
  1. 실제 사이트에 사용할 OG 메타태그 값을 입력합니다 (제목, 설명, URL, 사이트명, 이미지 URL).
    2. 
            
  2. 3개 플랫폼(카카오톡·페이스북·트위터)에서 어떻게 보이는지 즉시 확인합니다.
    3. 
            
  3. 제목·설명 길이가 잘리지 않는지, 이미지가 잘 들어가는지 점검합니다.
    4. 
            
  4. 맨 아래 HTML 메타태그 코드를 복사해 사이트의 <head>에 추가합니다.
    5. 
        


        
주요 기능

        
    
            
  • 카카오톡 · 페이스북 · 트위터 3개 플랫폼 동시 미리보기
    • 
            
  • 실제 UI에 가까운 시뮬레이션
    • 
            
  • 완성된 HTML 메타태그 코드 자동 생성
    • 
            
  • 외부 통신 없음 — 입력값이 서버로 전송되지 않음
    • 
        


        
활용 예시

        
    
            
  • 새로운 페이지 발행 전 SNS 공유 모습 검증
    • 
            
  • OG 이미지 디자인 시 안전 영역 확인
    • 
            
  • 제목·설명 길이 최적화
    • 
            
  • 마케팅 캠페인 카카오톡 공유 미리보기
    • 
        


        
OG 이미지 권장 사양

        
1200 × 630 픽셀 (1.91:1 비율)이 모든 주요 플랫폼에서 가장 안전한 사이즈입니다. 카카오톡은 정사각(800×800)도 지원하지만 페이스북·트위터에서는 자동으로 1.91:1로 크롭됩니다. 파일 크기는 5MB 이하, JPG·PNG·WEBP 권장입니다.


        
자주 묻는 질문

        

            

                제목·설명 길이 권장은?
                
제목은 60자 이내, 설명은 110~160자가 권장됩니다. 이를 넘으면 플랫폼에서 자동으로 잘립니다. 모바일은 더 짧게 표시되니 핵심을 앞쪽에 배치하세요.

            

            

                왜 카카오톡에서 미리보기가 안 뜨나요?
                
카카오톡은 캐시가 강해 한 번 가져간 이미지를 오래 유지합니다. 카카오 공유 디버거에서 캐시를 갱신하세요.

            

            

                OG 이미지가 자꾸 다르게 보이는 이유는?
                
각 플랫폼이 OG 이미지를 자체 캐시합니다. 이미지를 변경했다면 파일명을 바꾸거나 ?v=2 같은 쿼리스트링을 추가한 새 URL을 og:image에 넣어야 즉시 반영됩니다.

            

            

                이 도구가 입력 URL을 자동 분석하지 않는 이유는?
                
브라우저 보안(CORS) 정책상 임의 URL의 메타태그를 클라이언트 JavaScript에서 직접 가져올 수 없습니다. 본 도구는 사용자가 메타값을 직접 입력하는 방식으로, 외부 서버 통신 없이 안전합니다.