win-j 로고
자유로운 블로그

Developer SEO Utility

Meta Tag 생성기

페이지 제목, 설명, URL, 대표 이미지 주소를 입력하면 SEO meta 태그와 Open Graph, Twitter Card 태그를 자동으로 생성할 수 있습니다.

SEO Meta 생성 title, description, canonical, robots 태그를 생성할 수 있습니다.
Open Graph 지원 카카오톡, 페이스북, SNS 공유용 OG 태그를 함께 구성합니다.
미리보기 제공 검색 결과와 공유 카드 형태를 입력값 기준으로 확인할 수 있습니다.
Title 0자
Description 0자
OG Image 미입력
Output HTML

Meta Tag 설정

페이지 기본 정보와 SNS 공유 정보를 입력하세요. 제목과 설명 길이는 도구의 참고 범위이며 실제 표시는 검색어, 기기, 검색엔진 판단에 따라 달라집니다.

권장 입력 기준

Title 50~60자와 Description 120~150자는 작성 중 참고할 범위입니다. 고정 보장값이 아니며 대표 이미지는 공개 접근 가능한 전체 URL과 대체 텍스트를 함께 준비하세요.

0/60자 권장 제목을 입력해주세요.

0/150자 권장 설명을 입력해주세요.

canonical, og:url에 사용됩니다.

og:image, twitter:image에 사용됩니다.

og:image:alt, twitter:image:alt에 사용됩니다.

og:site_name에 사용됩니다.

검색 색인 및 링크 추적 설정입니다.

공유 콘텐츠 유형입니다.

SNS 공유 카드 형식입니다.

포함할 태그 선택

필요한 태그 묶음만 선택해서 생성할 수 있습니다.

미리보기

검색 결과와 SNS 공유 시 표시될 형태를 간단히 확인할 수 있습니다.

대기 중
Search Preview

페이지 제목이 표시됩니다

https://example.com/page/

페이지 설명이 검색 결과에 표시됩니다.

Open Graph Preview
OG IMAGE
페이지 제목이 표시됩니다

페이지 설명이 표시됩니다

win-j.com

생성 결과

아래 코드를 HTML head 영역에 추가하면 됩니다.

정보를 입력한 뒤 Meta Tag 생성하기 버튼을 눌러주세요.

도움말

Meta Tag는 왜 필요한가요?

Meta Tag는 검색엔진에 페이지 제목과 설명을 전달하고, 카카오톡·SNS 공유 시 표시될 제목, 설명, 이미지를 지정하는 데 사용됩니다.

권장 길이

  • Title: 50~60자는 이 도구의 작성 참고 범위
  • Description: 120~150자는 이 도구의 작성 참고 범위
  • OG Image: 카카오톡·SNS 공유용 이미지는 가로형 썸네일 권장

Open Graph 태그는 어디에 쓰이나요?

Open Graph 태그는 카카오톡, 페이스북, 디스코드 등에서 링크를 공유할 때 표시되는 제목, 설명, 이미지를 제어하는 데 사용됩니다.

주의사항

실제 검색 결과 문구는 검색엔진이 페이지 내용과 검색어에 따라 다르게 표시할 수 있습니다. 생성된 태그는 기본 SEO 설정용으로 사용하세요.

Title과 Description은 꼭 입력해야 하나요?

검색 결과와 공유 미리보기 품질을 위해 입력하는 것이 좋습니다. 특히 Description은 사용자가 페이지 내용을 이해하는 데 도움을 줍니다.

대표 이미지 URL은 어떤 이미지를 넣는 게 좋나요?

카카오톡과 SNS 공유를 고려하면 1200x630 비율의 가로형 이미지를 사용하는 것이 일반적입니다.

EDITORIAL GUIDE

검색·공유 메타 태그를 플랫폼별 역할에 맞게 만드는 법

검색 제목과 설명, canonical, Open Graph와 Twitter Card는 비슷한 문장을 쓰더라도 소비하는 플랫폼과 역할이 다릅니다. 생성된 코드를 그대로 붙이기 전에 페이지의 고유 정보, 공개 URL과 공유 이미지 접근성을 확인해야 합니다.

