메타태그·OG 생성기

메타태그·OG 생성기

정보 입력

0 / 60
0 / 160

권장 규격: 1200×630px (1.91:1 비율). 업로드 이미지는 미리보기 전용이며 실제 호스팅은 직접 해야 합니다.

기본 SEO 메타 옵션

공유 미리보기

여기에 제목이 표시됩니다
여기에 설명이 표시됩니다. 제목과 설명을 입력하면 SNS·검색결과에 어떻게 보일지 실시간으로 확인할 수 있습니다.
example.com

실제 표시는 각 플랫폼의 캐시·렌더링 정책에 따라 다를 수 있습니다. 카카오톡은 공유 시 og 태그를 캐싱하므로, 변경 후에는 카카오 디버거에서 캐시를 갱신하세요.

필수 태그 검증

og:titleog:typeog:urlog:imagedescription

위 코드를 HTML 문서의 <head> 태그 안에 붙여넣으세요.

댓글과 질문

메타태그·오픈그래프(OG) 생성기란?

메타태그·OG 생성기는 웹페이지를 카카오톡·페이스북·트위터(X)·링크드인 등에 공유했을 때 표시되는 제목·설명·썸네일 카드를 만들어주는 무료 온라인 도구입니다. 제목, 설명, URL, 이미지 등 폼만 채우면 meta·Open Graph·Twitter Card 태그가 실시간으로 생성되고, 같은 화면에서 각 플랫폼의 공유 카드와 구글 검색결과가 어떻게 보일지 즉시 미리보기로 확인할 수 있습니다.

링크를 공유했는데 썸네일이 안 뜨거나 엉뚱한 이미지·제목이 나오는 문제는 대부분 og 태그가 없거나 잘못 설정됐기 때문입니다. 이 도구는 og:title·og:type·og:url·og:image 같은 필수 태그의 누락을 자동으로 검증하고, 제목·설명의 글자수가 검색엔진 권장 길이를 넘는지도 경고해 줍니다. 생성된 코드를 복사해 <head>에 붙여넣기만 하면 공유 미리보기 문제를 빠르게 해결할 수 있습니다.

주요 기능

실시간 메타태그 코드 생성

제목·설명·URL·이미지·사이트명·타입·로케일 등을 입력하면 meta·og·twitter 태그 코드가 즉시 자동으로 만들어집니다. 입력을 바꾸면 코드도 바로 갱신됩니다.

카톡·페북·X·링크드인·디스코드 미리보기

한국 사용자 필수인 카카오톡 링크 썸네일을 포함해, 5개 SNS의 공유 카드와 구글 검색결과(SERP)를 탭으로 전환하며 실시간으로 확인합니다.

필수 태그 검증 + 글자수 카운터

og:title·og:type·og:url·og:image 등 필수 태그 누락을 색·아이콘으로 경고하고, 제목(60자)·설명(160자) 권장 길이 초과 시 실시간으로 알려줍니다.

OG 이미지 규격 안내 + 옵션 메타

og:image 권장 규격(1200×630, 1.91:1)을 안내하고, charset·viewport·robots·canonical·theme-color 등 기본 SEO 메타를 토글로 함께 출력합니다.

사용 방법

  1. 제목과 설명을 입력합니다. 글자수 카운터를 보며 제목 60자, 설명 160자 이내로 맞추는 것이 좋습니다.
  2. 페이지 URL과 og:image 주소를 입력합니다. 이미지는 URL을 넣거나 파일을 업로드해 미리보기로 확인할 수 있습니다(실제 호스팅은 직접).
  3. 콘텐츠 타입·로케일·트위터 카드 종류를 고르고, 필요하면 charset·viewport·canonical 같은 기본 SEO 메타 옵션을 켭니다.
  4. 카카오톡·페이스북·트위터·구글 탭을 전환하며 공유 카드를 확인하고, 필수 태그 검증에서 누락된 태그가 없는지 점검합니다.
  5. 코드 복사 버튼을 눌러 생성된 메타태그를 복사한 뒤, 웹페이지 HTML의 <head> 태그 안에 붙여넣고 배포합니다.

활용 예시

블로그·뉴스 글 공유 최적화

글마다 og:title·og:image를 설정해 카카오톡·페이스북에 공유될 때 보기 좋은 썸네일과 제목이 뜨도록 만듭니다.

