Skip to content

Open Graph 메타 태그 생성기

Open Graph, Twitter Card, SEO 메타 태그를 생성하고 Google·Facebook·X 실시간 미리보기로 확인하세요. 100% 무료 웹 도구, 가입 없이 코드를 복사·붙여넣기.

트래킹 없음 브라우저 실행 무료
모든 처리는 브라우저에서 이루어집니다. 콘텐츠와 이미지 URL은 이 페이지를 벗어나지 않습니다 — 업로드도, 가입도 없습니다.
기본 SEO
Open Graph (Facebook, LinkedIn…)
X (Twitter) 카드
고급 및 아이콘
검사
    생성된 <head> 태그 
     
      
     기존 <head>에서 가져오기 (로컬에서 파싱, 업로드 없음) 
       
     
      
     배포 후 확인: Facebook LinkedIn Google Rich Results 
     
     
      
      
       태그 출력과 플랫폼 사양은 Open Graph 프로토콜(ogp.me), Google Search Central, 그리고 현재 Facebook, X, LinkedIn, Discord 공유 문서에 대조하여 검증했습니다. — Go Tools Team · Jul 15, 2026  
          
     
    메타 태그와 Open Graph란?
     
     
    메타 태그는 페이지의 <head>에 있는 HTML 조각으로, 브라우저, 검색 엔진, 소셜 플랫폼에 페이지를 설명합니다. 대표적인 SEO 태그는 <title>, 메타 설명, canonical 링크입니다. Open Graph 태그(og:title, og:type, og:image, og:url 등)는 원래 Facebook에서 만든 프로토콜로, 링크가 공유될 때 표시되는 제목, 설명, 이미지를 제어합니다 — 그리고 LinkedIn, Slack, Discord, WhatsApp, Pinterest, Telegram을 포함해 거의 모든 플랫폼이 이를 읽습니다.
    Twitter/X는 자체 twitter:card 태그를 사용하지만 없을 때는 Open Graph 태그로 대체하므로, 잘 갖춰진 OG 태그 세트에 단일 twitter:card 값만 더하면 모든 네트워크를 커버합니다. 이 생성기는 이 모든 태그를 작성하고, 선택적 JSON-LD 구조화 데이터를 추가하며, 결과를 실시간으로 미리 봅니다 — 그래서 태그를 손으로 작성하거나 공유가 어떻게 보일지 추측할 필요가 전혀 없습니다.
     
      
      
     
    플랫폼별 소셜 이미지 및 태그 사양
     
     
     
    Open Graph (Facebook 및 LinkedIn)
     
    둘 다 og:title, og:description, og:image, og:url을 읽습니다. 권장 이미지는 1200×630(1.91:1). Facebook은 약 30일, LinkedIn은 약 7일 캐시하므로 배포 후 각 디버거로 다시 스크랩하세요.
     
     
    X (Twitter) 카드
     
    twitter:card는 필수입니다(summary_large_image 또는 summary). 나머지는 X가 og:*로 대체합니다. 단일 1200×630 이미지가 OG와 X 모두에 적합하며, 300×157 미만 이미지는 큰 카드를 작은 카드로 격하시킵니다.
     
     
    Slack 및 Discord
     
    Slack은 Twitter Card를 먼저, 그다음 Open Graph를 읽으며 twitter:label/data로 추가 필드 두 개를 표시할 수 있습니다. Discord는 Open Graph를 읽고, 임베드의 강조 막대에 theme-color를 독특하게 사용합니다.
     
     
    WhatsApp 및 Telegram
     
    WhatsApp은 og:title과 og:image가 필요하며 메타데이터가 HTML 상단 근처에 있어야 합니다. Telegram은 Open Graph를 읽으며 JPEG 또는 PNG 이미지에서만 안정적으로 렌더링합니다.
     
     
    Pinterest 리치 핀
     
    Pinterest는 Open Graph 또는 Schema.org를 읽습니다. 아티클 리치 핀에는 og:type=article과 article:published_time, article:author가 필요하며 — article 유형을 선택하면 모두 여기서 생성됩니다.
     
     
    Google 검색 스니펫
     
    데스크톱과 모바일 SERP 실시간 미리보기가 제목과 설명을 글자 수가 아닌 픽셀로 측정하므로, Google보다 먼저 잘림 위험을 확인할 수 있습니다.
     
     
     
          
     
    메타 태그 예시
     
     
     
    웹사이트 홈페이지
     
     
    Title: Acme — Ship faster
