OG

OG 이미지 미리보기 생성기

1200x630 공유 이미지를 만들고 Open Graph 메타 태그를 확인합니다.

1200x630 OG 이미지

PNG 출력

공유 카드 미리보기

SNS 공유 카드 미리보기
제목 설명
메신저 공유 카드 미리보기
제목 example.com

Open Graph 메타 태그

이미지 URL을 비워두면 페이지 도메인의 /og-image.png를 사용합니다.

OG 이미지가 검색과 공유에 중요한 이유

Open Graph 이미지는 블로그 글, 쇼핑몰 상품, 랜딩페이지가 카카오톡, 페이스북, X, 링크드인 같은 채널에 공유될 때 가장 먼저 보이는 시각 요소입니다. 제목과 설명만 있는 링크보다 명확한 1200x630 공유 이미지를 함께 제공하면 클릭률과 브랜드 인상을 높일 수 있습니다.

이 도구는 제목, 설명, 브랜드, 배경색, 배경 이미지를 입력해 OG 이미지를 바로 생성합니다. 생성한 PNG 파일을 사이트에 업로드한 뒤 `og:image`와 `twitter:image` 메타 태그에 연결하면 공유 카드에서 사용할 수 있습니다.

권장 설정

PNG를 만든 다음 실제 공유 카드에 연결하기

  1. 1200 × 630 PNG를 다운로드하고 사이트의 공개 이미지 경로에 올립니다. 예를 들어 https://example.com/assets/share.png입니다.
  2. ‘사이트 URL’에는 공유할 페이지 주소를, ‘배포한 이미지의 전체 URL’에는 방금 올린 이미지 주소를 넣습니다. 서로 다른 경로여도 괜찮습니다.
  3. 메타 태그를 복사해 해당 페이지의 HTML <head>에 넣습니다. 기존 OG 태그가 있으면 중복되지 않게 수정합니다.
  4. 로그인하지 않은 브라우저에서도 이미지 URL이 열리는지 확인하고 실제 공유 서비스에서 미리보기를 확인합니다.

페이지 주소와 이미지 주소가 다른 예

페이지: https://example.com/blog/launch?lang=ko
이미지: https://example.com/assets/launch-card.png

이미지 URL을 비워두면 https://example.com/og-image.png를 사용합니다. 페이지 주소의 쿼리나 경로 뒤에 파일명을 무작정 붙이지 않습니다. 제목에 따옴표나 &가 들어가도 속성값을 깨지 않도록 HTML 특수문자를 변환합니다.

긴 제목과 실제 표시 범위

제목과 설명은 각각 최대 두 줄로 그리고 넘치는 부분은 말줄임표로 표시합니다. 한글이나 띄어쓰기 없는 주소도 폭에 맞게 나눕니다. 메타 태그에는 전체 문장이 남으므로 짧고 명확한 제목을 별도로 정리하세요. 이 화면의 공유 카드 모양은 참고용이며 플랫폼별 크롭·줄 수·캐시 상태는 다를 수 있습니다.

이미지를 바꿨는데 예전 카드가 보여요

공유 서비스가 이전 결과를 캐시할 수 있습니다. 먼저 메타 태그가 배포되었는지 확인하고, 이미지 파일명을 바꿔 새 URL을 적용하거나 해당 서비스의 공식 디버거로 다시 읽게 하세요. 이 생성기는 플랫폼의 캐시를 직접 지우지 않습니다.

배경 사진 위 글자가 잘 안 보여요

사진을 올린 뒤에도 카드 배경과 템플릿의 효과가 적용됩니다. 중요한 글자는 가장자리와 사진의 복잡한 부분을 피하고, 모바일 카드 크기로 축소해 확인하세요. 이미지 사용 권한은 직접 확인해야 합니다.

입력 처리 및 문의

입력한 문구와 선택한 이미지는 생성 기능에서 외부로 보내지 않으며 자동 저장하지 않습니다. PNG를 내려받아 직접 배포해야 합니다. 광고·제휴·호스팅 서비스는 접속 정보와 쿠키 등을 별도로 처리할 수 있습니다. 문제 제보 · Open Graph 공식 속성 안내