🏷️ 메타 태그·OG 태그 생성기
제목·설명·대표 이미지·주소로 title, description, canonical, robots, Open Graph, X 카드 태그를 만들어 복사해요.
사용법
- 제목과 설명을 넣어요. 검색 결과에 제목은 파란 링크로, 설명은 그 아래 회색 글로 나오는 문장이에요. 오른쪽 '검색 결과 미리보기'에서 대략 어떻게 보일지 확인할 수 있어요.
- 페이지 주소(URL)는
https://부터 쓴 완전한 주소를 넣어요. 같은 내용이 여러 주소로 열릴 때 대표 주소를 알려 주는 canonical과 공유 미리보기의 주소(og:url)에 쓰여요. - 대표 이미지 주소는 카카오톡·페이스북·X에 링크를 올릴 때 나오는 미리보기 이미지예요. 역시
https://로 시작하는 완전한 주소여야 해요. - 필요하면 사이트 이름, 콘텐츠 종류(website, article), 언어를 고르고 robots 옵션(noindex, nofollow)을 체크해요.
- 오른쪽 결과를 copy 버튼으로 복사해 HTML의
<head>안에 붙여 넣으면 끝이에요.
각 태그가 하는 일
| 태그 | 역할 | 메모 |
|---|---|---|
<title> | 브라우저 탭 이름, 검색 결과의 제목 링크 | 페이지마다 고유하게. 핵심 검색어를 앞쪽에 두세요. |
meta description | 검색 결과 제목 아래 설명 문장의 후보 | 검색엔진이 본문 내용을 보고 다른 문장으로 바꿔 보여 줄 수도 있어요. |
link canonical | 대표 주소 알림 | 쿼리 문자열·http/https·www 중복 주소를 하나로 모을 때 써요. |
meta robots | 검색 색인·링크 추적 제한 | noindex를 넣으면 검색 결과에서 빠져요. 실수로 넣지 않게 주의하세요. |
og:title, og:description | 링크 공유 미리보기의 제목·설명 | 카카오톡, 페이스북, 슬랙, 디스코드 등이 읽어요. |
og:image | 공유 미리보기 이미지 | 권장 1200×630px(약 1.91:1), 절대 주소. |
og:type, og:url | 콘텐츠 종류, 대표 주소 | Open Graph 규약의 필수 항목이에요. |
twitter:card | X(트위터) 카드 형태 | summary는 작은 정사각 이미지, summary_large_image는 큰 가로 이미지예요. |
제목과 설명, 몇 자가 적당할까
Google은 제목과 설명의 글자 수를 정해 두지 않고, 화면에 표시되는 폭에 맞춰 길면 말줄임표(…)로 잘라요. 그래서 흔히 쓰는 가이드는 제목 약 60자, 설명 약 120~160자 정도예요. 한글은 영문보다 글자 폭이 넓어서 더 일찍 잘릴 수 있으니, 한글 제목은 30자 안팎에서 핵심 단어가 앞에 오도록 쓰는 편이 안전해요. 이 도구는 글자 수를 세어 길이 기준을 넘으면 붉게 표시하지만 이는 어디까지나 대략적인 안내이고, 실제 표시는 기기와 검색엔진마다 달라요. 제목에 같은 키워드를 반복해서 채우거나, 모든 페이지에 같은 설명을 쓰는 것은 피하세요. 페이지마다 고유한 제목·설명이 검색엔진과 방문자 모두에게 도움이 돼요.
계산 예시 — 이런 결과가 나와요
제목 '강아지 사료 급여량 계산기 | 예시사이트', 설명 '체중과 활동량만 넣으면 하루 사료 급여량을 계산해요.', 주소 https://example.com/pet/food/, 이미지 https://example.com/og.png를 넣고 Open Graph와 X 카드를 모두 켜면 아래처럼 만들어져요.
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>강아지 사료 급여량 계산기 | 예시사이트</title> <meta name="description" content="체중과 활동량만 넣으면 하루 사료 급여량을 계산해요."> <link rel="canonical" href="https://example.com/pet/food/"> <meta property="og:type" content="website"> <meta property="og:site_name" content="예시사이트"> <meta property="og:url" content="https://example.com/pet/food/"> <meta property="og:title" content="강아지 사료 급여량 계산기 | 예시사이트"> <meta property="og:description" content="체중과 활동량만 넣으면 하루 사료 급여량을 계산해요."> <meta property="og:image" content="https://example.com/og.png"> <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="체중과 활동량만 넣으면 하루 사료 급여량을 계산해요."> <meta name="twitter:image" content="https://example.com/og.png">
제목에 &, ", < 같은 문자가 들어가면 속성이 깨지지 않도록 자동으로 &, ", <로 바꿔 줘요. 설명 안의 줄바꿈과 연속 공백은 공백 하나로 합쳐요.
붙여 넣은 뒤 확인하는 방법
- 카카오톡·페이스북 미리보기가 안 바뀔 때: 이미 공유된 적 있는 주소는 서비스 쪽에 캐시돼 있어요. 카카오 디버거, 페이스북 공유 디버거 같은 도구에서 주소를 다시 읽게(스크랩) 해야 새 이미지가 보여요.
- 이미지가 안 나올 때: 이미지 주소가 상대 경로(
/og.png)가 아닌지, 로그인 없이 열리는지, 파일이 너무 크지 않은지(보통 수 MB 이하) 확인하세요. - 검색 결과 반영: 제목·설명을 고쳐도 검색엔진이 다시 읽기 전까지는 이전 내용이 보여요. 서치 콘솔의 URL 검사에서 색인 생성을 요청하면 빨라질 수 있어요.
- body에 넣지 않기: 이 태그들은
<head>안에 있어야 읽혀요.
자주 하는 실수
- 모든 페이지에 같은 제목·설명: 템플릿 하나를 복사해 쓰면 중복 제목으로 보여요. 페이지마다 바꿔 주세요.
- canonical을 다른 페이지로 지정: 대표 주소가 아니라 엉뚱한 주소를 넣으면 현재 페이지가 검색에서 빠질 수 있어요.
- 개발 중 넣은 noindex를 지우지 않음: 서비스 오픈 때 robots 메타 태그를 제거했는지 꼭 확인하세요.
- og:image에 로고만 사용: 정사각 작은 로고는 큰 카드에서 잘리거나 흐릿해 보여요. 가로형 이미지를 따로 준비하세요.
- keywords 태그에 기대기: Google은 meta keywords를 검색 순위에 쓰지 않는다고 밝혔고, 이 도구도 만들지 않아요.
참고 문서: Google 검색 센터 — 제목 링크, Google 검색 센터 — 스니펫, The Open Graph protocol, X Cards 문서.
이 페이지처럼 도구마다 제목과 설명이 달라야 검색 결과에서 구분돼요. 직접 만든 태그는 배포 전에 브라우저 개발자 도구(Elements 탭)에서 <head> 안에 한 번씩만 들어갔는지, 같은 태그가 중복되지 않았는지 살펴보세요. 템플릿에 이미 title이나 description이 있는데 또 붙여 넣으면 두 개가 생겨 어느 쪽이 쓰일지 알 수 없어요.
입력한 제목·설명·주소는 서버로 전송되지 않고 이 브라우저 안에서만 처리돼요. 생성된 태그는 사이트 구조에 맞는지 직접 확인한 뒤 사용하세요.