Description: The all-in-one platform for modern teams.
URL: https://acme.com
Image: https://acme.com/og/home.png (1200×630)
     
    <title>Acme — Ship faster</title>
<meta name="description" content="The all-in-one platform for modern teams.">
<link rel="canonical" href="https://acme.com">

<meta property="og:title" content="Acme — Ship faster">
<meta property="og:type" content="website">
<meta property="og:image" content="https://acme.com/og/home.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://acme.com">

<meta name="twitter:card" content="summary_large_image">
     
     
    홈페이지에는 네 개의 필수 Open Graph 태그와 제목, 설명, canonical만 있으면 됩니다. 이미지가 1200×630이므로 너비와 높이가 자동으로 채워져, 첫 Facebook 공유가 빈 화면 대신 즉시 렌더링됩니다.
     
     
    블로그 아티클 (article:* + JSON-LD 포함)
     
     
    og:type: article
Title: The Complete Guide to Open Graph Tags
Author: Ada Lovelace
Published: 2026-07-15
     
    <meta property="og:title" content="The Complete Guide to Open Graph Tags">
<meta property="og:type" content="article">
<meta property="og:image" content="https://blog.example.com/og/guide.png">
<meta property="og:url" content="https://blog.example.com/open-graph-guide">
<meta property="article:published_time" content="2026-07-15T00:00:00Z">
<meta property="article:author" content="Ada Lovelace">

<meta name="twitter:card" content="summary_large_image">

<script type="application/ld+json">{ "@type": "Article", "headline": "The Complete Guide to Open Graph Tags", "datePublished": "2026-07-15T00:00:00Z" }</script>
     
     
    article 유형을 선택하면 article:published_time과 article:author 속성이 활성화되고 일치하는 Article JSON-LD가 생성되므로, 검색 엔진과 Pinterest 리치 핀이 구조화된 데이터를 자동으로 얻습니다.
     
     
    Twitter/X가 Open Graph를 상속
     
     
    twitter:card: summary_large_image
