OGP 이미지란｜SNS에서 링크를 열게 만드는 크기와 만드는 법

OGP는 링크의 겉모습을 지정하는 구조

SNS나 채팅에 URL을 붙이면 제목·설명·이미지가 카드 형태로 표시됩니다. 이는 각 서비스가 페이지를 읽으러 가서 미리 심어 둔 지정을 읽어 내기 때문입니다. 이 지정의 구조가 OGP(Open Graph Protocol)입니다.

지정이 없으면 각 서비스는 페이지 안에서 아무 이미지나 가져오거나 아무것도 표시하지 않습니다. 의도하지 않은 이미지(사이드바의 광고 배너 등)가 선택되기도 하므로, 공유될 가능성이 있는 페이지에는 명시적으로 지정해 두는 것이 기본입니다.

권장 크기는 1200×630px

주요 SNS에서 안정적으로 크게 표시되는 것은 가로 1200px·세로 630px 이미지입니다. 비율로는 약 1.91 대 1이며, 이 모양이 “큰 카드”로 취급되는 기준입니다.

• 1200×630px: 망설여지면 이것. 많은 서비스가 기준으로 삼는다
• 최소 600×315px: 이보다 작으면 작은 카드로 바뀌기도 한다
• 용량은 1MB 이내를 기준으로: 너무 크면 읽히지 않아 표시되지 않을 수 있다
• 형식은 PNG 또는 JPEG: 투명은 무시되고 흰색이나 검은색으로 칠해진다는 전제로 만든다
• 정사각형 이미지를 지정하면 서비스에 따라 좌우가 잘리거나 작게 표시된다

까다로운 것은 표시되는 곳에 따라 잘리는 범위가 다르다는 점입니다. 타임라인에서는 가로형 그대로지만, 다른 곳에서는 정사각형에 가까운 모양으로 잘리기도 합니다. 그래서 끝까지 정보를 채우지 않는 것이 사실상 필수 조건이 됩니다.

작게 표시된다는 전제로 디자인한다

OGP 이미지는 실제로는 스마트폰 폭으로 표시됩니다. 1200px로 만든 것이 400px 안팎까지 줄어들어 보인다고 생각하세요. 작업 화면에서 읽히는 글자가 실제 기기에서는 읽히지 않는 일이 드물지 않습니다.

1. 1

   ① 글자는 20~30자까지로 줄인다

   한국어도 20~30자가 상한의 기준입니다. 그 이상 넣으면 축소했을 때 그냥 무늬가 됩니다. 설명은 og:description 쪽에 맡깁니다.

2. 2

   ② 글자 크기는 1200px 폭에서 60px 이상

   이미지 전체 높이의 10% 정도가 최소선입니다. 가는 글꼴은 축소에 약하므로 굵은 서체를 고릅니다.

3. 3

   ③ 배경과 글자의 대비를 확보한다

   사진 위에 글자를 놓는다면 어두운 띠나 반투명 판을 깐 뒤 겹칩니다. 사진의 밝은 부분에 흰 글자를 두면 실제 기기에서는 사라집니다.

4. 4

   ④ 축소해서 확인한다

   내보낸 뒤 이미지를 400px 폭 정도로 줄여서 봅니다. 무엇이 쓰여 있는지 한눈에 알 수 없다면 정보가 너무 많은 것입니다.

1200×630px 이미지를 처음부터 준비하기 번거롭다면 프로필 카드 메이커로 만든 카드를 그대로 쓸 수 있습니다. 내보내는 PNG는 1200×630px로 OGP 권장 크기와 같습니다. 이름이나 직함만 바꾸면 자기소개 페이지나 SNS 공유용 이미지로 돌려 쓸 수 있습니다.

이미지가 표시되지 않을 때의 확인

가장 많은 것은 캐시입니다. 각 SNS는 한 번 읽은 내용을 보관하기 때문에, 이미지를 바꿔도 오래된 카드가 계속 나옵니다. 공식 디버그 도구로 URL을 다시 가져오면 갱신됩니다. 내 브라우저에서 새로고침해도 효과는 없습니다.

용량을 줄여야 한다면 가로세로 px는 유지한 채 형식과 화질을 조정하는 것이 정석입니다. 1200×630px 그대로 JPEG로 변환하고 화질을 80~90% 정도로 하면 겉모습을 유지하면서 크게 줄일 수 있습니다.

운영에서 챙겨 둘 것

• 사이트 공통 기본 이미지를 1장 준비한다. 개별 지정이 없는 페이지도 비지 않는다
• 페이지마다 바꾸는 경우에도 레이아웃의 틀은 맞춘다. 나란히 놓였을 때 같은 출처임을 알 수 있다
• 업데이트할 때마다 이미지 파일 이름을 바꾼다. 같은 이름이면 캐시가 남기 쉽다
• 제목은 og:title에 맡기고, 이미지 안에 같은 글자를 크게 겹치지 않는다
• 대표 이미지와 OGP 이미지는 따로 준비한다. 글 상단의 이미지는 가로세로 비율이 다르다

네 번째는 놓치기 쉬운 점입니다. 카드에서는 이미지 바로 아래에 제목이 표시되므로, 이미지 안에도 같은 문구가 있으면 같은 글자가 두 번 나란히 나옵니다. 이미지 쪽에는 짧은 키워드나 도판을 두고 정확한 내용은 제목에 맡기면 정보량의 균형이 맞습니다.

자주 묻는 질문

OGP 이미지 크기는 몇 px가 정답인가요?

1200×630px(약 1.91 대 1)가 가장 무난합니다. 주요 SNS가 이 비율을 큰 카드로 취급하기 때문입니다. 최소한 600×315px는 확보하세요. 이보다 작으면 작은 카드 표시로 바뀌기도 합니다.

이미지를 바꿨는데 예전 것이 표시됩니다.

각 SNS가 페이지 내용을 캐시하고 있기 때문입니다. 공식 디버그 도구로 URL을 다시 가져오면 갱신됩니다. 이미지 파일 이름도 함께 바꿔 두면 캐시가 잘 남지 않습니다. 내 브라우저를 새로고침해도 SNS 쪽 표시는 바뀌지 않습니다.

OGP 이미지를 설정하면 검색 순위가 오르나요?

검색 순위에 직접적인 영향은 없습니다. 효과가 나타나는 것은 SNS에서 공유되었을 때의 클릭률입니다. 같은 링크라도 이미지가 있는 카드와 텍스트만 있는 카드는 열리는 횟수가 다르므로, 유입이라는 의미에서는 차이가 납니다.

투명 PNG를 OGP 이미지로 쓸 수 있나요?

쓸 수는 있지만 투명한 부분은 표시되는 곳에서 흰색이나 검은색으로 바뀝니다. 다크 모드로 볼 때 글자나 로고가 사라질 우려가 있으므로, 배경색을 명시적으로 칠한 상태로 내보내는 것을 권합니다.