쇼핑몰 상품 페이지

og:type을 product로 두고 상품 이미지·이름·설명을 메타에 넣어 링크 공유 시 상품 카드가 정확히 노출되게 합니다.

랜딩페이지·이벤트 홍보

마케팅 링크를 SNS·메신저로 뿌리기 전에 미리보기로 카드를 확인하고, 클릭률을 높이는 카피와 이미지를 미리 검증합니다.

공유 썸네일이 안 뜨는 문제 해결

기존 페이지의 og 태그 누락·오류를 검증으로 찾아내고, 올바른 태그를 생성해 깨진 링크 미리보기를 복구합니다.

자주 묻는 질문

메타태그·OG 태그가 정확히 뭔가요?

메타태그는 HTML <head>에 들어가 페이지 정보를 검색엔진과 SNS에 알려주는 태그입니다. 그중 Open Graph(og:) 태그는 페이스북·카카오톡 등에서 링크를 공유할 때 표시되는 제목·설명·썸네일을 결정합니다. 이 태그가 없으면 공유 시 썸네일이 안 뜨거나 엉뚱한 정보가 나옵니다.

생성한 코드는 어디에 붙여넣나요?

복사한 코드를 웹페이지 HTML 문서의 <head> ... </head> 태그 사이에 붙여넣으면 됩니다. 워드프레스·티스토리 등 CMS는 테마 편집의 head 영역이나 SEO 플러그인 설정에 넣을 수 있습니다.

카카오톡 미리보기가 바뀌지 않아요.

카카오톡은 한 번 공유된 링크의 og 정보를 캐싱합니다. 태그를 수정한 뒤에는 '카카오 디벨로퍼스'의 OG 캐시 초기화 도구나 카카오링크 디버거에서 해당 URL의 캐시를 갱신해야 새 썸네일이 반영됩니다.

og:image 권장 크기는 얼마인가요?

