Meta Tag Generator
SEO, Open Graph, Twitter Card용 HTML meta tags를 생성하세요. Google과 소셜 미디어에서 페이지가 어떻게 보일지 미리 확인해보세요.
작동 방식: 아래에 페이지 정보를 입력하세요 → Google과 소셜 미디어에 어떻게 보일지 라이브 미리보기 확인 → 생성된 HTML을 복사해서 웹사이트의 <head> tag에 붙여 넣으세요.
Google 검색 결과에 클릭 가능한 제목으로 표시돼요. 60자 이하로 유지하세요.
Google 검색 결과의 제목 아래에 표시돼요. 160자 이하로 유지하세요. 매력적으로 작성하세요!
페이지의 전체 URL이에요. 소셜 미디어 미리보기에 사용돼요.
페이지가 여러 URL에서 접근 가능한 경우에만 필요해요. Google에 '공식' 버전이 어느 것인지 알려줘요.
Google 미리보기
https://example.com
My Awesome Website — Build Something Great
A modern web application that helps developers build better products faster. Free tools, guides, and resources.
소셜 미디어 미리보기
example.com
My Awesome Website — Build Something Great
A modern web application that helps developers build better products faster. Free tools, guides, and resources.
Meta Tags란?
Meta tags는 웹페이지의 <head> 섹션 내에 위치한 HTML 요소로, 검색 엔진과 소셜 미디어 플랫폼에 페이지에 대한 메타데이터를 제공해요. 이들은 Google 검색 결과에서 페이지가 표시되는 방식과 Twitter, Facebook, LinkedIn 등 다른 플랫폼에서 공유될 때의 모습에 영향을 미쳐요.
SEO를 위한 필수 Meta Tags
SEO를 위한 가장 중요한 meta tags는 title tag와 meta description이에요. title tag (50-60자)는 검색 결과에 클릭 가능한 제목으로 나타나요. meta description (150-160자)은 제목 아래의 스니펫이에요. 설득력 있는 description은 랭킹에 직접 영향을 주지 않더라도 클릭률을 크게 향상시킬 수 있어요.
Open Graph Tags
Open Graph (OG) tags는 Facebook, LinkedIn, WhatsApp 등 OG 프로토콜을 지원하는 플랫폼에서 콘텐츠가 표시되는 방식을 제어해요. 주요 tags는 og:title, og:description, og:image, og:url이에요. 전용 og:image (1200x630px 권장)를 사용하면 콘텐츠가 공유될 때 engagement가 크게 증가해요.
Twitter Card Tags
Twitter Card tags는 Twitter/X에서 공유될 때 콘텐츠가 표시되는 방식을 정의해요. twitter:card 타입은 summary, summary_large_image, app, player 중 하나예요. summary_large_image를 고품질 이미지와 함께 사용하면 플랫폼에서의 engagement가 크게 증가해요.
Meta Tags 추가하는 방법
생성된 HTML을 복사해서 페이지의 <head> 섹션에 붙여 넣으세요. Next.js에서는 layout.tsx 또는 page.tsx의 Metadata API를 사용하세요. WordPress에서는 Yoast나 RankMath 같은 SEO 플러그인을 사용하세요. Google의 Rich Results Test와 소셜 미디어 debugger 도구로 tags를 검증하세요.