Inherit title/description/image from OG: on
     
    <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@acme">
     
     
    일치하는 twitter:* 태그가 없으면 X는 Open Graph 태그를 읽으므로 twitter:card만 있으면 됩니다. 이 생성기는 해당 대체를 깨뜨리는 빈 twitter:image를 절대 생성하지 않습니다.
     
     
     
          
     
    사이트에 Open Graph 태그 추가하는 방법
     
       
    1.  1 
       
      제목, 설명, URL 입력
       
      페이지 제목, 메타 설명, canonical URL을 입력하세요. 픽셀 측정기가 Google 검색 스니펫에 맞는지 보여줍니다.
       
       
    2.  2 
       
      og:image 추가 및 유형 선택
       
      1200×630 이미지 URL을 붙여넣고 website, article, product, profile 중에서 선택하면 — 일치하는 Open Graph 필드와 JSON-LD가 자동으로 나타납니다.
       
       
    3.  3 
       
      실시간 미리보기 확인
       
      Google, Facebook, X, LinkedIn, Slack, Discord 탭을 전환해 배포 전에 링크가 정확히 어떻게 보일지 확인하세요.
       
       
    4.  4 
       
      에 복사
       
      전체 태그 블록(또는 한 섹션)을 복사해 HTML의  안에 붙여넣으세요. 배포 후 Facebook과 LinkedIn 디버거로 확인하세요.
       
       
      5.  
     
      
     
    흔한 Open Graph 실수
     
     
     
    상대 og:image 경로
     
    /cover.png 같은 경로는 편집기에서는 작동하지만 공유 시 빈 화면이 됩니다. 크롤러에는 절대 URL이 필요하기 때문입니다.
     
     
     ✗ 오류 
    <meta property="og:image" content="/cover.png">
     
     
     ✓ 정상 
    <meta property="og:image" content="https://example.com/cover.png">
     
     
     
     
    og:url 누락
     
    canonical og:url이 없으면 공유 수가 URL 변형 간에 분산되고 플랫폼이 잘못된 주소를 선택할 수 있습니다.
     
     
     ✗ 오류 
    <!-- no og:url -->
     
     
     ✓ 정상 
    <meta property="og:url" content="https://example.com/page">
     
     
     
     
    이미지가 너무 작거나 비율이 틀림
     
    Facebook은 200×200 미만 이미지를 무시하고 1.91:1에서 크게 벗어난 것을 자릅니다.
     
     
     ✗ 오류 
    600×600 og:image
     
     
     ✓ 정상 
    1200×630 og:image (1.91:1)
     
     
     
     
    twitter:card 잊음
     
    완전한 Open Graph 태그가 있어도 twitter:card가 설정되지 않으면 X는 카드를 렌더링하지 않습니다.
     
     
     ✗ 오류 
    <!-- OG only, no twitter:card -->
     
     
     ✓ 정상 
    <meta name="twitter:card" content="summary_large_image">
     
     
     
     
    빈 twitter:image가 대체를 깨뜨림
     
    빈 twitter:image는 X가 og:image로 대체하는 것을 막습니다 — 비워 두지 말고 태그를 생략하세요.
     
     
     ✗ 오류 
    <meta name="twitter:image" content="">
     
     
     ✓ 정상 
    <!-- omit it; X uses og:image -->
     
     
     
     
    charset이 너무 늦게 배치됨
     
    charset 선언은 문서의 처음 1024바이트 안에 나타나야 하며, 그렇지 않으면 무시됩니다.
     
     
     ✗ 오류 
    <meta charset> after many tags
     
     
     ✓ 정상 
    <meta charset="utf-8"> first in <head>
     
     
     
     
     
      
     
    일반적인 사용 사례
     
     
     
    랜딩 페이지 출시
     
    새 마케팅 페이지의 전체 head 블록을 생성해, 누군가 X, LinkedIn, Slack에 링크를 공유하는 순간 세련되게 보이도록 하세요.
     
     
    블로그 및 아티클 미리보기
     
    article:published_time, article:author, Article JSON-LD를 추가해 게시물이 Pinterest 리치 핀과 풍부한 소셜 카드 대상이 되게 하세요.
     
     
    깨진 공유 수정
     
    현재 태그를 가져오고, 검사 패널에서 누락된 og:image나 잘못된 크기를 찾아 수정한 뒤, 디버거 링크로 다시 스크랩하세요.
     
     
    프레임워크 head 스니펫
     
    깔끔하고 올바른 태그 세트를 복사해 정적 사이트, CMS 템플릿, 서버 렌더링 head 파셜에 넣으세요.
     
     
     
      
     
    생성기 작동 방식
     
     
     
    실시간 브라우저 내 미리보기
     
    모든 카드는 URL을 가져오지 않고 입력한 값으로 렌더링됩니다. 덕분에 미리보기가 즉각적이고 비공개로 유지되며, 페이지 배포 전에 미리 볼 수 있는 유일하게 정직한 방법입니다.
     
     
    픽셀 정확도 SERP 측정기
     
    Google은 제목과 설명을 글자 수가 아닌 픽셀 너비로 자릅니다. 캔버스가 동일한 폰트로 텍스트를 측정하므로, 스니펫이 잘릴 시점에 정확히 측정기가 황색으로 바뀝니다.
     
     
    클라이언트 측 이미지 검사
     
    og:image URL을 브라우저의 Image로 로드해 실제 너비와 높이를 읽은 다음 1200×630과 카드의 종횡비에 대조합니다. 교차 출처 이미지도 크기를 보고하므로 업로드 없이 검사가 작동합니다.
     
     
    완전하고 현대적인 태그 세트
     
    기본 SEO, Open Graph, Twitter Card, JSON-LD를 하나의 블록에 담고, charset을 가장 먼저 출력해 처음 1024바이트 안에 들어가게 합니다. meta keywords 같은 레거시 태그는 기본적으로 꺼져 있습니다.
     
     
     
      
     
    메타 태그 모범 사례
     
     
     
    절대 HTTPS URL 사용
     
    og:image와 og:url은 완전한 https://… URL이어야 합니다. 상대 경로는 로컬에서는 작동하지만 크롤러가 실제 페이지를 가져올 때 빈 화면으로 렌더링됩니다.
     
     
    og:image:width와 height를 항상 설정
     
    크기를 선언하면 플랫폼이 카드를 즉시 배치할 수 있어, 이미지를 비동기로 가져오는 동안에도 첫 공유가 비어 보이지 않습니다.
     
     
    canonical과 og:url을 동일하게 유지
     
    둘 다 하나의 canonical URL을 가리키게 해 공유 수와 검색 신호가 URL 변형 간에 분산되지 않게 하세요.
     
     
    픽셀 예산에 맞춰 작성
     
    제목은 약 50~60자, 설명은 약 155자를 목표로 하되 — Google은 글자 수가 아닌 너비를 측정하므로 픽셀 측정기를 신뢰하세요.
     
     
    서버 측에서 태그 렌더링
     
    Facebook, LinkedIn, WhatsApp, Telegram, Discord 크롤러는 JavaScript를 실행하지 않으므로 Open Graph 태그는 정적 또는 서버 렌더링 HTML에 있어야 합니다.
     
     
     
      
     
    자주 묻는 질문
     
     
     메타 태그 생성기란 무엇인가요? 
     메타 태그 생성기는 페이지의 <head> 안에 들어가는 HTML 태그 — <title>, 메타 설명, canonical 링크, Facebook과 LinkedIn용 Open Graph 태그, Twitter/X 카드 태그 — 를 생성합니다. 이 도구는 이 모든 것을 한 번에 생성하고, 링크가 Google, Facebook, X, LinkedIn, Slack, Discord에서 어떻게 보일지 실시간 미리보기로 보여주며, 클릭 한 번으로 코드를 복사할 수 있게 합니다. 모든 처리는 브라우저에서 이루어집니다. 
     
     웹사이트에 Open Graph 태그를 어떻게 추가하나요? 
     제목, 설명, canonical URL, og:image URL을 입력하고 Open Graph 유형을 선택한 다음, 생성된 태그를 복사해 HTML의 <head> 안에 붙여넣으세요. Facebook, LinkedIn, WhatsApp, Telegram 크롤러는 JavaScript를 실행하지 않으므로, 태그는 클라이언트 측 스크립트로 삽입하지 말고 서버 렌더링 또는 정적 HTML에 반드시 포함되어야 합니다. 
     
     Open Graph 이미지의 크기는 얼마여야 하나요? 
     권장 og:image 크기는 1200×630 픽셀(1.91:1 종횡비)이며, 이는 X의 summary_large_image 카드도 충족합니다. Facebook은 200×200보다 작은 이미지를 무시하고 600×315 미만은 작은 정사각형으로 표시합니다. 첫 공유가 즉시 렌더링되도록 항상 og:image:width와 og:image:height를 포함하고, robots.txt로 차단되지 않은 공개 URL에서 HTTPS로 이미지를 제공하세요. 
     
     twitter:card 태그가 필수인가요? 
     네 — twitter:card는 반드시 포함해야 하는 유일한 Twitter/X 태그이며, 이것이 없으면 Open Graph 태그가 있어도 X는 카드를 렌더링하지 않습니다. 큰 이미지에는 summary_large_image, 작은 정사각형 썸네일에는 summary로 설정하세요. 나머지(제목, 설명, 이미지)는 X가 og:* 태그로 대체하므로, 이 도구는 마크업을 깔끔하게 유지하기 위해 기본적으로 이를 생략합니다. 
     
     메타 태그가 SEO에 도움이 되나요? 
     <title>과 canonical 태그는 SEO에 중요합니다. 메타 설명은 직접적인 순위 요소는 아니지만 검색 스니펫을 형성해 클릭률에 영향을 줍니다. Open Graph와 Twitter Card 태그는 Google 순위에 영향을 주지 않지만, 링크가 공유될 때 어떻게 보일지를 제어해 소셜 트래픽을 이끕니다. Google이 결과에서 제목을 다시 작성할 수 있으므로, 명확하고 고유한 제목을 쓰고 중요한 단어를 앞에 두세요. 
     
     이 도구가 내 콘텐츠나 이미지를 업로드하나요? 
     아니요. 모든 것은 JavaScript로 브라우저 안에서 로컬로 생성됩니다. 제목, 설명, 이미지 URL은 페이지를 벗어나지 않습니다 — 서버도, 업로드도, 계정도 없습니다. og:image는 미리보기와 크기 확인을 위해 오직 사용자 본인의 브라우저에서만 로드됩니다. 
     
     이미 가지고 있는 메타 태그를 가져올 수 있나요? 
     네. 가져오기 패널을 열고 기존 <meta> 태그를 붙여넣으면, 이 도구가 브라우저 자체의 HTML 파서로 로컬에서 파싱해 폼을 채웁니다 — 네트워크 요청도, 업로드도 없습니다. 서버에서 실시간 URL을 가져오는 도구에 대한 프라이버시 우선 대안입니다. 
     
     업데이트한 미리보기가 Facebook이나 LinkedIn에서 여전히 예전 이미지를 보여주는 이유는 무엇인가요? 
     플랫폼은 Open Graph 데이터를 캐시합니다: Facebook은 약 30일, LinkedIn은 약 7일. 배포 후 Facebook Sharing Debugger 또는 LinkedIn Post Inspector로 페이지를 다시 스크랩해 캐시된 제목, 설명, 이미지를 새로 고치세요. 디버거 링크는 생성된 코드 아래에 나열되어 있습니다. 
     
     
     
     
       
      
     
     
    관련 도구
      모든 도구 보기 →
 
     
      
     
      
      
      
     
     
    cURL 명령어 생성기 & 빌더
     
     
    웹 & API
     
    온라인 curl 명령어 생성기. 메서드·헤더·인증·바디를 설정하면 즉시 복사 가능한 명령어가 생성됩니다. Bearer·POST JSON·파일 업로드 프리셋. 무료, 서버 전송 없음.
     
     
       
          
     
      
      
      
     
     
    htpasswd 생성기 — bcrypt, Apache MD5 (apr1) & Basic Auth
     
     
    웹 & API
     
    bcrypt, Apache MD5 (apr1), SHA-1 등으로 htpasswd 항목을 생성하는 웹 도구. Apache, nginx, Docker 설정 스니펫 포함. 100% 브라우저에서 처리 — 업로드 없음.
     
     
       
          
     
      
      
      
     
     
    진법 변환기 (Number Base Converter)
     
     
    변환 도구
     
    2진수, 16진수, 10진수, 8진수 및 임의 진법(2-36)을 즉시 변환합니다. 온라인에서 무료로 사용할 수 있으며 모든 처리는 브라우저에서 이루어집니다.
     
     
       
          
     
      
      
      
     
     
    Base64 디코더 · 인코더 (Base64 Decoder & Encoder)
     
     
    인코딩 & 포매팅
     
    Base64를 온라인에서 무료로 인코딩하고 디코딩합니다. UTF-8과 이모지를 완벽 지원하는 실시간 변환으로, 100% 브라우저에서 처리되어 회원 가입이 필요 없습니다.
     
     
       
          
     
      
      
      
     
     
    Base64 이미지 변환기 (온라인)
     
     
    인코딩 & 포매팅
     
    Base64 문자열이나 데이터 URI를 온라인 브라우저에서 이미지로 디코딩합니다. 미리보고, 치수와 MIME을 읽은 뒤 PNG, JPG, GIF, SVG로 다운로드하세요. 업로드 없음.
     
     
       
          
     
      
      
      
     
     
    Bcrypt 해시 생성 및 검증 도구
     
     
    보안 도구
     
    온라인으로 bcrypt 비밀번호 해시를 생성·검증하세요 — 조절 가능한 비용 인자, $2b$/$2a$/$2y$ 접두사 지원. 100% 브라우저에서 실행, 비밀번호는 업로드되지 않습니다.