liminfoMeta Tag Generator
SEO 메타태그 생성기
<!-- 기본 메타태그 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />Meta Tag Generator 소개
메타 태그 생성기는 간단한 양식에서 완전한 HTML 메타 태그 세트를 생성하는 무료 브라우저 기반 도구입니다. 페이지 제목, 설명, URL, Open Graph 이미지 URL, 사이트 이름, 키워드, 작성자 이름, Twitter 카드 유형, Twitter 핸들을 입력하면 도구가 웹페이지의 <head> 섹션에 붙여넣을 수 있는 해당 HTML 태그를 즉시 조합합니다. 출력은 세 섹션으로 구분됩니다: 기본 메타 태그(title, description, keywords, author, viewport), Facebook과 링크 미리보기를 위한 Open Graph 태그(og:type, og:title, og:description, og:url, og:image, og:site_name), Twitter Card 태그(twitter:card, twitter:title, twitter:description, twitter:image, twitter:site).
웹 개발자, SEO 전문가, 콘텐츠 마케터, 블로거는 이 도구를 사용해 페이지에 올바른 소셜 공유 메타데이터가 있는지 확인합니다. Facebook, LinkedIn, Slack, WhatsApp 같은 소셜 미디어 플랫폼에서 링크를 공유할 때, 이 플랫폼들은 Open Graph 메타 태그를 읽어 제목, 설명, 썸네일 이미지를 포함한 링크 미리보기 카드를 생성합니다. 올바른 OG 태그가 없으면 공유된 링크가 미리보기 없는 일반 텍스트로 표시되어 클릭률이 크게 감소합니다. Twitter는 자체 Twitter Card 사양을 사용하며, 이 도구는 "summary"와 "summary_large_image" 두 가지 카드 유형을 모두 생성합니다.
생성기는 전적으로 브라우저에서 실행됩니다. 어떤 필드에 입력해도 출력 코드 블록이 서버 통신 없이 React 상태를 사용해 실시간으로 업데이트됩니다. 값이 있는 필드만 출력에 포함되고 빈 필드는 생략되어 생성된 코드가 깔끔하게 유지됩니다. 도구는 클립보드 API를 사용해 전체 HTML 스니펫을 한 번의 클릭으로 클립보드에 복사합니다. 출력은 세 태그 그룹 사이에 주석 구분자가 있어 필요한 섹션만 쉽게 식별하고 삽입할 수 있습니다.
주요 기능
- 기본 HTML 메타 태그 생성: title, description, keywords, author, viewport
- 완전한 Open Graph 태그 세트 생성: og:type, og:title, og:description, og:url, og:image, og:site_name
- Twitter Card 태그 생성: twitter:card, twitter:title, twitter:description, twitter:image, twitter:site
- "summary"와 "summary_large_image" 두 가지 Twitter 카드 유형 지원
- 어떤 필드에 입력해도 생성된 코드가 즉시 업데이트되는 실시간 출력 미리보기
- 빈 메타 태그를 방지하기 위해 빈 필드를 출력에서 자동으로 생략
- 전체 HTML 스니펫을 클립보드에 복사하는 원클릭 복사 버튼
- 100% 클라이언트 사이드 처리 — 양식 데이터가 서버로 전송되지 않음
자주 묻는 질문
메타 태그란 무엇이며 SEO에 왜 중요한가요?
메타 태그는 웹페이지의 <head> 섹션에 배치되어 검색 엔진과 소셜 미디어 플랫폼에 페이지에 대한 메타데이터를 제공하는 HTML 요소입니다. 메타 description 태그는 제목 아래에 표시되는 스니펫을 제공해 검색 결과에서 클릭률에 영향을 미칩니다. title 태그는 가장 중요한 온페이지 SEO 요소 중 하나입니다. keywords 메타 태그는 역사적으로 SEO에 사용되었지만 Google 같은 현대 검색 엔진은 거의 무시합니다.
Open Graph란 무엇이며 og: 태그가 필요한 이유는?
Open Graph는 원래 Facebook이 만든 프로토콜로, 웹 페이지가 소셜 미디어 그래프에서 "풍부한 객체"가 될 수 있게 합니다. Facebook, LinkedIn, Slack, Discord, iMessage, WhatsApp에서 URL을 공유하면 이 플랫폼들이 og:title, og:description, og:image, og:url 메타 태그를 읽어 시각적 링크 미리보기 카드를 생성합니다. OG 태그가 없으면 공유된 링크에 미리보기가 표시되지 않아 참여율과 클릭률이 크게 감소합니다.
"summary"와 "summary_large_image" Twitter 카드 유형의 차이는 무엇인가요?
"summary"는 카드 왼쪽에 작은 썸네일 이미지(144x144 픽셀 표시)를 보여주는 반면, "summary_large_image"는 카드 전체 너비에 걸친 큰 이미지(2:1 비율, 최소 300x157 픽셀)를 표시합니다. 블로그 게시물 헤더 이미지나 제품 사진처럼 Twitter/X에서 URL 공유 시 눈에 띄게 보여주고 싶은 매력적인 시각 자료가 있을 때 "summary_large_image"를 사용하세요.
og:image 태그에 어떤 이미지 크기를 사용해야 하나요?
Facebook과 대부분의 플랫폼은 모든 플랫폼에서 최상의 표시를 위해 1200x630 픽셀(1.91:1 비율) og:image를 권장합니다. Facebook에서 큰 이미지로 표시하려면 최소 600x315 픽셀이어야 합니다. Twitter "summary_large_image" 카드의 경우 권장 크기는 1200x628 픽셀이고 최소 300x157 픽셀입니다. 이미지에는 항상 상대 경로가 아닌 절대 URL(https://로 시작)을 사용하세요.
og:title과 일반 <title> 태그 모두 필요한가요?
네, 둘 다 있어야 합니다. <title> 태그는 웹 브라우저(브라우저 탭과 북마크에 표시)에서 사용되며 검색 엔진 랭킹의 주요 제목 신호입니다. og:title은 소셜 미디어 플랫폼에서 링크 미리보기 카드에 사용되며 페이지 제목과 다를 수 있습니다. 예를 들어 소셜 공유를 위해 더 짧고 클릭 유도력 있는 제목을 사용할 수 있습니다. 이 도구는 제목 필드를 채우면 두 가지 모두 생성합니다.
메타 태그가 올바르게 작동하는지 어떻게 테스트하나요?
메타 태그를 페이지에 추가하고 배포한 후 공식 디버깅 도구를 사용하세요: Facebook 공유 디버거(developers.facebook.com/tools/debug), Twitter 카드 검사기(cards-dev.twitter.com/validator), LinkedIn 게시물 검사기(linkedin.com/post-inspector). 이 도구들은 페이지를 가져와 링크 미리보기가 정확히 어떻게 보일지 보여줍니다. 소셜 플랫폼은 미리보기 데이터를 캐시하므로 변경 후 디버거를 사용해 새로 고침을 강제해야 할 수 있습니다.
og:url은 캐노니컬 URL과 일치해야 하나요?
네. og:url은 항상 페이지의 캐노니컬 URL — 추적 매개변수나 세션 ID 없는 영구적인 선호 URL — 로 설정해야 합니다. 이를 통해 플랫폼이 모든 페이지 공유를 동일한 URL로 올바르게 귀속시킬 수 있습니다. <head>의 캐노니컬 링크 태그(사용하는 경우)와 일치해야 합니다. 캐노니컬 URL을 사용하면 여러 URL이 동일한 콘텐츠를 가리킬 때 공유 수 중복도 방지됩니다.
메타 description과 og:description은 같은 건가요?
다른 목적으로 사용됩니다. 메타 description 태그(name="description")는 검색 엔진이 검색 결과에 표시되는 스니펫을 생성하는 데 사용됩니다. og:description 태그는 소셜 미디어 플랫폼의 링크 미리보기 카드에 사용됩니다. 같은 값을 사용하거나 다른 값을 사용할 수 있습니다. 예를 들어 메타 description에는 검색 의도 중심의 설명을, og:description에는 더 매력적이고 소셜 친화적인 설명을 작성할 수 있습니다. 이 도구는 입력한 값을 두 가지 모두에 사용하며, 이것이 가장 일반적인 방법입니다.