Open Graph Tags: 소셜 미디어 미리보기를 제어하고 SEO를 향상시키는 방법
발행: (2026년 3월 16일 AM 01:28 GMT+9)
7 분 소요
원문: Dev.to
Source: Dev.to
번역할 텍스트를 제공해 주시면, 요청하신 대로 한국어로 번역해 드리겠습니다. (코드 블록, URL 및 마크다운 형식은 그대로 유지됩니다.)
Introduction
소셜 미리보기는 새로운 홈페이지가 되었습니다. 링크가 LinkedIn, X (Twitter), Facebook, Slack과 같은 플랫폼에 공유될 때, Open Graph (OG) 태그가 사용자가 보는 이미지, 제목, 설명을 결정합니다. OG 태그를 올바르게 구현하면 일관된 미리보기를 제공하고 클릭‑through 비율을 높이며 SEO 신호를 강화할 수 있습니다.
기본 Open Graph 태그
모든 공유 가능한 페이지의 <head> 안에 다음 메타 태그를 추가하세요:
브랜드 일관성을 위한 선택적 태그
모범 사례
제목 및 설명
- 길이: 제목은 약 60자 이하로 유지하고 주요 키워드를 앞쪽에 배치합니다.
- 설명: 140–180자 정도를 목표로 하며, 혜택을 명확히 제시합니다.
- 일부 클라이언트가 잘라내는 인용부호와 특수 구두점을 피합니다.
- OG 제목/설명이 페이지 내용과 일치하도록 하여 클릭베이트를 방지하고 관련성 신호를 향상시킵니다.
이미지 가이드라인
- 권장 크기: JPG 또는 PNG 형식의 1200 × 630 px(종횡비 1.91:1), 용량은 약 2 MB 이하.
- 최소 크기: 200 × 200 px; 이보다 작은 이미지는 무시될 수 있습니다.
- 제품명, 짧은 헤드라인, 브랜드 마크를 포함하고, 작은 텍스트는 피합니다.
- 밝고 어두운 배경 모두에서 이미지가 잘 보이도록 고대비를 사용합니다.
- OG 이미지는 CDN에 호스팅하여 빠르고 캐시 가능한 전달을 보장합니다.
URL 및 정규화
og:url은 각 언어/버전에 대한 정규 URL을 가리켜야 합니다.<link rel="canonical">을 사용해 크롤러에게 기본 URL을 알려, 추적 파라미터나 지역 도메인 아래 동일 콘텐츠가 존재할 때 분산된 참여 지표를 방지합니다.- OG 태그에서는 항상 절대 HTTPS URL을 사용합니다(상대 URL 금지).
현지화
og:locale(예:en_US,de_DE) 및og:locale:alternate를 설정하여 대체 언어 버전을 지정합니다.- 다국어 페이지를 위해 제목, 설명 및 이미지를 현지화합니다.
- 각 미리보기에서 언어 일관성을 유지하고, 하나의 미리보기에서 언어를 혼합하지 않도록 합니다.
테스트 및 디버깅
| Tool | Purpose |
|---|---|
| Facebook Sharing Debugger | Facebook이 OG 태그를 읽는 방식을 보여주며, 강제로 다시 스크랩할 수 있습니다. |
| LinkedIn Post Inspector | LinkedIn용 Facebook 도구와 유사합니다. |
| Twitter Card Validator | Twitter 전용 태그(twitter:card, twitter:image)를 확인합니다. |
Open Graph Preview (e.g., https://opengraph-preview.com) | 게시하기 전에 태그 미리보기를 렌더링합니다. |
워크플로우
- OG 태그를 추가/수정합니다.
- 적절한 디버거에 URL을 입력하여 필드, 종횡비 및 이미지 접근성을 확인합니다.
- 변경 사항이 있으면 도구의 “Scrape Again” 또는 “Refresh” 버튼을 사용해 캐시된 미리보기를 삭제합니다.
일반적인 문제 및 해결 방법
| 문제 | 원인 | 해결 방법 |
|---|---|---|
| 이미지 누락 또는 손상 | og:image 누락, 상대 URL, 또는 robots.txt/인증으로 이미지 차단 | 절대 HTTPS URL을 추가하고 이미지가 공개적으로 접근 가능하도록 합니다. |
| 이미지 크기가 너무 작음 | Dimensions < 200 × 200 px | 권장 크기인 1200 × 630 px를 사용합니다. |
| 디자인 재구성 후 미리보기 오래됨 | Platform cache still holds old image | 디버거를 통해 URL을 다시 스크랩하거나 이미지 URL에 캐시 방지 쿼리 문자열을 추가합니다. |
| 모든 페이지에 동일한 OG 이미지 사용 | Reusing a generic image | 페이지마다 고유한 OG 이미지를 생성합니다(예: 페이지 제목을 삽입하는 템플릿 사용). |
| 언어 혼합 콘텐츠 | Titles/descriptions not localized | 각 언어 버전에 별도 OG 태그를 제공하고 og:locale을 적절히 설정합니다. |
OG 태그 업데이트
- 업데이트 시점: 페이지 제목, 설명, 주요 콘텐츠 또는 시각적 브랜딩을 변경할 때마다.
- 업데이트 후: 플랫폼 디버거를 사용해 URL을 다시 스크랩하여 캐시된 데이터를 삭제합니다.
twitter:image가 없을 경우 Twitter가og:image를 대체한다는 점을 기억하세요. 두 태그를 모두 제공하면 호환성이 최적화됩니다.
결론
Open Graph 태그는 소셜 미디어에서 콘텐츠가 표시되는 방식을 제어하는 강력한 방법으로, 클릭‑through 비율에 영향을 주고 SEO를 강화합니다. 핵심 태그를 구현하고, 이미지 및 현지화 모범 사례를 따르며, 플랫폼 디버거로 정기적으로 테스트함으로써 공유된 모든 링크가 의도된 모습으로 표시되고 참여를 유도하도록 할 수 있습니다.