메타 태그 생성기
오픈 그래프 메타 태그
트위터 카드 메타 태그
메타 태그 생성기 사용 방법
- 1
필수 항목 입력
Essential Meta Tags 섹션에 페이지 제목, 설명, 키워드, 작성자, robots 지시문을 입력하세요.
- 2
소셜 공유 태그 추가
Open Graph와 Twitter Card 입력란에 제목, 설명, 이미지 URL을 채워 페이지가 공유될 때의 모습을 제어하세요.
- 3
생성된 태그 검토
각 입력란에 입력하는 동안 메타 태그 마크업이 출력 영역에서 실시간으로 만들어지는 것을 확인하세요.
- 4
<head>에 복사
Copy Meta Tags를 클릭해 생성된 HTML을 페이지의 head 섹션에 붙여넣으세요.
SEO를 위한 HTML 메타 태그 완벽 가이드
메타 태그란 무엇이며 어디에 들어가는가
메타 태그는 페이지의 head 섹션 안에 자리 잡는 HTML 요소로, 사람 방문자가 아니라 브라우저와 검색 엔진, 소셜 네트워크에 문서를 설명합니다. 메타 태그는 페이지 자체에 렌더링되는 법이 없습니다. 브라우저는 무언가를 그리기 전에 이를 읽기 때문에 위치가 중요합니다. 이 생성기가 만들어 내는 모든 태그는 head 요소 안, 되도록이면 상단 가까이, 렌더링을 막는 스크립트보다 앞에 붙여넣어야 합니다. 특히 title 요소와 charset 선언은 가능한 한 일찍 나와야 하는데, 브라우저가 나머지 마크업을 파싱하기 전에 문자 인코딩을 알아야 하기 때문입니다.
가장 중요한 메타데이터 두 가지는 엄밀히 말하면 메타 태그가 아닙니다. title 요소(title)와 표준 링크(link rel="canonical")는 별개의 요소이지만, 같은 head 블록에 속하며 페이지가 어떻게 이해되는지에 핵심적입니다. 이 도구는 title, description, viewport, robots, Open Graph, Twitter Card 태그에 초점을 맞추는데, 이들은 함께 검색과 소셜에 실제로 영향을 주는 메타데이터를 아우릅니다.
title 태그: 가장 중요한 단 하나의 온페이지 신호
title 요소는 당신이 통제할 수 있는 가장 강력한 온페이지 SEO 신호입니다. 보통 Google이 검색 결과에서 파란 클릭 가능한 헤드라인으로 보여 주는 것이자 브라우저 탭에 나타나는 것입니다. 결과 페이지에서 말줄임표로 잘리지 않도록 대략 50~60자, 또는 약 580픽셀을 목표로 하세요. 가장 중요한 키워드를 앞쪽에 두고, 클릭할지 말지 결정하는 사람을 위해 쓰며, 사이트 전체에서 각 제목을 고유하게 유지하세요. 모든 제목 앞에 브랜드 이름을 반복하는 식의 상투적인 문구는 가진 것 중 가장 값진 자리를 낭비하는 일입니다.
흔한 실수는 title 태그와 H1 제목을 서로 바꿔 써도 되는 것처럼 다루는 것입니다. 둘은 서로 다른 청중을 위한 것입니다. title은 검색 스니펫과 탭을 위한 것이고, H1은 페이지 안의 헤드라인입니다. 둘은 다를 수 있고 흔히 달라야 하는데, 검색 결과에서 클릭률을 높이는 이상적인 문구가 이미 페이지에 들어온 사람에게 가장 좋은 헤딩인 것은 아니기 때문입니다.
메타 설명: 순위가 아니라 클릭
메타 설명은 순위에 직접 영향을 주지는 않지만, 클릭률에는 크게 영향을 주며 그것이 중요합니다. 광고 카피처럼 다루세요. 페이지를 요약하고, 쿼리와 일치할 때 굵게 표시될 수 있도록 주요 키워드를 포함하며, 클릭할 이유를 더하세요. 약 150~160자로 유지하세요. 더 긴 설명은 잘리며, Google은 설명이 없거나 중복되거나 쿼리와 잘 맞지 않으면 그 설명을 무시하고 페이지 본문에서 스니펫을 뽑아 다시 쓰는 일이 잦습니다.
Google이 당신의 설명을 무시하고 자체적으로 합성할 수도 있으므로, 핵심 정보를 설명에 의존하지 마세요. 그래도 강력한 설명을 작성하세요. 살아남은 매력적인 설명은 자동 생성된 스니펫보다 흔히 더 나은 성과를 내기 때문입니다. 절대 키워드로 채우지 마세요. 그러면 다시 쓰기가 유발되고 사용자에게는 스팸처럼 읽힙니다.
robots 메타 태그와 크롤링 제어
robots 메타 태그는 검색 엔진이 페이지를 크롤링한 뒤 무엇을 할지 알려 줍니다. 가장 흔한 값은 index/noindex(페이지가 결과에 나타날 수 있는지)와 follow/nofollow(페이지의 링크가 가치를 전달해야 하는지)입니다. noindex, follow 같은 값은 페이지를 색인에서 빼면서도 크롤러가 그 링크를 따라가도록 허용하는데, 내부 검색 결과나 인쇄용 변형처럼 내용이 얕은 페이지에 유용합니다. 그 밖의 지시문으로는 결과가 어떻게 표시되는지를 세밀하게 제어하는 noarchive, nosnippet, max-snippet 등이 있습니다.
중요한 구분이 있습니다. robots 메타 태그는 색인을 제어하고, robots.txt는 크롤링을 제어합니다. 둘은 서로 바꿔 쓸 수 없습니다. robots.txt에서 URL을 차단하면 Google은 그 페이지를 크롤링해 읽을 수 없으므로 페이지의 noindex 태그를 영영 못 볼 수도 있고, 그 URL은 여전히 맨 링크 형태로 결과에 나타날 수 있습니다. 페이지를 검색에서 확실히 제거하려면, 크롤링은 가능하게 두고 noindex를 적용하세요.
viewport, charset, 그리고 기술적 필수 요소
viewport 태그, width=device-width, initial-scale=1.0은 페이지를 모바일 반응형으로 만들어 주는 것입니다. 이것이 없으면 모바일 브라우저는 페이지를 데스크톱 폭으로 렌더링한 뒤 축소하여, 글자가 작아지고 모바일 경험이 나빠집니다. Google은 페이지의 모바일 버전을 먼저 색인하므로, 누락되거나 잘못 설정된 viewport 태그는 외형 문제가 아니라 실제 순위와 사용성 문제입니다. 거의 항상 UTF-8인 charset 선언은 특수문자와 이모지가 깨진 글자(모지바케)가 아니라 올바르게 렌더링되도록 보장합니다.
이 두 태그는 작지만 타협할 수 없습니다. viewport를 기기 폭으로 설정하고, maximum-scale이나 user-scalable=no로 사용자 확대/축소를 비활성화하지 말며(이는 접근성을 해칩니다), 모든 페이지에서 UTF-8 인코딩을 선언하세요.
소셜 미리보기를 위한 Open Graph와 Twitter Card
Open Graph 태그(og: 계열)는 링크가 Facebook, LinkedIn, Slack, Discord를 비롯한 여러 플랫폼에 붙여넣어질 때 어떻게 보이는지를 제어합니다. 핵심 집합은 og:title, og:description, og:image, og:url, og:type입니다. Twitter Card 태그(twitter: 계열)는 X에서 같은 역할을 하며, twitter:card를 summary_large_image로 설정하는 것이 가장 눈길을 끄는 선택지입니다. og:image는 1200 x 630 픽셀 정도로 제공하고 언제나 절대 URL을 사용하세요. 상대 이미지 경로는 미리보기에 썸네일이 나오지 않는 단연 가장 흔한 원인입니다.
소셜 플랫폼은 긁어 간 것을 캐시하므로, 이 태그를 바꾼 뒤에는 플랫폼의 디버깅 도구(예: Facebook의 Sharing Debugger)를 사용해 페이지를 다시 긁어 오래된 미리보기를 지워야 하는 경우가 많습니다. 태그가 누락되면 대부분의 플랫폼은 표준 제목과 설명으로 대체하지만, 결과는 더 밋밋하고 덜 클릭하고 싶은 카드가 됩니다.
더 이상 도움이 안 되는 태그와 흔한 실수
meta keywords 태그는 SEO에서 죽었습니다. Google은 수년 전 meta keywords를 완전히 무시한다고 확인했으며, 이 태그는 목표 키워드를 경쟁자에게 드러내 놓고 알려 주었기 때문에, 채워 넣는 것은 잘해야 무의미하고 나쁘면 소소한 정보 유출입니다. 이 생성기는 완전성과 레거시 시스템을 위해 keywords 필드를 포함하지만, 그것에서 어떤 순위 이점도 기대하지 마세요. meta revisit-after나 meta author 같은 다른 레거시 태그 역시 Google 순위에 아무런 영향이 없습니다.
가장 빈번한 실제 실수는 다음과 같습니다. 여러 페이지에 걸친 중복된 제목과 설명, 표시 한계를 넘겨 잘리는 제목과 설명, 여러 URL로 접근 가능한 페이지에 누락된 표준(canonical) 태그, og:image의 상대 URL, 그리고 스테이징 환경에서 남은 사이트 전체 noindex를 실수로 배포하는 것입니다. JavaScript 프레임워크는 때때로 초기 HTML이 로드된 후 메타 태그를 주입하거나 덮어쓰므로, 브라우저의 소스 보기나 개발자 도구로 최종 렌더링된 head를 언제나 확인하세요.
자주 묻는 질문
이 생성기는 어떤 메타 태그를 만드나요?
Open Graph와 Twitter Card 태그는 무엇을 위한 것인가요?
제목과 설명은 얼마나 길어야 하나요?
OG 태그에 어떤 이미지 크기를 써야 하나요?
생성된 태그는 어디에 두나요?
관련 도구
이런 편리한 도구도 함께 사용해 보세요