Open Graph 태그 생성기 완벽 가이드
Open Graph(OG) 태그는 페이스북, 카카오톡, 트위터, 링크드인 등 소셜 미디어 플랫폼에서 웹 페이지 링크를 공유할 때 표시되는 미리보기 정보를 제어하는 HTML 메타 태그입니다. 2010년 페이스북이 처음 도입한 이 프로토콜은 현재 거의 모든 소셜 미디어 플랫폼에서 표준으로 사용되고 있으며, 웹사이트의 클릭률(CTR)과 트래픽에 직접적인 영향을 미칩니다.
OG 태그가 중요한 이유
적절한 OG 태그 설정 없이 링크를 공유하면 소셜 미디어 크롤러가 페이지의 임의 텍스트와 이미지를 가져와 미리보기를 생성합니다. 이는 의도하지 않은 내용이 표시되거나, 이미지가 잘리거나, 아예 미리보기가 나타나지 않는 문제를 초래합니다. 반면 OG 태그를 올바르게 설정하면 브랜드 인지도를 높이고, 클릭률을 최대 2~3배까지 향상시킬 수 있습니다. 특히 카카오톡에서 링크를 공유할 때 깔끔한 미리보기 카드가 표시되면 상대방의 클릭 유도에 큰 효과가 있습니다.
필수 OG 태그 속성
- og:title - 페이지 제목으로, 60자 이내가 권장됩니다. SNS에서 가장 먼저 보이는 텍스트이므로 핵심 키워드를 포함하세요.
- og:description - 페이지 설명으로, 120자 이내가 적절합니다. 사용자의 클릭을 유도하는 매력적인 문구를 작성하세요.
- og:image - 미리보기 이미지의 절대 URL입니다. 1200x630px 크기가 가장 호환성이 좋습니다.
- og:url - 페이지의 정규(canonical) URL입니다. 중복 콘텐츠 문제를 방지합니다.
Twitter 카드 태그
트위터(X)는 자체 메타 태그 시스템인 Twitter Cards를 사용합니다. twitter:card 태그로 카드 유형을 지정하고, twitter:title, twitter:description, twitter:image 태그로 미리보기 내용을 제어합니다. OG 태그와 함께 설정하면 각 플랫폼에 최적화된 미리보기를 제공할 수 있습니다. summary_large_image 카드 유형이 가장 일반적으로 사용됩니다.
카카오톡 링크 미리보기 최적화
카카오톡은 OG 태그를 기반으로 링크 미리보기를 생성합니다. 이미지가 올바르게 표시되려면 HTTPS URL을 사용하고, 이미지 크기가 200x200px 이상이어야 합니다. 카카오톡 캐시를 초기화하려면 카카오 개발자 도구의 디버거를 사용하세요. 정확한 OG 태그 설정은 카카오톡 마케팅 효과를 크게 높여줍니다.
자주 묻는 질문 (FAQ)
Q. OG 태그를 설정했는데 카카오톡에서 미리보기가 바뀌지 않아요.
A. 카카오톡은 한번 크롤링한 OG 정보를 캐시에 저장합니다. 카카오 개발자 도구(developers.kakao.com)의 '도구 > 디버거 > 공유 디버거'에서 URL 캐시를 초기화한 후 다시 공유해 보세요. 페이스북도 마찬가지로 Sharing Debugger(developers.facebook.com/tools/debug/)를 통해 캐시를 갱신할 수 있습니다.
Q. og:image 크기는 어떻게 설정하는 것이 가장 좋나요?
A. 모든 SNS 플랫폼과의 호환성을 위해 1200x630px (1.91:1 비율)을 권장합니다. 파일 크기는 1MB 이하, 형식은 JPG 또는 PNG가 가장 안정적입니다. 이미지 URL은 반드시 절대 경로(https://로 시작)를 사용해야 하며, 리다이렉트되지 않는 직접 URL이어야 합니다.
Q. OG 태그와 일반 HTML title, meta description의 차이점은 무엇인가요?
A. HTML의 title 태그와 meta description은 검색 엔진 결과 페이지(SERP)에 표시되는 정보를 제어하고, OG 태그는 소셜 미디어 공유 시 미리보기 정보를 제어합니다. 두 가지를 모두 설정하되, OG 태그에는 SNS 사용자에게 더 매력적인 문구를 사용하는 것이 효과적입니다. OG 태그가 없으면 대부분의 소셜 미디어는 title과 meta description을 대신 사용합니다.
Q. Twitter 카드 태그는 꼭 별도로 설정해야 하나요?
A. 트위터는 twitter: 태그가 없으면 OG 태그를 대체로 사용합니다. 하지만 twitter:card 태그는 반드시 설정해야 카드가 활성화됩니다. 트위터에서 다른 제목이나 설명을 표시하고 싶다면 별도의 twitter:title, twitter:description을 설정하세요.