가장 널리 호환되는 권장 규격은 1200×630px(가로세로 1.91:1)입니다. 너무 작으면 작은 썸네일로, 비율이 안 맞으면 잘려서 표시될 수 있으니 권장 규격에 맞춰 만드는 것이 좋습니다. 이미지 URL은 반드시 절대경로(https://...)여야 합니다.

업로드한 이미지가 실제 공유에도 쓰이나요?

아니요. 업로드 기능은 미리보기 확인용입니다. SNS는 og:image에 적힌 공개 URL의 이미지를 가져오므로, 실제로는 이미지를 서버나 이미지 호스팅에 올린 뒤 그 주소를 og:image URL 칸에 입력해야 합니다.

제목·설명 길이는 얼마가 적당한가요?

검색결과 기준으로 제목은 약 60자, 설명은 약 160자 이내가 권장됩니다. 이를 넘으면 끝부분이 '…'로 잘릴 수 있습니다. 이 도구는 입력하는 동안 글자수를 표시하고 권장 길이를 넘으면 경고해 줍니다.

개인정보 안내

입력한 모든 값과 업로드한 이미지는 사용자의 브라우저에서만 처리되며 서버로 전송되지 않습니다. 편의를 위해 입력값은 브라우저 localStorage에 자동 저장돼 다음 방문 시 복원되지만, 이 데이터 역시 사용자 기기에만 남고 외부로 공유되지 않습니다. 초기화 버튼으로 언제든 지울 수 있습니다.

관련 도구

파비콘 생성기이미지 리사이즈이미지 압축기URL 인코더WebAssembly 모듈 검사기다국어 연결 행렬 검사기구문 트리 질의 실험실컨테이너 빌드 단계 분석기의존성 그래프 탐색기버전 제약 충돌 분석기작업 스케줄 충돌 검사기패치 검토 작업대소스맵 탐색기다국어 카탈로그 검사기구조화 데이터 대조기HTTP 아카이브 분석기웹훅 서명 실험실Protobuf 스키마 작업대GraphQL 스키마 실험실Avro 스키마 호환성 검사기로컬 SQL 데이터 작업대스키마 기반 입력 폼 생성기3D 메쉬 검사·복구기관망 유량·압력 실험실로봇팔 운동학 실험열저항 회로 실험실보 휨 실험실기어열 배치 실험공차 누적 실험실센서 교정 곡선 맞추기PCB 적층 비교 설계기디지털 필터 설계기도로망 도달 범위 지도태양 그림자 배치 실험GPS 오차 시뮬레이터디지털 논리 회로 실험아날로그 회로 실험실링크 기구 운동 실험해석용 메쉬 생성기OpenAPI 계약 검사기DB 스키마 변경 계획기수식 차원 검사기트러스 힘 실험실논리식 최소화 실험실제어계 응답 실험실대기행렬 시뮬레이터위치 구역 출입 이벤트 실험실좌표계 변환 실험실측량 폐합 검산 실험실위성·래스터 구간 분류단계구분도 설계기지도 인쇄 편집기GeoTIFF 래스터 재투영고도 등고선 생성기지형 가시영역 실험실지형 유역 탐색기오프라인 지도 타일 패키저텍스트 파일 인코딩 작업대파일 경로 호환성 검사기SBOM 라이선스 탐색기파일 형식 위장 검사기npm 잠금 파일 충돌 해결기소스 비밀값 점검기오프라인 웹 자료 패키저인증서 체인 검사기토렌트 메타정보 검사기파일 분할 전송 패키저로컬 파일 암호 금고동일 파일 찾기압축 파일 작업대디자인 토큰 관리기반응형 간격 체계 설계기반응형 타이포 시스템 설계기포장 전개도 설계기SVG 아이콘 스프라이트 묶기Flexbox 배치 설계기CSS Grid 배치 설계기정규 언어 동치 검사기Markdown 문서 묶음 검사기로그 패턴 추출기반응형 HTML 레이아웃 검사기메일 HTML 렌더 검토기내부 링크 구조 분석기상태 전이 모델 테스트 생성기페트리넷 흐름 실험Git 이력 그래프 탐색기HTTP 요청 명령 설계기바이너리 프로토콜 설계기바이너리 Hex 편집기바이너리 차이 패치 만들기파일 전자서명 작업대API 모의 응답 실험실데이터 열 매핑 설계기이벤트 로그 세션 분석기데이터베이스 관계도 설계기시계열 누락 검사기학습 데이터 분할기데이터 흐름 계보 작성기결정트리 학습 실험실데이터 비식별 처리기데이터 계약 규칙 검사기JSON Schema 검증기항목 동시출현 분석기robots 규칙 시뮬레이터HTML 검색 기본 검사기접근성 구조 검사기RSS·Atom 피드 작성기검색 로봇 로그 분석기CSP 정책 검토기검색 실적 CSV 분석기CSV 수식 위험 검사기CORS 응답 시뮬레이터HTTP 캐시 동작 실험실쿠키 속성 검사기성능 추적 파일 분석기사이트맵 구조 검사기파일 일괄 이름 바꾸기파일 묶음 무결성 검증기폴더 용량 지도폴더 차이 검토기방문 순서 최적화GeoJSON 지도 편집기지도 영역 중첩 분석기지도 라벨 배치기공간 속성 결합기GeoJSON 공간 위상 검사기GPS 이동 기록 분석기이동 기록 위치 가림표 관계 결합기피벗 테이블 작업대데이터 품질 프로파일러표 데이터 정제 작업대기록 대사 도구데이터 사전 작성기canonical 관계 검사기리다이렉트 계획 검증기HTTP 응답 속도·핑 참고 테스트내 브라우저·시스템 정보JSON ↔ YAML 변환기XML ↔ JSON 변환기HTML 포맷터JavaScript 압축기목 데이터 생성기.gitignore 생성기라이선스 생성기User-Agent 분석기비밀번호 강도 검사코드 이미지 만들기XML 포맷터HTTP 상태 코드 찾기MIME 타입 찾기JS·SQL 문자열 이스케이프CSS 박스 그림자 생성기CSS 그라데이션 생성기들여쓰기 변환기진법 변환기유니코드 이스케이프 변환기유니코드 문자 분석기JSON 구조 비교기Markdown 표 생성기Base64 인코더JSON 포맷터SQL 포맷터Cron 표현식 생성기정규식 테스터UUID 생성기해시 생성기타임스탬프 변환기JWT 디코더HTML 엔티티 변환기Markdown 미리보기CSS MinifierJSON CSV 변환대소문자·케이스 변환이미지 Base64 변환
개발 도구 도구 전체 보기 →이미지/미디어 →텍스트/변환 →생활/재미 →