Meta Tag Generator: SEO 메타 태그 생성
Meta Tag Generator는 타이틀, 디스크립션, Open Graph, Twitter Card 태그를 SERP·Facebook·Twitter 라이브 미리보기와 글자 수 카운터와 함께 생성합니다.
Meta Tag Generator란 무엇입니까?
저는 새 페이지를 배포할 때마다 게시 전에 Google, Facebook, Twitter에서 실제로 어떻게 보일지 확인하고 싶어서 이 도구를 사용합니다. 이 도구는 완전한 HTML 메타 태그 블록(기본 SEO, Open Graph, Twitter Card)을 생성하고 각 플랫폼의 픽셀 단위 정확한 미리보기를 나란히 렌더링합니다. Input 탭에 입력하고, Output에서 복사하고, Preview에서 확인합니다.
주요 기능
이 도구는 하나의 입력 세트에서 세 개의 태그 블록을 생성합니다. 기본 SEO 블록은 <meta name="title">, <meta name="description">, <meta name="keywords">, <meta name="author">, <meta name="robots">, <link rel="canonical">을 포함합니다. Open Graph 블록은 og:title, og:description, og:type, og:url, og:image, og:site_name, og:locale을 포함하며, website, article, product, video, music 타입 옵션을 제공합니다. Twitter Card 블록은 twitter:card, twitter:site, twitter:creator, twitter:title, twitter:description, twitter:image를 포함하고 Summary와 Summary Large Image 카드를 지원합니다.
글자 수 카운터가 적절한 길이로 안내합니다. Title은 현재/60을 표시하고 30~60 범위에서 녹색, 30 미만에서 노란색, 60 초과에서 빨간색이 됩니다. Description은 같은 방식으로 120~160을 목표로 합니다. 입력하는 동안 세 개의 라이브 미리보기가 업데이트됩니다: 실제 링크 파란색(#1a0dab), URL 녹색(#006621), 디스크립션 회색(#545454)을 사용하는 Google SERP 미리보기, 제공한 OG 이미지로 1.91:1 이미지 카드를 렌더링하는 Facebook 미리보기, 카드 타입 설정에 따라 Summary와 Summary Large Image 사이를 전환하는 Twitter Card 미리보기입니다.
Robots 드롭다운은 네 가지 표준 지시문 조합을 제공합니다: index, follow(기본값), index, nofollow, noindex, follow, noindex, nofollow. Output 탭은 Basic, Open Graph, Twitter를 별도 섹션으로 나누고 각각에 개별 복사 버튼이 있으며, 결합된 블록을 위한 Copy All 버튼이 추가로 있습니다.
Meta Tag Generator 사용 방법
1단계: Input 탭 작성하기
곧 출시 예정: Meta Tag Generator를 엽니다. 이 도구는 세 섹션이 있는 Input 탭에서 열립니다.
기본 SEO 섹션:
- Title: 페이지 제목입니다. 글자 수 카운터가 실시간으로 업데이트됩니다. 검색 결과에서 잘림을 피하려면 30~60자(녹색)로 유지합니다. 예:
TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole(53자, 녹색). - Description: 메타 디스크립션입니다. 완전한 표시를 위해 120~160자(녹색 범위)를 목표로 합니다. 예:
TrailMaster Pro boots combine a Vibram outsole with Gore-Tex waterproofing for serious hikers and trail runners. Free shipping over $75.(137자, 녹색). - Keywords: 쉼표로 구분된 키워드입니다. 최신 검색 엔진은 이 태그를 대부분 무시하지만, 포함해도 해롭지 않습니다. 예:
hiking boots, trail running, waterproof boots, vibram outsole. - Author: 선택적 작성자 이름입니다.
- Robots: 네 가지 robots 지시문 조합 중에서 선택합니다. 공개 콘텐츠는
index, follow로 둡니다. 인덱싱하지 않으려는 비공개 페이지, 관리 영역 또는 중복 콘텐츠에는noindex, nofollow를 사용합니다. - Canonical URL: 이 페이지의 우선 URL입니다. 전체 절대 URL을 입력합니다(예:
https://example.com/products/trailmaster-pro).
2단계: Open Graph 태그 구성하기
Open Graph 섹션으로 스크롤합니다:
- OG Type: 홈페이지와 일반 페이지에는 "website", 블로그 게시물에는 "article", 전자상거래 페이지에는 "product"를 선택합니다.
- OG Site Name: 사이트의 표시 이름입니다(예: "TrailMaster Outdoor Gear").
- OG Image: 소셜 공유 이미지의 전체 URL입니다. Facebook은 1200×630 픽셀을 권장합니다. 도달 가능한 URL을 제공하면 Facebook 미리보기가 실제 이미지를 렌더링합니다.
- OG URL: Open Graph용 표준 URL이며, 일반적으로 canonical URL과 동일합니다.
3단계: Twitter Card 태그 구성하기
Twitter Cards 섹션으로 스크롤합니다:
- Twitter Card Type: "Summary"는 작은 정사각형 썸네일을 표시합니다. "Summary Large Image"는 큰 2:1 이미지를 표시하며, 시각적 자산이 있는 대부분 콘텐츠에 더 적합한 선택입니다.
- Twitter Site: 사이트의 Twitter/X 사용자 이름입니다(예:
@trailmaster). - Twitter Creator: 콘텐츠 작성자의 Twitter/X 사용자 이름입니다.
4단계: Output 탭 검토하기
Output 탭을 클릭합니다. 세 섹션이 생성된 태그를 표시합니다:
기본 태그 예시:
<meta name="title" content="TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole" />
<meta name="description" content="TrailMaster Pro boots combine a Vibram outsole with Gore-Tex waterproofing for serious hikers and trail runners. Free shipping over $75." />
<meta name="keywords" content="hiking boots, trail running, waterproof boots, vibram outsole" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://example.com/products/trailmaster-pro" />Open Graph 태그 예시:
<meta property="og:type" content="product" />
<meta property="og:url" content="https://example.com/products/trailmaster-pro" />
<meta property="og:title" content="TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole" />
<meta property="og:description" content="TrailMaster Pro boots combine a Vibram outsole..." />
<meta property="og:image" content="https://example.com/images/trailmaster-og.jpg" />
<meta property="og:site_name" content="TrailMaster Outdoor Gear" />
<meta property="og:locale" content="en_US" />Copy All을 클릭하여 <head>에 붙여넣을 완전한 태그 블록을 받습니다.
5단계: Preview 탭에서 확인하기
Preview 탭으로 전환합니다. 세 개의 라이브 미리보기가 동시에 렌더링됩니다:
- Google SERP 미리보기: title을 파란색으로, canonical URL을 녹색으로, description을 두 줄로 잘라 회색으로 표시합니다. Google 데스크톱 검색 결과 형식과 일치합니다. title이 60자를 초과하면 여기서 시각적으로 잘리며, 줄여야 한다는 명확한 신호가 됩니다.
- Facebook 카드 미리보기: OG 이미지(제공되고 로드 가능한 경우), 사이트 도메인을 대문자로, title을 굵게, description을 표시합니다.
- Twitter Card 미리보기: twitter:card 형식(Small 또는 Large Image), URL 도메인, title, description을 표시합니다. 미리보기 이미지는
twitterImage가 설정된 경우 그것에서, 아니면ogImage로 폴백됩니다.
실용 예시
예시 1: 블로그 게시물
"10 Best Hikes in the Scottish Highlands"라는 제목의 블로그 게시물의 경우:
- Title:
10 Best Hikes in the Scottish Highlands - Complete Guide(53자, 녹색) - Description:
The 10 most rewarding hiking routes in the Scottish Highlands, from Ben Nevis to the Isle of Skye. Trail grades, maps, and kit lists included.(143자, 녹색) - OG Type: article
- Robots: index, follow
SERP 미리보기에서 title이 잘리지 않고 들어가고 description이 사용 가능한 두 줄을 채우는 것을 확인할 수 있습니다.
예시 2: 전자상거래 제품 페이지
제품 페이지의 경우 OG 타입을 "product"로 설정하고 이미지 URL을 제공합니다. Facebook 미리보기는 사이트 이름, 제품 title, description과 함께 1.91:1 비율로 제품 이미지를 렌더링합니다. Twitter Large Image Card는 같은 이미지를 2:1 크롭으로 표시합니다.
예시 3: 비공개 스테이징 페이지
인덱싱이 아직 준비되지 않은 스테이징 환경 페이지의 경우 Robots를 noindex, nofollow로 설정합니다. 생성된 출력에는 <meta name="robots" content="noindex, nofollow" />가 포함되어 검색 엔진 크롤러가 이 페이지를 발견하더라도 인덱싱하거나 링크를 따라가지 않도록 알려줍니다.
팁과 모범 사례
- OG URL과 canonical URL 일치시키기:
og:url과 canonical<link>태그에 동일한 절대 URL을 사용합니다. 불일치는 소셜 공유가 잘못된 URL을 참조하게 할 수 있습니다. - 잘림에 대한 title 길이: Google은 데스크톱 결과에서 약 600px보다 넓게 렌더링되는 title을 자릅니다. 30~60자 목표는 이에 대한 신뢰할 수 있는 대리 지표이며, 녹색은 안전 범위 내라는 의미입니다.
- OG 이미지 크기: 도구는 제공한 모든 URL에 대해
og:image태그를 생성하지만 이미지 크기는 검증하지 않습니다. Facebook용으로는 1200×630 픽셀 이미지, Twitter Large Image Card용으로는 1200×600 이미지를 사용합니다. - twitter:image는 og:image로 폴백: Preview 탭에서 Twitter Card는 twitter:image가 제공되면 그것을, 아니면 og:image를 사용합니다. 플랫폼별로 다른 소셜 이미지를 원하는 경우에만 별도 twitter:image를 설정합니다.
- Keywords 메타 태그:
<meta name="keywords">태그는 생성되지만 Google과 Bing이 2009년 이후 대부분 무시합니다. 완전성을 위해 포함하되 최적화에 시간을 투자하지 마십시오.
일반적인 문제와 해결
title 카운터는 빨간색이지만 description은 정상입니다: title이 60자를 초과합니다. 줄이거나 세부 사항을 description으로 옮깁니다. title 카운터는 명확한 지표로 빨간색에 현재/60 (long)을 표시합니다.
description 카운터가 노란색입니다: description이 120자 미만입니다. Google이 페이지 콘텐츠에서 자체 스니펫으로 대체할 수 있습니다. 관련 콘텐츠를 20~40자 추가합니다.
OG 이미지가 Facebook 미리보기에 나타나지 않습니다: Preview 탭은 실제 이미지 URL을 <img> 태그로 로드합니다. URL이 브라우저에서 공개적으로 접근 가능하지 않으면(예: 로컬 개발 URL), 이미지 영역에 "No image" 자리표시자 텍스트가 표시됩니다. 태그는 출력에서 올바르게 생성됩니다.
큰 이미지가 있어도 Twitter 미리보기가 작은 카드만 보여줍니다: Twitter Card Type이 "Summary Large Image"가 아닌 "Summary"로 설정되어 있습니다. Twitter Card Type 드롭다운을 "Summary Large Image"로 변경하여 2:1 비율 미리보기를 봅니다.
Output 탭에서 생성된 태그가 비어 보입니다: Input 탭에서 적어도 title과 description을 작성합니다. 출력에는 비어 있지 않은 필드만 포함되며, 비어 있는 title 필드는 title 태그를 생성하지 않습니다.
개인정보 및 보안
Meta Tag Generator는 브라우저 내에서 완전히 실행됩니다. 태그 생성은 React의 useMemo 훅을 사용하여 입력에서 출력을 반응적으로 계산하며 서버 왕복이 없습니다. OG 이미지 URL을 제공하면 Preview 탭은 프록시 없이 소스 URL에서 직접 해당 이미지를 로드합니다. Supporter 회원은 로컬 IndexedDB 저장소를 사용하여 이름이 지정된 프리셋을 저장하고 복원할 수 있습니다.
자주 묻는 질문
title과 description의 최적 글자 길이는 무엇입니까?
도구는 title에 30~60자(녹색 범위), description에 120~160자(녹색 범위)를 사용합니다. 이는 Google이 SERP 스니펫에 사용하는 일반적인 렌더링된 픽셀 너비 한계와 일치합니다. 30자 미만 title(노란색)은 빈약하다고 간주될 수 있으며, 60 초과(빨간색)는 잘릴 수 있습니다. 120 미만 description(노란색)은 Google이 자체 발췌를 사용하게 할 수 있으며, 160 초과(빨간색)는 잘립니다.
도구가 모든 Open Graph 속성을 생성합니까?
도구는 핵심 OG 태그를 생성합니다: og:type, og:url, og:title, og:description, og:image, og:site_name, og:locale. article:published_time 같은 기사 특정 태그나 product:price 같은 제품 특정 태그는 생성하지 않습니다. 이러한 태그는 생성된 출력을 복사한 후 수동으로 추가합니다.
어떤 OG locale 값을 사용할 수 있습니까?
기본 OG locale은 en_US입니다. locale 필드는 텍스트 입력으로 유효한 모든 locale 코드를 입력할 수 있습니다(예: fr_FR, de_DE, ja_JP). 도구는 이 필드를 드롭다운으로 제한하지 않습니다.
도구는 어떤 Twitter Card 타입을 지원합니까?
도구는 summary(작은 정사각형 썸네일, title, description, 사이트 이름)와 summary_large_image(전체 너비 2:1 이미지와 title, description, 사이트 이름)를 생성합니다. 더 이상 사용되지 않는 app과 player 카드 타입은 지원하지 않습니다.
기본 SEO 태그 없이 Open Graph 태그만 복사할 수 있습니까?
예. Output 탭은 세 개의 별도 섹션(Basic, Open Graph, Twitter)을 표시하며 각각 자체 복사 버튼이 있습니다. Open Graph 섹션의 복사 버튼을 클릭하여 해당 태그만 복사합니다. 모든 것을 결합하려면 "Copy All"을 사용합니다.
생성된 태그를 사이트에 어떻게 추가합니까?
복사한 태그를 HTML의 <head> 섹션 안에 붙여넣습니다. WordPress, Shopify, Webflow 같은 CMS를 사용하는 경우 테마 설정의 사용자 정의 <head> 코드 필드에 붙여넣거나 사용자 정의 메타 태그를 받아들이는 SEO 플러그인을 사용합니다. Next.js 같은 프레임워크의 경우 <Head> 컴포넌트에 붙여넣거나 metadata API를 사용합니다.
관련 도구
- 곧 출시 예정: 페이지 SEO 분석기: 기존 라이브 페이지의 현재 메타 태그, 헤딩 구조, 페이지 SEO 신호를 감사하여 새 메타 태그가 해결해야 할 격차를 식별합니다.
- 곧 출시 예정: SERP 미리보기: 메타 태그 업데이트 전후에 title과 description 표시를 미세 조정하기 위한 전용 SERP 미리보기 도구입니다.
- 곧 출시 예정: Schema 생성기: 메타 태그와 함께 구조화된 데이터 마크업을 추가하여 기사, 제품, 이벤트 등에 대해 Google 검색에서 리치 결과를 활성화합니다.
지금 Meta Tag Generator 사용해보기: 곧 출시 예정: Glyph Widgets Meta Tag Generator