메타 태그 생성기는 페이지 제목, 설명, 대표(canonical) URL, 선택 사항인 미리보기 이미지(필요하면 사이트 이름, X 계정, 로봇 지시, Open Graph 유형까지)를 입력받아 검색엔진과 소셜 플랫폼이 읽는 <head> 태그 묶음을 만듭니다. <title>, <meta name="description">, <link rel="canonical">, 페이스북·링크드인·슬랙·대부분의 메신저가 링크 미리보기에 쓰는 Open Graph 태그, 그리고 트위터 카드 태그가 포함됩니다. 코드 옆에 구글 검색 결과, Open Graph 카드, X 카드를 함께 그려 주므로 각 플랫폼에 어떻게 보일지 바로 확인할 수 있습니다.
직접 쓰지 않고 생성하는 이유는 일관성입니다. 같은 제목과 설명이 일반 태그와 Open Graph·트위터 태그에 똑같이 들어가고, Tom & Jerry's "Guide" 같은 제목도 따옴표와 꺾쇠가 이스케이프되어 속성이 깨지지 않으며, URL은 브라우저의 URL 파서로 정규화됩니다. 결과는 정적 페이지, 템플릿, 프레임워크의 head 컴포넌트에 붙여 넣으면 됩니다.
모든 처리는 브라우저 안에서 이루어집니다. 페이지나 이미지를 가져오지 않으므로 이미지가 실제로 열리는지, 페이지에 접속되는지는 확인해 주지 못합니다. 네트워크 요청은 직접 입력한 미리보기 이미지뿐이며, 공유 링크로 들어온 이미지는 "미리보기 이미지 불러오기"를 누르기 전까지 차단됩니다.
사용 방법
제목 쓰기
페이지 제목을 입력합니다. 필수이며
<title>,og:title,twitter:title에 쓰입니다. 카운터가 글자 수와 픽셀 너비를 보여 주고, 구글이 제목을 말줄임표로 자르는 약 600px을 넘으면 막대가 빨갛게 바뀝니다.설명 쓰기
한두 문장짜리 요약을 입력합니다. meta description,
og:description,twitter:description이 됩니다. 약 920px(대략 155자)을 넘으면 카운터가 알려 주고 구글 미리보기에 잘리는 위치가 표시됩니다.대표 URL 입력
https://또는http://로 시작하는 페이지의 대표 주소 전체를 입력합니다.link rel=canonical과og:url에 쓰입니다.미리보기 이미지 추가(선택)
이미지의 절대 URL을 입력합니다. 이미지가 있으면 트위터 카드 유형이
summary_large_image가 되고og:image,twitter:image태그가 추가되며, 없으면summary입니다.결과 복사
생성된 묶음을 복사해 페이지의
<head>안에 페이지당 한 번만 붙여 넣습니다.
작동 원리
각 태그의 역할
<title>은 브라우저 탭에 표시되고 검색 결과의 제목으로 자주 쓰이는 문서 제목입니다. meta description은 검색엔진이 스니펫으로 보여 줄 수 있는 요약이지만, 페이지 내용으로 스니펫을 직접 만들 수도 있습니다. canonical 링크는 같은 내용이 여러 주소(추적 파라미터, 끝 슬래시, http와 https)로 열릴 때 대표 URL을 알려 줍니다.
Open Graph는 원래 페이스북이 만든 프로토콜로, og: 속성이 URL을 공유할 때의 모습을 정합니다. 이 도구는 선택한 og:type(기본값 website, 또는 article, product, profile)과 og:title, og:description, og:url을 씁니다. 선택 입력에 따라 og:site_name, og:image, og:image:alt, twitter:site, twitter:image, twitter:image:alt도 추가합니다. 트위터 카드에는 twitter:card, twitter:title, twitter:description도 들어가며, 트위터·X 카드를 읽는 플랫폼은 빠진 값을 Open Graph 값으로 대체합니다. 기본값이 아닌 로봇 지시를 고르면 robots 태그를, 기본 태그 옵션을 켜면 charset과 viewport 태그를 추가합니다.
이스케이프와 URL 정규화
HTML 속성이나 요소 안에 들어가는 값은 &, <, >, ", '를 문자 참조로 바꿔야 합니다. 그러지 않으면 따옴표 하나가 속성을 일찍 끝내 버립니다. 생성기는 이 문자들을 &, <, >, ", '로 치환합니다.
URL은 WHATWG URL 파서를 거칩니다. https://example.com처럼 도메인만 있으면 https://example.com/으로 바뀌어 출력되고, http나 https가 아닌 값(javascript:, 상대 경로 등)은 거부됩니다.
| 태그 | 입력 출처 | 항상 출력? |
|---|---|---|
<title> | 제목 | 예 |
meta name=description | 설명 | 예 |
link rel=canonical | 대표 URL | 예 |
og:type, og:title, og:description, og:url | Open Graph 유형, 제목, 설명, URL | 예 |
twitter:card, twitter:title, twitter:description | 제목, 설명 | 예 (summary 또는 summary_large_image) |
og:site_name | 사이트 이름 | 사이트 이름이 있을 때만 |
og:image, twitter:image, og:image:alt, twitter:image:alt | 이미지 URL과 이미지 설명 | 이미지 태그는 이미지가 있을 때, alt 태그는 설명도 있을 때 |
twitter:site | X 핸들 | X 핸들이 있을 때만 |
meta name=robots | 로봇 지시 | 기본값이 아닌 지시일 때만 |
meta charset, meta name=viewport | 기본 태그 포함 | 옵션을 켰을 때만 |
실제 권장 길이
검색엔진은 글자 수가 아니라 픽셀 너비로 제목과 스니펫을 자르므로 보장되는 한도는 없습니다. 보통 제목은 50~60자 안팎(20px 기준 약 600px), 설명은 120~160자 안팎(14px 기준 약 920px)이면 데스크톱에서 대체로 전체가 표시됩니다. 이 도구는 Arial 글꼴 폭으로 너비를 재어 그 한도에서 구글 미리보기를 자르므로, 잘리는 위치는 약속이 아니라 근사치로 보세요. 더 긴 초안도 다룰 수 있도록 제목 300자, 설명 600자까지 받습니다.
실제 예시
제목: Product guide
설명: A practical guide for building a better product.
대표 URL: https://example.com/guide
이미지: (비움)<title>Product guide</title>
<meta name="description" content="A practical guide for building a better product.">
<link rel="canonical" href="https://example.com/guide">
<meta property="og:type" content="website">
<meta property="og:title" content="Product guide">
<meta property="og:description" content="A practical guide for building a better product.">
<meta property="og:url" content="https://example.com/guide">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Product guide">
<meta name="twitter:description" content="A practical guide for building a better product.">제목: Tom & Jerry's "Guide"
설명: Cats <b>and</b> mice.
대표 URL: https://example.com/guide?a=1&b=2
이미지: https://example.com/og.png<title>Tom & Jerry's "Guide"</title>
<meta name="description" content="Cats <b>and</b> mice.">
<link rel="canonical" href="https://example.com/guide?a=1&b=2">
<meta property="og:type" content="website">
<meta property="og:title" content="Tom & Jerry's "Guide"">
<meta property="og:description" content="Cats <b>and</b> mice.">
<meta property="og:url" content="https://example.com/guide?a=1&b=2">
<meta property="og:image" content="https://example.com/og.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Tom & Jerry's "Guide"">
<meta name="twitter:description" content="Cats <b>and</b> mice.">
<meta name="twitter:image" content="https://example.com/og.png">Open Graph 이미지 태그가 트위터 카드 묶음보다 먼저 출력됩니다. 이미지 설명을 입력하면 각 이미지 태그 바로 뒤에 해당 alt 태그도 붙습니다.
대표 URL: example.com오류: Use an http or https URL스킴이 없는 URL은 URL 파서에서 유효하지 않습니다. 글자 수 제한을 넘으면 "Use text within the supported length"가 나옵니다(오류 문구는 도구가 영어로 표시).
자주 하는 실수
상대 경로 이미지 URL
og:image는 절대 URL이어야 하며 이 도구는http또는https만 받습니다./og.png같은 경로는 거부되므로 전체 주소를 쓰세요.엉뚱한 페이지를 가리키는 canonical
다른 페이지를 가리키는 canonical은 검색엔진에 그 페이지를 원본으로 취급하라고 알리는 셈입니다. 추적 파라미터를 뺀 해당 페이지 자신의 대표 URL을 쓰세요.
페이지당 한 묶음
이미
<title>이나 설명을 출력하는 레이아웃에 생성된 묶음을 또 붙여 넣지 마세요. 제목·설명이 중복되면 충돌이 생기고, 먼저 발견한 것을 쓰는 크롤러도 있습니다.캐시된 소셜 미리보기
플랫폼은 링크 미리보기를 캐시합니다. 제목이나 이미지를 바꿔도 해당 플랫폼의 디버거나 캐시가 갱신되기 전까지 공유된 링크에는 예전 카드가 계속 나올 수 있습니다.
선택 태그가 자동으로 모두 생긴다고 생각하기
사이트 이름, 이미지 설명, X 핸들을 입력해야 해당 태그가 나옵니다. 기본값이 아닌 로봇 지시를 골라야
meta name=robots가 나오고, 기본 태그 옵션을 켜야 charset과 viewport가 나옵니다.og:locale과 이미지 크기는 출력하지 않습니다.
자주 묻는 질문
Open Graph와 트위터 태그를 둘 다 써야 하나요?
트위터·X는 자체 twitter: 태그를 먼저 읽고 없으면 Open Graph 값을 씁니다. 둘 다 있으면 안전하며, 생성기는 같은 입력으로 두 가지를 함께 만듭니다.
meta description이 순위에 영향을 주나요?
구글은 meta description이 순위 요소가 아니라고 밝혔지만 검색 결과의 스니펫으로 쓰일 수 있어 분명한 설명은 클릭률에 도움이 됩니다. 구글이 스니펫을 직접 만들 때도 있습니다.
og:image는 어떤 크기가 좋나요?
흔히 1.91:1 비율의 1200x630픽셀을 쓰며 대부분의 플랫폼에서 큰 링크 미리보기에 무난합니다. 도구는 이미지 자체를 검사하지 않습니다.
대표 URL이 조금 바뀌어 나오는 이유는요?
URL이 브라우저 파서로 정규화되기 때문입니다. https://example.com은 https://example.com/이 되고 특수 문자는 퍼센트 인코딩됩니다.
텍스트가 거부되는 이유는요?
제목과 설명은 비어 있으면 안 되고, 대표 URL(이미지 URL을 넣었다면 그것도)은 http:// 또는 https://로 시작해야 합니다. 긴 초안은 제목 300자, 설명 600자까지 받습니다. 앞뒤 공백은 먼저 제거됩니다.
입력한 텍스트가 어딘가로 전송되나요?
아니요. 태그는 브라우저 안에서 생성되며 업로드나 요청은 일어나지 않습니다.
더 깊이 읽기
마지막 업데이트: