오픈 그래프 태그 (Open Graph (OG) Tag)
Open Graph (OG) Tag
오픈 그래프(OG) 태그는 소셜미디어 및 메신저에 웹페이지 링크 공유 시 노출되는 미리보기(제목, 설명, 썸네일)를 제어하는 HTML 메타태그입니다. 명확한 OG 태그 설정은 CTR(클릭률)을 극대화하여 트래픽 유입에 직접적인 영향을 줍니다.
오픈 그래프(OG) 태그는 소셜미디어 및 메신저에 웹페이지 링크 공유 시 노출되는 미리보기(제목, 설명, 썸네일)를 제어하는 HTML 메타태그입니다. 명확한 OG 태그 설정은 CTR(클릭률)을 극대화하여 트래픽 유입에 직접적인 영향을 줍니다.
📖 개념 정의 및 실무 적용
실무에서 웹사이트의 특정 페이지나 콘텐츠를 카카오톡, 페이스북, 슬랙 등에 공유할 때 OG 태그가 누락되어 있거나 잘못 설정되어 있으면, 크롤러가 임의로 본문의 첫 문장이나 무작위 이미지를 가져와 치명적인 브랜드 이미지를 훼손하고 클릭률을 급감시킵니다. 이를 방지하기 위해 마케터와 개발자는 공유 시각화 요소를 명확히 통제하여 사용자의 즉각적인 관심과 유입을 유도해야 합니다.
💻 실무 활용 코드 스니펫 (HTML)
⚡ 5분 만에 적용하는 실행 스텝
- 웹사이트 HTML 문서의 태그 내부에 필수 OG 태그(title, description, image, url)를 삽입합니다.
- 썸네일 이미지 규격은 최소 1200×630 픽셀 비율(1.91:1)을 준수하여 이미지가 잘리지 않도록 호스팅합니다.
- 카카오톡 개발자 도구(링크 디버거)와 페이스북 공유 디버거를 통해 캐시를 초기화하고 미리보기가 정상 출력되는지 검증합니다.
- 운영 중인 웹사이트의 주요 랜딩 페이지와 블로그 게시글 전반에 걸쳐 태그 누락 여부를 정기 모니터링합니다.
첫째, 썸네일 이미지 내부에 너무 작은 텍스트나 핵심 정보를 넣으면 모바일 화면에서 가독성이 떨어지므로 시각적 직관성에 집중하세요. 둘째, 카카오톡이나 페이스북은 한 번 크롤링한 정보를 캐싱하므로, 이미지를 교체할 때는 파일명을 변경하거나 디버거 툴에서 ‘스크래핑 다시 하기’를 강제로 실행해야 반영됩니다.
첫째, og:image 속성값에 상대 경로(/images/photo.jpg)를 입력하면 메신저 크롤러가 이미지를 인식하지 못하므로 반드시 도메인이 포함된 절대 경로(https://…)를 사용해야 합니다. 둘째, 이미지가 너무 크거나(1MB 초과) 웹에 최적화되지 않은 형식일 경우 미리보기가 아예 로드되지 않는 오류가 발생하므로 JPG/PNG 포맷과 적정 용량을 유지하세요.
❓ 자주 묻는 질문 (FAQ)
A. 카카오톡 서버에 이전 정보가 캐싱되어 있기 때문입니다. ‘카카오 Developers 디버거(developers.kakao.com/tool/clear/og)’에 접속하여 해당 URL을 입력하고 ‘캐시 무효화’를 실행하면 즉시 최신 정보가 반영됩니다.
A. 기술적으로는 가능하나 추천하지 않습니다. 각 페이지의 콘텐츠 맥락에 맞게 타이틀과 썸네일이 동적으로 변경되어야 사용자의 관심과 클릭률을 극대화할 수 있습니다. 상세 페이지마다 고유의 OG 태그를 출력하도록 세팅하세요.