OG (Open Graph)란?
OG(Open Graph)는 페이스북이 개발한 메타 태그 프로토콜로, 웹페이지가 소셜 미디어에서 공유될 때 미리보기(Preview)를 최적화하는 역할을 합니다.
OG 태그의 역할
웹페이지를 페이스북, 트위터, 카카오톡, 링크드인 등에서 공유할 때, 단순한 링크가 아니라 이미지, 제목, 설명을 포함한 미리보기를 생성합니다.
기본 OG 태그 예시
주요 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`), 카카오톡에서 미리보기가 깨지지 않도록 이미지 크기 명시
