메타 태그 생성기 — 타이틀, 설명, Open Graph, Twitter 태그
페이지 제목, 설명, 소셜 카드 정보를 입력하면 실시간 글자 수 카운터와 함께 올바르게 이스케이프된 완전한 <head> 블록을 만들어 줍니다.
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Free Business & Marketing Tools | FreeToolsForWeb</title> <meta name="description" content="Free online tools for business: converters, calculators, SEO utilities and a sample-file library. No signup, no ads."> <link rel="canonical" href="https://www.example.com/page"> <meta name="theme-color" content="#244b3f"> <!-- Open Graph (Facebook, LinkedIn, Slack, WhatsApp) --> <meta property="og:type" content="website"> <meta property="og:title" content="Free Business & Marketing Tools | FreeToolsForWeb"> <meta property="og:description" content="Free online tools for business: converters, calculators, SEO utilities and a sample-file library. No signup, no ads."> <meta property="og:url" content="https://www.example.com/page"> <meta property="og:site_name" content="Example Co"> <meta property="og:image" content="https://www.example.com/images/share.png"> <meta property="og:locale" content="en_US"> <!-- Twitter / X card --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Free Business & Marketing Tools | FreeToolsForWeb"> <meta name="twitter:description" content="Free online tools for business: converters, calculators, SEO utilities and a sample-file library. No signup, no ads."> <meta name="twitter:image" content="https://www.example.com/images/share.png">
<head> 안에 붙여 넣으세요. Next.js, React Helmet, CMS에서는 HTML을 그대로 붙여 넣지 말고 각 줄을 해당 필드에 대응시키세요.
모든 작업이 브라우저에서 실행됩니다. 입력한 내용은 전송되거나 저장되지 않습니다. 모든 무료 도구 보기.
문제를 발견하셨거나 개선할 점이 있나요? 모든 메시지를 읽고 빠르게 고칩니다.
이 무료 메타 태그 생성기는 페이지에 필요한 head 태그 전체를 만들어 줍니다. 실시간 글자 수 카운터가 있는 타이틀과 메타 디스크립션, canonical과 robots 지시어, 그리고 LinkedIn, Facebook, X, Slack, WhatsApp에서 링크를 공유할 때 표시되는 모습을 결정하는 Open Graph와 Twitter Card 태그까지 포함됩니다. 값은 올바르게 이스케이프되므로 타이틀에 앰퍼샌드나 따옴표가 있어도 HTML이 깨지지 않습니다.
메타 태그는 온페이지 SEO에서 가장 작지만 가장 눈에 띄는 부분입니다. 타이틀과 설명은 직접 쓰지 않으면 Google이 대신 써 버리는 광고 문구와 같고, 소셜 태그는 공유된 링크에 이미지와 제목이 표시될지 URL만 덩그러니 보일지를 결정합니다. 아래 안내에서 현재 길이 제한과 더 이상 효과가 없는 태그를 정리했으니, 2026년에 meta keywords 태그를 관리하는 일은 없도록 하세요.
사용 방법
- 페이지 타이틀(50~60자, 키워드를 앞에)과 메타 디스크립션(120~160자, 클릭할 이유를 담아)을 입력하세요. 적정 범위에 들면 카운터가 초록색으로 바뀝니다.
- canonical URL은 페이지의 대표 주소로 설정하고, 검색에서 제외해야 하는 페이지가 아니라면 robots는 index, follow로 두세요.
- 공유 이미지(1200 × 630픽셀), 사이트 이름, Twitter 핸들을 추가하세요. 소셜 태그에는 같은 타이틀과 설명이 재사용됩니다.
- 검색 미리보기를 확인한 다음 생성된 블록을 페이지의 <head>에 복사하세요.
- 게시한 뒤 Open Graph 미리보기 도구로 실제 페이지를 테스트해 태그가 의도대로 제공되는지 확인하세요.
자주 묻는 질문
SEO에 실제로 중요한 메타 태그는 무엇인가요?
타이틀(직접적인 순위 신호이자 검색 결과의 제목), 메타 디스크립션(순위 신호는 아니지만 스니펫이 되어 클릭률을 좌우), canonical(중복 콘텐츠로 인한 분산 방지), robots(index/noindex 제어), viewport(모바일 사용성)입니다. Open Graph와 Twitter 태그는 순위가 아니라 소셜 공유에 영향을 줍니다. meta keywords 태그는 2009년부터 Google이 무시하고 있으니 신경 쓰지 마세요.
타이틀과 설명은 얼마나 길어야 하나요?
타이틀은 약 50~60자입니다. Google은 픽셀 너비 약 600px에서 잘라 내기 때문입니다. 설명은 데스크톱에서 120~160자, 모바일에서는 그보다 짧습니다. Google은 더 나은 문구를 만들 수 있다고 판단하면 둘 다 다시 쓰며, 일반적이거나 키워드를 남발한 문구일수록 그런 일이 잦으니 구체적이고 정직하게 쓰세요.
Open Graph 태그와 Twitter Card 태그가 모두 필요한가요?
X는 대체 수단으로 Open Graph 태그를 읽으므로 대부분은 og:*만으로 충분합니다. 다만 twitter:card는 큰 이미지 카드와 작은 요약 카드 중 무엇을 쓸지 정하므로 추가할 가치가 있습니다. 그 밖의 플랫폼(LinkedIn, Facebook, Slack, WhatsApp, iMessage, Discord)은 Open Graph만 읽습니다.
공유 이미지는 어떤 크기여야 하나요?
1200 × 630픽셀(1.91:1)이 모든 플랫폼의 큰 카드에 안전한 크기입니다. 너비가 600px 미만이면 Facebook과 LinkedIn은 작은 썸네일로 표시하거나 이미지를 표시하지 않습니다. 일부 플랫폼은 피드에서 정사각형으로 잘라 내므로 중요한 내용은 가장자리에서 떨어뜨려 두세요. HTTPS 절대 URL을 사용하세요.
모든 페이지에 canonical 태그가 있어야 하나요?
네. 다른 페이지의 중복이 아니라면 자기 자신을 가리키게 하세요. 추적 매개변수, 끝 슬래시 유무, http/https 변형을 하나의 URL로 정리해 주는 값싼 보험입니다. canonical은 200을 반환하는 페이지의 절대 URL이어야 합니다.
더 이상 효과가 없는 태그
meta keywords(2009년부터 무시됨), meta revisit-after, meta distribution, meta rating, 그리고 Google 전용 geo.* 태그는 모두 쓸모없는 군더더기입니다. robots 값 중 noodp, noydir, nosnippet 변형은 폐지되었거나 max-snippet으로 대체되었습니다. 템플릿이 아직 이런 태그를 출력한다면 지워도 안전하고 코드도 조금 더 깔끔해집니다.
이스케이프와 인코딩
속성 값에서는 &를 &로, "를 "로 이스케이프해야 하며, 이 생성기가 자동으로 처리합니다. 브라우저가 나머지를 올바르게 디코딩하도록 <head>의 맨 처음에 charset utf-8을 선언하세요. 프레임워크(Next.js, Nuxt, Django, Rails, WordPress)에서는 원시 HTML을 붙여 넣기보다 프레임워크의 head 또는 SEO 컴포넌트로 값을 설정하세요. 그래야 페이지별로 관리되고 자동으로 이스케이프됩니다.
관련 무료 도구
- 검색 결과 스니펫 미리보기 — 페이지 제목과 메타 설명이 Google에서 어떻게 보일지 실시간 글자 수 확인과 함께 미리 보세요.
- 오픈 그래프 미리보기 — URL을 입력하면 Facebook, LinkedIn, X, Slack이 보여 줄 카드 그대로, 찾은 모든 태그와 빠진 항목까지 확인할 수 있습니다.
- robots.txt 생성기 — 모두 허용, 스테이징, WordPress 프리셋과 AI 크롤러 섹션(학습은 차단, AI 검색은 유지)으로 robots.txt를 만들고, 사이트를 색인에서 빠지게 만드는 실수를 경고받으세요.