작성 · 검토
win-j
최종 검토
2026년 8월 8일

이런 분께 유용합니다

  • 페이지별 head 태그를 처음 구성하는 운영자
  • 검색과 SNS 공유 미리보기를 함께 관리하는 편집자
  • 템플릿용 메타 태그 초안을 만드는 개발자

대표 활용 상황

  • 새 유틸리티 페이지의 기본 검색 메타를 만들 때
  • 카카오톡·SNS 공유 이미지와 문구를 지정할 때
  • canonical과 robots 값을 포함한 head 코드 초안을 만들 때

처음부터 결과 확인까지

  1. 1

    페이지마다 고유하고 내용을 정확히 설명하는 제목과 요약문을 작성합니다.

  2. 2

    리디렉션을 거치지 않는 공개 최종 페이지 URL을 입력합니다.

  3. 3

    외부에서 접근 가능한 대표 이미지 전체 URL과 이미지 내용을 설명하는 대체 텍스트를 입력합니다.

  4. 4

    검색용 기본 태그, Open Graph와 Twitter Card 중 실제 사용할 묶음을 선택합니다.

  5. 5

    생성 오류를 수정한 뒤 코드를 HTML head에 한 번만 삽입합니다.

  6. 6

    배포 페이지 소스와 각 플랫폼의 공유 디버거에서 최종 표시를 확인합니다.

실제 예시 1

검색과 공유를 모두 지원

입력
제목·설명·페이지 URL·이미지 URL·대체 텍스트
결과
기본 SEO, Open Graph, Twitter Card 태그 묶음

각 태그가 중복 출력되지 않도록 기존 템플릿과 합쳐야 합니다.

실제 예시 2

검색 태그만 생성

입력
기본 SEO만 선택하고 제목·설명·선택적 canonical 입력
결과
title, description, robots와 선택적 canonical

공유 태그를 쓰지 않는 경우 OG 필수 입력 검사는 적용되지 않습니다.

계산·처리 기준

제목과 설명의 존재, 태그 묶음 선택, URL 길이·프로토콜·인증 정보 여부를 검사합니다. Open Graph 선택 시 공식 기본 속성에 필요한 페이지 URL과 이미지, 이미지 대체 텍스트를 요구하고 HTML 특수문자를 이스케이프해 출력합니다.

알아둘 한계

  • 제목·설명 글자 수 표시는 작성 참고값이며 검색 결과의 실제 잘림을 보장하지 않습니다.
  • 검색엔진은 검색어에 따라 다른 제목이나 본문 스니펫을 선택할 수 있습니다.
  • 이미지 크기, MIME 유형, HTTP 응답과 플랫폼별 캐시 상태를 직접 검사하지 않습니다.
  • robots와 canonical 선택의 사이트 전략 적합성은 사용자가 판단해야 합니다.
개인정보 처리

태그 생성은 브라우저에서 처리합니다. 대표 이미지 URL을 입력하면 미리보기를 위해 브라우저가 해당 URL에 요청할 수 있으므로 서명 URL, 비공개 호스트와 민감한 쿼리 문자열을 사용하지 마세요.

자주 묻는 질문

제목은 반드시 60자 이하여야 하나요?

아닙니다. 고정 글자 수 제한이 아니라 작성 중 빠르게 검토하기 위한 참고 범위이며 실제 표시는 화면 폭과 검색어에 따라 달라집니다.

og:image:alt는 왜 넣나요?

이미지를 볼 수 없거나 보조 기술을 사용하는 상황에서 이미지가 무엇을 나타내는지 설명하는 데 도움이 됩니다.

코드를 생성하면 공유 미리보기가 바로 바뀌나요?

플랫폼 캐시 때문에 즉시 바뀌지 않을 수 있습니다. 배포 후 공개 접근 여부를 확인하고 플랫폼별 디버거에서 다시 수집하세요.