OG (Open Graph)란?
OG(Open Graph)는 페이스북이 개발한 메타 태그 프로토콜로, 웹페이지가 소셜 미디어에서 공유될 때 미리보기(Preview)를 최적화하는 역할을 합니다.
OG 태그의 역할
웹페이지를 페이스북, 트위터, 카카오톡, 링크드인 등에서 공유할 때, 단순한 링크가 아니라 이미지, 제목, 설명을 포함한 미리보기를 생성합니다.
기본 OG 태그 예시
<meta property="og:title" content="웹사이트 제목">
<meta property="og:description" content="웹페이지에 대한 설명">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="웹사이트 이름">
주요 OG 태그 정리
- og:title - 공유될 때 표시될 제목
- og:description - 콘텐츠 설명 (미리보기 텍스트)
- og:image - 썸네일 이미지 URL (권장 크기: 1200x630px)
- og:url - 해당 페이지의 URL
- og:type - 콘텐츠 유형 (예: website, article, video)
- og:site_name - 웹사이트 이름
- og:locale - 언어 및 지역 설정 (예: ko_KR 한국어)
OG 이미지 권장 사항
- 이미지 크기: 일반적으로는 1200 x 630 픽셀 정도의 크기가 많이 사용됩니다. 각 소셜 미디어 플랫폼마다 권장하는 이미지 크기가 다를 수 있습니다. 1.91:1 비율을 유지하는 것이 좋습니다.
- 이미지 형식: JPEG, PNG 등 일반적인 이미지 포맷을 사용할 수 있으며, 파일 크기가 너무 크면 로딩 속도에 영향을 줄 수 있으므로 적절하게 최적화하는 것이 좋습니다.
- 여러 개의 이미지: 필요에 따라 여러 개의 og:image 태그를 사용하여 다양한 이미지를 지정할 수도 있습니다. 이 경우, 소셜 미디어 플랫폼이 우선순위에 따라 이미지를 선택합니다.
- 절대 경로 사용: 이미지 URL은 가능한 한 절대 경로를 사용하여 웹페이지 외부에서도 접근 가능하도록 하는 것이 좋습니다.
특정 플랫폼 최적화
- Facebook & LinkedIn: 1200 x 630px
- Twitter (X) Card: 1200 x 600px (또는 1200 x 675px)
- Instagram & WhatsApp: 정사각형 (1200 x 1200px) 또는 1200 x 630px
OG 태그 적용 효과
- SNS에서 링크 공유 시 썸네일 이미지 + 제목 + 설명 자동 생성
- 링크 클릭률(CTR) 증가 및 더 매력적인 미리보기 제공
- 페이스북, 링크드인, 카카오톡, 트위터(X) 등에서 미리보기 최적화
추가로 적용할 수 있는 태그
- Twitter 카드 태그 (`twitter:card`) - 트위터에서 OG 태그와 함께 작동하도록 설정 가능
- 카카오톡 미리보기 (`og:image:width`, `og:image:height`) - 카카오톡에서 미리보기가 깨지지 않도록 이미지 크기 명시
공유 디버거
Meta Facebook 공유 디버거
Kakao 공유 디버거
