오픈그래프(Open Graph)는 링크를 카카오톡·페이스북 같은 서비스에 공유할 때 미리보기로 보이는 제목·설명·이미지를 페이지 쪽에서 지정하는 메타 태그 규칙입니다. 페이지의 <head> 안에 og:title, og:type, og:image, og:url 네 가지 필수 태그를 넣으면 되고, 적용 결과는 브라우저 개발자 도구와 각 서비스의 공유 디버거로 확인합니다.
이 글에서는 오픈그래프의 뜻, 태그 작성법과 코드 예시, og:image 사이즈 기준, 적용 후 확인하는 방법, 미리보기가 바뀌지 않을 때의 캐시 초기화까지 순서대로 정리합니다. 오픈그래프는 검색 엔진 최적화를 위한 페이지 기본 설정과 함께 챙기면 좋은 항목입니다.
오픈그래프 뜻은 무엇인가요?
오픈그래프는 웹페이지를 하나의 ‘객체’로 보고, 그 객체의 이름·유형·대표 이미지·고유 주소를 메타 태그로 적어 두는 프로토콜입니다. 공식 문서(ogp.me)는 모든 페이지에 og:title, og:type, og:image, og:url 네 가지 속성이 필요하다고 안내합니다.
링크가 공유되면 각 서비스의 수집 서버가 페이지를 방문해 이 태그를 읽고 미리보기 카드를 만듭니다. 태그가 없으면 서비스가 페이지에서 임의로 글과 이미지를 골라 쓰기 때문에, 본문과 상관없는 이미지나 잘린 문장이 미리보기에 뜨는 일이 생깁니다.
오픈그래프 태그 종류는 무엇이 있나요?
오픈그래프 태그는 필수 4개와 자주 쓰는 선택 태그로 나뉩니다. 아래 표는 ogp.me와 Meta 웹마스터 문서를 기준으로 정리한 것입니다.
| 태그 | 구분 | 뜻 | 작성 요령 |
|---|---|---|---|
| og:title | 필수 | 미리보기에 보이는 제목 | 페이지 제목과 같은 주제로 짧게 |
| og:type | 필수 | 객체 유형 | 블로그 글은 article, 일반 페이지는 website (Meta는 지정하지 않으면 website로 처리) |
| og:image | 필수 | 대표 이미지 주소 | https로 시작하는 전체 주소 |
| og:url | 필수 | 객체의 고유 주소(표준 URL) | 세션·추적 파라미터를 뺀 주소 |
| og:description | 선택 | 한두 문장 요약 | 본문 내용을 정확히 요약 |
| og:site_name | 선택 | 사이트 이름 | 브랜드명 |
| og:locale | 선택 | 언어·지역 | 기본값이 en_US이므로 한국어 페이지는 ko_KR |
| og:image:width / height / alt | 선택 | 이미지 크기·설명 | 크기를 적으면 첫 공유 때 이미지가 바로 표시되기 쉬움 |
오픈그래프 태그 작성법은 어떻게 되나요?
오픈그래프 태그는 페이지 <head> 안에 <meta property="og:속성" content="값"> 형식으로 한 줄씩 넣습니다. name이 아니라 property 속성을 쓰는 점이 일반 메타 태그와 다르고, 공식 문서는 <html> 요소에 og 접두사를 선언하는 방식을 예시로 듭니다.
<html lang="ko" prefix="og: https://ogp.me/ns#">
<head>
<title>오픈그래프 뜻과 태그 작성법</title>
<meta property="og:title" content="오픈그래프 뜻과 태그 작성법">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/open-graph/">
<meta property="og:image" content="https://example.com/images/og-open-graph.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="오픈그래프 태그 구조를 설명하는 도식">
<meta property="og:description" content="링크 미리보기의 제목·설명·이미지를 지정하는 방법을 정리했습니다.">
<meta property="og:site_name" content="예시 사이트">
<meta property="og:locale" content="ko_KR">
</head>같은 태그를 여러 번 넣으면 위에 있는 것이 우선하므로, 테마와 플러그인이 각각 og 태그를 출력해 중복되지 않았는지도 확인해야 합니다. 워드프레스라면 Rank Math·Yoast SEO 같은 플러그인이 글 제목·대표 이미지를 바탕으로 og 태그를 자동 출력하고, 글 편집 화면의 소셜 항목에서 따로 고칠 수 있습니다. 플러그인 설정은 Yoast·Rank Math 설정 가이드에 정리해 두었습니다.
og:image 사이즈는 얼마가 좋나요?
og:image는 가로 1200 × 세로 630픽셀 이상, 가로세로 약 1.91:1 비율로 만드는 것이 무난합니다. Meta 이미지 가이드는 고해상도 기기에서 잘 보이도록 1200 × 630픽셀 이상을 권장하고, 최소 200 × 200픽셀, 큰 링크 이미지로 보이려면 600 × 315픽셀 이상, 파일 용량은 8MB 이하로 안내합니다.
- 구글 Discover 문서는 큰 이미지를 og:image 메타 태그나 schema.org 마크업으로 지정하고, 가로 1200픽셀 이상을 쓰며, 사이트 로고 같은 일반 이미지는 피하라고 안내합니다.
- 서비스마다 미리보기를 자르는 비율이 다를 수 있으므로 핵심 글자와 피사체는 이미지 가운데에 둡니다.
- og:image:width와 og:image:height를 함께 적으면 Meta 수집기가 첫 공유 때 이미지를 바로 표시할 수 있습니다.
오픈그래프가 SEO에 도움이 되나요?
오픈그래프는 구글 순위를 직접 올리는 요소로 안내된 적이 없고, 주된 역할은 공유 미리보기를 정확하게 만드는 것입니다. 다만 구글 문서는 검색 결과 제목 링크를 만들 때 참고하는 자료 중 하나로 og:title을 들고, Discover 썸네일 지정 방법으로 og:image를 언급합니다.
그래서 오픈그래프는 순위 요인이라기보다 제목·이미지 신호를 일관되게 맞추고, 공유된 링크의 클릭을 돕는 기본 설정으로 보는 것이 정확합니다. 검색 결과에 보이는 title·description 설정은 메타 태그 설정 방법에서, 용어 정리는 오픈그래프 용어 설명에서 볼 수 있습니다.
오픈그래프 적용 후 어떻게 확인하나요?
가장 빠른 확인법은 페이지 소스에서 og: 태그가 실제로 출력되는지 보는 것이고, 그다음 서비스별 공유 디버거로 미리보기가 어떻게 만들어지는지 확인합니다.
- 소스 확인: 크롬에서 Ctrl+U(페이지 소스 보기)를 누르고 Ctrl+F로 og: 를 검색해 필수 4개 태그와 값이 맞는지 봅니다. 개발자 도구(F12)의 Elements 탭에서도 같은 방법으로 볼 수 있습니다.
- Meta 공유 디버거: Meta 공유 디버거에 주소를 넣으면 페이스북 공유 시 미리보기와 읽어 온 og 태그를 보여 주고, 이때 페이지를 다시 수집합니다. 페이스북 계정 로그인이 필요합니다.
- 카카오 공유 디버거: 카카오 디벨로퍼스의 공유 디버거에서 주소를 디버그하면 카카오가 수집한 미리보기를 볼 수 있고, 캐시 초기화 버튼도 있습니다. 카카오 계정 로그인이 필요합니다.
- 실제 공유 테스트: 마지막으로 나와의 채팅 등에 링크를 붙여 넣어 실제 화면을 봅니다.
태그를 고쳤는데 예전 미리보기가 나오는 이유는 무엇인가요?
각 서비스가 처음 수집한 미리보기를 캐시에 저장해 두기 때문입니다. Meta 문서에 따르면 이미지는 주소 기준으로 캐시되어 주소가 바뀌지 않으면 갱신되지 않으므로, 이미지를 바꿀 때는 새 파일 주소를 쓰고 공유 디버거로 다시 수집하게 하는 것이 확실합니다.
카카오톡은 공유 디버거에서 캐시 초기화 후 다시 디버그하면 다음 공유부터 새 미리보기가 나옵니다. 다만 대화창에 주소를 직접 붙여 넣는 URL 미리보기는 기기 쪽 캐시가 남아 있을 수 있어, 카카오 기술 블로그는 앱의 저장공간 관리에서 캐시 데이터를 지우는 방법을 함께 안내합니다.
오픈그래프 설정에서 자주 하는 실수는 무엇인가요?
- 모든 페이지에 같은 og 태그: 홈 화면 제목과 로고가 모든 글의 미리보기로 나옵니다. 글마다 제목·설명·이미지를 따로 지정합니다.
- og:url에 파라미터 포함: Meta는 세션 변수나 추적 파라미터가 없는 주소를 쓰라고 안내합니다. 캐노니컬 주소와 같게 맞추는 것이 안전하며, 자세한 내용은 캐노니컬 태그 글에 있습니다.
- 이미지 주소 오류: 상대 경로나 접근이 막힌 이미지 주소를 넣으면 수집기가 이미지를 가져오지 못합니다.
- 태그 중복: 테마와 플러그인이 og 태그를 각각 출력하면 앞쪽 값이 쓰여 의도와 다른 미리보기가 나올 수 있습니다.
오픈그래프와 메타 태그는 무엇이 다른가요?
둘 다 head 안의 meta 요소이지만 쓰는 곳이 다릅니다. title·description 같은 메타 태그는 주로 검색 결과에 쓰이고, 오픈그래프는 property=og:… 형식으로 링크 공유 미리보기에 쓰입니다. 두 값을 같은 주제로 맞춰 두면 검색과 공유에서 페이지가 일관되게 보입니다.
og:description을 비워 두면 어떻게 되나요?
og:description은 선택 태그라 없어도 미리보기는 만들어집니다. 다만 서비스가 본문이나 일반 description에서 문장을 임의로 가져올 수 있으므로, 한두 문장 요약을 직접 지정해 두는 편이 의도한 문구를 보여 주기에 유리합니다.
카카오톡 미리보기 이미지는 어떻게 바꾸나요?
페이지의 og:image를 새 이미지 주소로 바꾼 뒤, 카카오 디벨로퍼스 공유 디버거에서 해당 주소를 디버그하고 캐시 초기화를 누릅니다. 대화창에 직접 붙여 넣은 링크가 그대로라면 기기의 카카오톡 캐시 데이터를 지우고 다시 확인합니다.