메타 태그 생성기 — OG 태그·카카오톡 미리보기 만들기
검색과 링크 공유용 메타 태그(Open Graph, X 카드)를 만들고 미리보기를 보여 주는 도구
브라우저에서 처리 · 서버로 전송되지 않음
예시 값이 들어 있어요. 내 페이지 정보로 바꿔 넣으세요.
https:// (또는 http://)로 시작하는 전체 주소를 넣으세요.
공유할 때 보일 이미지의 전체 주소예요. 미리보기는 브라우저가 이 주소에서 이미지를 직접 불러와요.
@없이 넣어도 돼요. 비워 두면 태그를 넣지 않아요.
생성된 태그
태그 12줄 생성, 확인할 점 2개
- 대표 이미지가 없으면 카카오톡·페이스북 미리보기에 이미지가 나오지 않아요.
- 큰 이미지 카드를 골랐는데 이미지가 없어요.
<title>글자 수 세기 — 공백 포함·제외 글자 수 계산기</title> <meta name="description" content="글을 붙여 넣으면 공백 포함·제외 글자 수와 바이트를 바로 세어 줘요. 자기소개서 분량 확인에 써 보세요."> <link rel="canonical" href="https://www.example.com/ko/character-counter/"> <meta property="og:type" content="website"> <meta property="og:title" content="글자 수 세기 — 공백 포함·제외 글자 수 계산기"> <meta property="og:description" content="글을 붙여 넣으면 공백 포함·제외 글자 수와 바이트를 바로 세어 줘요. 자기소개서 분량 확인에 써 보세요."> <meta property="og:url" content="https://www.example.com/ko/character-counter/"> <meta property="og:site_name" content="예시 사이트"> <meta property="og:locale" content="ko_KR"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="글자 수 세기 — 공백 포함·제외 글자 수 계산기"> <meta name="twitter:description" content="글을 붙여 넣으면 공백 포함·제외 글자 수와 바이트를 바로 세어 줘요. 자기소개서 분량 확인에 써 보세요.">
HTML의 <head> 안에 붙여 넣으세요.
미리보기 (모형)
글자 수 세기 — 공백 포함·제외 글자 수 계산기
글을 붙여 넣으면 공백 포함·제외 글자 수와 바이트를 바로 세어 줘요. 자기소개서 분량 확인에 써 보세요.
example.com
예시 사이트
https://www.example.com/ko/character-counter/
글자 수 세기 — 공백 포함·제외 글자 수 계산기
글을 붙여 넣으면 공백 포함·제외 글자 수와 바이트를 바로 세어 줘요. 자기소개서 분량 확인에 써 보세요.
실제 앱 화면을 흉내 낸 모형이라 글자 수와 잘리는 위치는 다를 수 있어요. 구글 제목·설명이 잘리는 폭은 검색 결과 미리보기 도구로 확인하세요. 카카오톡은 한 번 공유된 링크 정보를 한동안 저장해 두기도 해서, 태그를 고친 뒤에도 예전 미리보기가 보일 수 있어요.
Open Graph 프로토콜(ogp.me)과 X(트위터) 카드 태그 이름을 따라요. 카카오톡·페이스북·링크드인·슬랙은 og:title·og:description·og:image·og:url을 읽고, X는 twitter:card를 먼저 보고 나머지는 og: 태그로 대신할 수 있어요. 입력값의 큰따옴표와 <, >, &는 HTML에 안전하게 바꿔 넣어요. 입력한 내용은 저장하거나 보내지 않아요.
소개
메타 태그 생성기는 웹 페이지의
에 넣을 검색·공유용 태그를 한 번에 만들어 줘요. 블로그 글이나 쇼핑몰 상품 페이지를 카카오톡, 페이스북, X(트위터)에 공유하면 제목과 설명, 대표 이미지가 담긴 카드가 나오는데, 이 카드는 페이지에 들어 있는 Open Graph(og:) 태그를 읽어서 만들어져요. 태그 이름과 따옴표 처리를 하나하나 기억할 필요 없이 입력칸만 채우면 붙여 넣을 수 있는 HTML이 나오고, 카카오톡과 구글 검색 결과에서 대략 어떻게 보일지도 바로 확인할 수 있어요.사용법
- 제목, 설명, 페이지 주소를 넣어요. 처음에는 예시 값이 들어 있어요.
- 대표 이미지의 전체 주소(https://…)와 이미지 설명을 넣어요. 이미지가 없으면 공유 카드에 그림이 나오지 않는다는 안내가 떠요.
- 사이트 이름, 페이지 종류(웹사이트·글), 언어, X 카드 종류를 골라요. X 계정은 선택이에요.
- 생성된 태그 위에 뜨는 확인할 점(상대 주소, 빈 제목 등)을 고쳐요.
- 복사 버튼을 눌러 태그를 페이지의 안에 붙여 넣어요.
- 아래 카카오톡·구글 미리보기 모형으로 대략적인 모습을 확인해요.
기준
- 태그 이름은 Open Graph 프로토콜(ogp.me)의 og:type, og:title, og:description, og:url, og:site_name, og:locale, og:image, og:image:alt와 X(트위터) 카드의 twitter:card, twitter:site, twitter:title, twitter:description, twitter:image를 따라요.
- 같은 주소를 canonical 링크와 og:url에 함께 넣어요.
- 입력값의 큰따옴표, <, >, &는 HTML 엔티티로 바꾸고, 줄바꿈과 연속 공백은 공백 하나로 합쳐요. 빈 칸의 태그는 넣지 않아요.
- X 계정은 영문·숫자·밑줄 15자까지만 태그에 넣어요.
- 미리보기는 실제 앱 화면을 흉내 낸 모형이라 글꼴과 잘리는 위치가 다를 수 있어요.
예시
| 입력 | 생성되는 태그 |
|---|---|
| 제목: 글자 수 세기 | <title>글자 수 세기</title>, og:title, twitter:title |
| 설명에 “큰따옴표” 포함 | content=""큰따옴표" 포함" |
| X 계정: toolsnack | <meta name="twitter:site" content="@toolsnack"> |
| 이미지 주소 /og.png | “전체 주소여야 해요” 안내 |
태그를 넣은 뒤에는 페이지를 새로 배포하고, 실제로 메신저에 링크를 보내 확인해 보는 것이 가장 확실해요. 쇼핑몰 상품 페이지처럼 페이지마다 제목과 이미지가 다르다면 이 도구로 한 페이지의 모양을 먼저 정한 뒤, 같은 구조를 템플릿에 적용하면 돼요.
자주 묻는 질문
카카오톡에 링크를 보내면 미리보기가 안 나와요.
카카오톡은 페이지의 og:title, og:description, og:image를 읽어 미리보기를 만들어요. 이 태그가 없거나 이미지 주소가 https://로 시작하는 전체 주소가 아니면 이미지가 빠지거나 다른 글이 보일 수 있어요. 이 도구로 만든 태그를 <head>에 넣고 다시 공유해 보세요.
태그를 고쳤는데 카카오톡에는 예전 미리보기가 나와요.
카카오톡은 한 번 공유된 링크의 정보를 한동안 저장해 두기도 해요. 시간이 지나면 새 정보로 바뀌고, 카카오 개발자 사이트의 공유 관련 도구로 저장된 정보를 다시 읽게 할 수도 있어요.
대표 이미지는 어떤 크기가 좋나요?
미리보기는 플랫폼마다 다르게 잘라서 보여 줘요. 카카오톡 웹 링크 썸네일은 가로가 긴 2:1(예: 800×400px) 비율로 보인다는 정리(mrlatte, 2023)가 있으니, 중요한 글자나 얼굴은 가운데에 두는 것이 안전해요.
제목과 설명은 몇 자가 적당한가요?
구글은 글자 수가 아니라 화면 폭으로 잘라서 정해진 글자 수가 없어요. 검색 결과에서 어디서 잘리는지는 검색 결과 미리보기 도구로 픽셀 단위로 확인할 수 있어요.
입력한 내용이 저장되나요?
아니요. 태그 만들기와 미리보기는 브라우저 안에서 이루어져요. 다만 이미지 주소를 넣으면 미리보기를 위해 브라우저가 그 주소에서 이미지를 직접 불러와요.
