Meta 태그 생성기

생성되는 항목

• 기본 SEO 메타 — title, description, canonical, author, keywords, theme-color, viewport, robots.
• Open Graph — og:type, og:title, og:description, og:url, og:site_name, og:image(width / height / alt 포함), og:locale.
• Twitter 카드 — twitter:card, twitter:site, twitter:creator, twitter:title, twitter:description, twitter:image.
• Schema.org JSON-LD — 최소한의 WebPage, Article, Product, Organization 블록(name / description / url / image).

처음 열었을 때의 출력

폼에는 이 사이트의 영어 예시 값이 미리 들어 있고, 한국어 페이지에서는 og:locale이 ko_KR로 채워집니다. 아무것도 바꾸지 않고 복사하면 다음과 같습니다.

<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ZeroTool — Free browser-based dev utilities</title>
<meta name="description" content="A growing library of one-task tools that run in your browser. No accounts, no uploads.">
<link rel="canonical" href="https://zerotool.dev/">
<meta name="author" content="ZeroTool Workshop">
<meta name="keywords" content="dev tools, meta tags, open graph, twitter card">
<meta name="theme-color" content="#5b3d20">
<meta name="robots" content="index, follow">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="ZeroTool — Free browser-based dev utilities">
<meta property="og:description" content="A growing library of one-task tools that run in your browser. No accounts, no uploads.">
<meta property="og:url" content="https://zerotool.dev/">
<meta property="og:site_name" content="ZeroTool">
<meta property="og:image" content="https://zerotool.dev/og/json-formatter.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="ZeroTool cover image">
<meta property="og:locale" content="ko_KR">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@zerotooldev">
<meta name="twitter:creator" content="@zerotooldev">
<meta name="twitter:title" content="ZeroTool — Free browser-based dev utilities">
<meta name="twitter:description" content="A growing library of one-task tools that run in your browser. No accounts, no uploads.">
<meta name="twitter:image" content="https://zerotool.dev/og/json-formatter.png">

ogp.me가 모든 페이지에 필수로 정한 네 가지(og:title, og:type, og:image, og:url)가 들어 있습니다. Twitter 이미지 칸이 비어 있어서 twitter:image에는 og:image와 같은 URL이 들어갑니다. ‘언어’ 선택 상자는 og:locale이 비어 있을 때 입력 예시만 보여 줄 뿐 태그를 따로 출력하지 않습니다. locale을 바꾸려면 og:locale 칸을 직접 고치세요. 공개하기 전에 예시 값은 모두 자기 사이트의 값으로 바꾸세요.

카카오톡 공유 미리보기

쇼핑몰 기획전 페이지를 카카오톡으로 공유한다고 해 보겠습니다. Ctrl/⌘+L로 예시 문구를 지우고 viewport 체크를 해제한 뒤, 두 예시 URL을 바꾸고 아래 값을 넣으면 다음 head가 나옵니다.

<title>가을 캠핑 기획전 ~10월 31일 | 숲속상회</title>
<meta name="description" content="텐트·타프·랜턴 최대 40% 할인. 5만 원 이상 구매 시 무료 배송.">
<link rel="canonical" href="https://shop.example.kr/event/autumn-camping/">
<meta name="robots" content="index, follow">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="가을 캠핑 기획전 ~10월 31일 | 숲속상회">
<meta property="og:description" content="텐트·타프·랜턴 최대 40% 할인. 5만 원 이상 구매 시 무료 배송.">
<meta property="og:url" content="https://shop.example.kr/event/autumn-camping/">
<meta property="og:site_name" content="숲속상회">
<meta property="og:image" content="https://shop.example.kr/og/autumn-camping.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="숲속에 친 텐트와 랜턴">
<meta property="og:locale" content="ko_KR">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="가을 캠핑 기획전 ~10월 31일 | 숲속상회">
<meta name="twitter:description" content="텐트·타프·랜턴 최대 40% 할인. 5만 원 이상 구매 시 무료 배송.">
<meta name="twitter:image" content="https://shop.example.kr/og/autumn-camping.jpg">

카카오디벨로퍼스의 메시지 템플릿 문서에 따르면 카카오톡 공유 API 등으로 보내는 스크랩 메시지는 웹 페이지 <head>의 오픈 그래프 메타 태그를 읽어 만듭니다. 이미지는 og:image, 제목과 설명은 og:title과 og:description에서 가져와 각각 최대 2줄씩 보여 주고, 버튼에는 og:site_name으로 정한 이름이나 도메인이 ‘…에서 확인’ 형식으로 표시됩니다. 위의 예라면 버튼은 ‘숲속상회에서 확인’이 됩니다. 제목의 |와 ~는 HTML에서 특별한 문자가 아니므로 그대로 출력됩니다.

이미지를 바꿨는데 예전 미리보기가 계속 보이면, 도구 문서의 [카카오톡 URL 메타정보 관리]에서 캐시를 초기화합니다. 카카오톡 공유 이해하기 문서에는 서비스 서버의 방화벽이 카카오 스크랩 서버의 접근을 막으면 이미지가 매우 느리게 전송되거나 표시되지 않을 수 있다는 안내도 있습니다.

예시: 블로그 글과 JSON-LD

