OG 이미지 생성기

링크를 페이스북, 링크드인, X, 슬랙, 카카오톡에 공유하면 미리보기 카드에 그 페이지의 og:image가 표시됩니다. 이미지가 없으면 네트워크가 아무 그림이나 고르거나 아예 보여 주지 않습니다. 이 생성기는 제목, 부제 또는 사이트 이름, 선택 로고, 색상·그라데이션·사진 배경으로 깔끔한 1200 × 630 카드를 그리며, 제목이 들어갈 때까지 글자 크기를 줄입니다. 페이지에 맞는 Open Graph와 트위터 카드 메타 태그도 함께 만들어 줍니다. 이미지는 브라우저에서 만들어집니다.

사용 방법

1. 제목과 부제 또는 사이트 이름을 입력합니다.
2. 그라데이션, 단색, 배경 사진 중에서 고릅니다(사진은 글자가 잘 보이도록 어둡게 처리됩니다).
3. 필요하면 로고를 넣고, 글꼴·정렬·글자 색을 고릅니다.
4. 이미지를 올릴 주소를 입력합니다.
5. 이미지를 받아 그 주소에 올리고, 메타 태그를 페이지의 <head>에 붙여 넣습니다.

계산식

제목 글자 크기 = 최대 크기 이하에서, 줄바꿈한 제목이 4줄 이내이고 (줄 수 × 크기 × 1.15)가 남는 높이 이하가 되는 가장 큰 크기

글자 크기는 2 px씩 줄어 최소 32 px까지 내려가며, 최소 크기에서도 넘치는 줄은 잘리고 “…”로 끝납니다. 남는 높이는 630에서 여백, 로고(최대 80 px), 부제 줄을 뺀 값입니다. 1200 × 630은 1.91:1 비율로, 페이스북, 링크드인, X가 큰 링크 미리보기에 쓰는 모양입니다.

예시

여백 80 px, 로고 없음, 부제가 있으면 남는 높이는 630 − 80 − 80 − 52 = 418 px입니다. 제목이 76 px에서 텍스트 너비 1040 px 안에 3줄로 들어가면 3 × 76 × 1.15 ≈ 262 px가 필요하므로 76 px 그대로 유지되고, 부제 위쪽에서 세로 가운데에 놓입니다. 제목이 두 배로 길면 5줄이 필요해 4줄에 들어갈 때까지 글자가 작아집니다.