링크 공유할 때 이미지가 안 나와서 고민이신가요?
정성껏 작성한 블로그 글이나 홈페이지 링크를 카카오톡이나 페이스북에 공유했는데, 제목만 덜렁 나오거나 엉뚱한 이미지가 표시되어 당황하신 적 있으시죠? 이는 오픈 그래프(Open Graph) 설정이 제대로 되어 있지 않기 때문이에요. 첫인상이 중요한 웹 세상에서 OG 이미지 설정은 클릭률을 결정짓는 핵심 요소입니다.
📌 핵심 요약
OG 태그는 SNS 공유 시 미리보기 화면을 구성하는 메타데이터입니다.
HTML 헤더에 전용 태그를 삽입하거나 플러그인을 활용해 간단히 설정할 수 있어요. 설정 후에는 반드시 각 플랫폼의 디버거를 통해 캐시를 삭제해줘야 즉시 반영됩니다.
오늘 저와 함께 초보자도 10분 만에 끝낼 수 있는 OG 이미지 설정 방법을 단계별로 알아볼게요. 이 글만 끝까지 읽으시면 더 이상 링크 미리보기 때문에 스트레스받을 일은 없으실 거예요!
오픈 그래프(OG) 태그의 기본 구조와 구성 요소
본격적인 설정에 앞서, 우리가 제어해야 할 태그들이 무엇인지 알아야겠죠? 오픈 그래프는 페이스북이 처음 만든 프로토콜로, 현재는 거의 모든 SNS와 메신저에서 표준처럼 사용되고 있어요.
이 중에서 og:image가 오늘 우리가 해결해야 할 핵심이에요. 이 태그가 없으면 플랫폼은 페이지 내에서 가장 크거나 관련성 있다고 판단되는 이미지를 마음대로 골라버리거든요.
워드프레스에서 플러그인으로 1분 만에 설정하기
워드프레스를 사용 중이라면 코드를 건드릴 필요가 전혀 없어요. SEO 플러그인을 활용하면 클릭 몇 번으로 해결됩니다. 가장 많이 사용하는 Yoast SEO를 기준으로 설명해 드릴게요.
SEO 플러그인 설치 및 활성화
Yoast SEO 또는 Rank Math 플러그인을 설치해 주세요.
소셜 메타 설정 이동
포스트 편집 화면 하단의 SEO 설정 영역에서 'Social' 탭을 클릭합니다.
이미지 업로드
Facebook Image 또는 Twitter Image 항목에 권장 사이즈에 맞춘 이미지를 업로드하고 저장하면 끝!
💡 꼭 알아두세요
사이트 전체의 기본 OG 이미지는 [SEO] -> [Social] 메뉴에서 설정할 수 있어요. 개별 글에 이미지를 넣지 않았을 때 기본으로 보여질 대표 이미지를 꼭 등록해 두세요.
HTML 코드로 직접 삽입하는 방법 (일반 홈페이지/티스토리)
플러그인을 쓸 수 없는 환경이나 직접 코딩한 사이트라면 HTML의 <head> 태그 사이에 직접 코드를 넣어줘야 해요. 티스토리의 경우 '스킨 편집' 메뉴에서 적용할 수 있습니다.
📋 삽입할 태그 체크리스트
☑ <meta property="og:description" content="상세 설명">
☑ <meta property="og:image" content="이미지 URL">
☑ <meta property="og:url" content="페이지 주소">
여기서 주의할 점은 이미지 URL은 반드시 절대 경로(https://...)로 입력해야 한다는 거예요. 상대 경로로 입력하면 SNS 로봇이 이미지를 찾지 못해 미리보기가 작동하지 않습니다.
⚠️ 주의사항
태그를 넣을 때 큰따옴표(")가 누락되지는 않았는지, 닫는 괄호(>)가 잘 닫혔는지 꼭 확인하세요. 작은 오타 하나로도 인식이 안 될 수 있습니다.
설정해도 안 나온다면? 플랫폼별 캐시 삭제(디버깅) 필수!
분명히 태그를 넣었는데도 예전 이미지가 나오거나 여전히 엑박이 뜬다구요? 그건 카카오톡이나 페이스북 서버에 기존 데이터가 캐시로 남아있기 때문이에요. 이럴 때는 각 플랫폼에서 제공하는 도구를 사용해 강제로 업데이트를 시켜줘야 합니다.
🅰️ 카카오톡 디버거
'카카오 개발자 센터'의 공유 디버거 도구에 주소를 넣고 '캐시 삭제'를 누르면 즉시 반영됩니다.
🅱️ 페이스북 공유 디버거
'Scrape Again' 버튼을 클릭하여 페이스북 로봇이 내 사이트를 다시 긁어가도록 요청하세요.
캐시 삭제를 완료한 후 링크를 다시 공유해 보세요. 이제 여러분이 설정한 멋진 이미지가 나타나는 것을 확인하실 수 있을 거예요!
완벽한 OG 이미지 권장 규격 및 꿀팁
이미지가 잘 나오더라도 크기가 잘리거나 화질이 흐릿하면 신뢰도가 떨어지죠. 모든 SNS에서 가장 예쁘게 보이는 황금 비율이 있습니다.
"가장 권장하는 사이즈는 1200 x 630 픽셀 (1.91:1 비율)입니다."
— Facebook & Google 공식 가이드
이 비율을 유지하면 모바일과 PC 환경 모두에서 이미지가 잘리지 않고 안정적으로 노출됩니다. 또한, 이미지 내 텍스트는 가급적 중앙에 배치하세요. 플랫폼에 따라 가장자리가 조금씩 잘릴 수 있기 때문입니다.
✅ 이렇게 하면 됩니다
이미지 용량은 1MB를 넘지 않도록 최적화하세요. 용량이 너무 크면 미리보기를 불러오는 속도가 느려져 독자가 이탈할 수 있습니다.
자주 묻는 질문
설정을 바꿨는데도 카톡에서는 예전 이미지가 나와요.
카카오톡 서버가 기존 이미지를 기억하고 있기 때문입니다. 카카오 개발자 도구의 공유 디버거 사이트에 접속하여 해당 URL의 캐시를 삭제해 주면 즉시 해결됩니다.
OG 이미지로 권장하는 용량이나 포맷이 있나요?
포맷은 JPG나 PNG를 권장하며, 용량은 1MB 미만이 적당합니다. 너무 고화질이면 로딩 속도가 느려져 미리보기가 늦게 뜰 수 있습니다.
플러그인 없이 티스토리에서 설정하려면 어떻게 하나요?
티스토리 관리자 페이지의 [스킨 편집] -> [html 편집]으로 이동한 뒤, <head>와 </head> 사이에 메타 태그 코드를 직접 삽입하시면 됩니다.
참고자료 및 링크
- 카카오 개발자 도구 - 공유 디버거 카카오톡 링크 미리보기 이미지를 새로고침하고 테스트할 수 있는 공식 도구입니다.
- Facebook Sharing Debugger 페이스북과 인스타그램에서 링크가 어떻게 보이는지 확인하고 캐시를 업데이트하는 도구입니다.
- The Open Graph Protocol 공식 문서 오픈 그래프 태그에 대한 모든 표준 규격을 확인할 수 있는 공식 사이트입니다.
