메타태그·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에 자동 저장돼 다음 방문 시 복원되지만, 이 데이터 역시 사용자 기기에만 남고 외부로 공유되지 않습니다. 초기화 버튼으로 언제든 지울 수 있습니다.

관련 도구

개발 도구 도구 전체 보기