안녕하세요, 오픈타임 박실장입니다.
혹시 이런 경험 있으신가요?
링크를 공유했는데 썸네일 이미지가 엉뚱하거나,
설명이 엉성해서 누가 봐도 클릭하고 싶지 않은 링크처럼 보였던 적.
이 모든 문제, **오픈그래프(Open Graph)**로 해결할 수 있습니다.
오늘은 오픈그래프의 개념부터 설정, SEO와의 관계까지 확실하게 정리해드릴게요.
오픈그래프(Open Graph)란?
**오픈그래프(Open Graph)**는 웹페이지를 SNS나 메신저에서 공유할 때,
어떻게 보일지 미리 결정하는 HTML 메타 태그입니다.
- 제목(og:title)
- 설명(og:description)
- 이미지(og:image)
- URL(og:url)
이 네 가지 핵심 정보가 바로 사용자의 첫인상을 결정합니다.
html복사편집<head>
<meta property="og:title" content="오픈그래프란 무엇인가?" />
<meta property="og:description" content="SNS에서 링크를 더 매력적으로 보이게 만드는 방법." />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
</head>
왜 오픈그래프를 설정해야 할까요?
1. 클릭률 향상
카카오톡, 페이스북, 트위터에서 링크를 공유할 때
선명한 이미지 + 관심을 끄는 설명이 있다면 클릭률이 높아집니다.
2. 브랜드 이미지 통일
모든 채널에서 동일한 시각적 메시지를 제공해
브랜드 인지도를 쌓을 수 있습니다.
3. SEO 간접적 도움
구글과 네이버는 오픈그래프 데이터를 웹페이지 맥락 파악에 활용합니다.
즉, 오픈그래프 설정은 콘텐츠 구조화 측면에서 긍정적인 신호로 작용합니다.
오픈그래프 4가지 주요 요소
| 속성 | 역할 |
|---|---|
og:title | 공유 시 노출되는 제목 |
og:description | 페이지 요약 설명 |
og:image | 대표 썸네일 이미지 |
og:url | 정확한 페이지 주소 |
Tip: 콘텐츠별로 제목과 설명을 다양하게 설정해두면,
SNS에서 보다 개별 맞춤형 링크 미리보기를 만들 수 있습니다.
이미지 규격은 어떻게 맞춰야 할까요?
| 플랫폼 | 권장 사이즈 | 주의사항 |
|---|---|---|
| 페이스북 | 1200x630px | 최소 600x315px 이상 |
| 트위터 | 1200x600px | 위아래 잘림 주의 |
| 카카오톡 | 800x400px | 정사각형 이미지 사용 시 중앙 정렬 필수 |
| 텔레그램 | 1:1 or 2:1 모두 가능 | 배경 비율에 따라 자동 조정됨 |
정사각형(1:1) 이미지는 다양한 플랫폼에서 안정적으로 출력되므로
가장 안전한 선택지입니다.
오픈그래프 적용 방법
1. HTML 직접 삽입
웹페이지 <head>에 메타 태그 추가
(위 코드 예시 참고)
2. 워드프레스 플러그인 사용
- Yoast SEO
- Rank Math
이 플러그인을 사용하면 글 작성 시 오픈그래프를 시각적으로 설정할 수 있어 편리합니다.
적용 후 확인하는 법
✅ 페이스북 Debugger 도구
- Sharing Debugger
- URL 입력 → 실시간 미리보기 확인
✅ 카카오톡/트위터에서 직접 공유 테스트
- 링크 복사 후 카카오톡/트위터에 붙여 넣기 → 썸네일, 설명 확인
자주 묻는 질문
오픈그래프만 설정해도 구글 SEO에 효과 있나요?
오픈그래프 단독으로 SEO 효과를 주진 않지만,
페이지 구조를 명확히 해주는 신호로서 간접적인 도움은 됩니다.
특히 소셜 공유를 통한 외부 트래픽 유입에는 효과적입니다.
결론: 작은 설정, 큰 차이
오픈그래프는 단순한 설정 같지만,
링크 하나의 클릭률을 좌우하는 중요한 요소입니다.
검색엔진에도 긍정적인 구조화 신호를 주는 만큼 꼭 챙기셔야 합니다.