여행 블로그 글에 Article 구조화 데이터를 붙이는 경우입니다. 제목에 큰따옴표와 &를 넣고, og:type은 article, Schema.org는 Article로 고른 뒤 작성자를 입력했습니다. 앞의 예와 같은 방법으로 입력하되, 이미지 너비·높이 칸의 1200과 630(Ctrl/⌘+L로는 지워지지 않습니다)도 지우면 다음과 같습니다.

<title>제주 3박 4일 &quot;뚜벅이&quot; 일정표 &amp; 예산 정리</title>
<meta name="description" content="버스로만 다닌 제주 3박 4일 코스와 하루 예산을 정리했습니다.">
<link rel="canonical" href="https://travel.example.kr/jeju-4days/">
<meta name="author" content="김민지">
<meta name="robots" content="index, follow">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="article">
<meta property="og:title" content="제주 3박 4일 &quot;뚜벅이&quot; 일정표 &amp; 예산 정리">
<meta property="og:description" content="버스로만 다닌 제주 3박 4일 코스와 하루 예산을 정리했습니다.">
<meta property="og:url" content="https://travel.example.kr/jeju-4days/">
<meta property="og:site_name" content="민지의 여행 노트">
<meta property="og:image" content="https://travel.example.kr/og/jeju-4days.jpg">
<meta property="og:locale" content="ko_KR">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="제주 3박 4일 &quot;뚜벅이&quot; 일정표 &amp; 예산 정리">
<meta name="twitter:description" content="버스로만 다닌 제주 3박 4일 코스와 하루 예산을 정리했습니다.">
<meta name="twitter:image" content="https://travel.example.kr/og/jeju-4days.jpg">

<!-- Schema.org JSON-LD -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "name": "제주 3박 4일 \"뚜벅이\" 일정표 & 예산 정리",
  "description": "버스로만 다닌 제주 3박 4일 코스와 하루 예산을 정리했습니다.",
  "url": "https://travel.example.kr/jeju-4days/",
  "image": "https://travel.example.kr/og/jeju-4days.jpg",
  "author": {
    "@type": "Person",
    "name": "김민지"
  }
}
</script>

속성 안에서는 큰따옴표가 ", &가 &로 바뀌고, JSON-LD에서는 JSON 규칙대로 큰따옴표 앞에 역슬래시가 붙습니다. 너비·높이 칸이 비어 있으므로 og:image:width와 og:image:height 줄은 나오지 않습니다. 이미지 크기 태그를 원하면 실제 이미지 크기를 숫자로 넣으세요. 이 칸은 태그만 바꿀 뿐 이미지 크기를 조정하지는 않습니다.

글자 수 카운터는 제목에 26 / 60, 설명에 35 / 160을 표시합니다. 자바스크립트 문자열 길이를 세기 때문에 한글 한 글자, 영문 한 글자, 공백이 모두 1입니다. Google의 스니펫 문서는 meta description의 길이에 제한이 없고, 검색 결과에서는 필요에 따라, 보통 기기 너비에 맞춰 잘린다고 설명합니다. 60과 160은 참고용으로만 보세요.

제한 사항

• JSON-LD는 최소 항목만 씁니다. name, description, url, image와 Article일 때의 author뿐입니다. Google의 Article 문서는 headline, datePublished를 권장하고, Product가 제품 리치 결과 대상이 되려면 offers, review, aggregateRating 중 하나가 있어야 합니다. 필요한 항목은 직접 추가하고 Google 리치 결과 테스트로 확인하세요.
• 짝이 되는 항목이 없는 선택지가 있습니다. Twitter의 player, app 카드에는 twitter:player나 twitter:app:*가 필요하지만 이 도구는 출력하지 않습니다. og:type의 product는 ogp.me에 정의된 유형이 아닙니다. article:published_time, og:image:type, hreflang도 출력하지 않습니다.
• robots는 항상 출력됩니다. index, follow는 크롤러의 기본 동작과 같으므로 noindex나 nofollow로 바꾸지 않는다면 그 줄을 지워도 됩니다.
• 미리보기는 근사치입니다. 정규 URL이 비어 있으면 사이트 이름으로 미리보기용 도메인을 만드는데, ‘숲속상회’처럼 반각 영문자나 숫자가 없는 이름이면 example.com으로 표시합니다. 실제 카드는 공개 후 각 서비스의 디버거로 확인하세요.
• 네트워크: 태그 내용은 브라우저 안에 남지만, Facebook, Twitter, Discord 미리보기는 입력한 이미지 URL을 불러오므로 이미지 호스트에 요청이 갑니다. 처음 보이는 Google 미리보기에는 이미지가 없습니다.
• Ctrl/⌘+L은 텍스트 칸만 지웁니다. og:locale과 테마 색상 텍스트를 포함한 텍스트 칸이 비워지고, URL 칸, 숫자 칸, 선택 상자, viewport 체크는 그대로 둔 채 head를 다시 만듭니다.

이미지 크기 치트시트

출력은 어디에 붙여 넣을까

생성된 블록은 <head> 안, <meta charset> 다음, 서드파티 스크립트보다 앞에 두는 것이 좋습니다. 크롤러는 순서를 따지지 않지만, SNS용 메타 태그를 한곳에 모아 두면 나중에 점검하기 쉽습니다.

같은 SEO 작업에서 함께 쓰면 좋은 도구: Robots.txt 생성기(크롤링 규칙)와 Favicon 생성기(아이콘 세트).