오픈그래프는 링크를 공유할 때 표시되는 제목, 이미지, 설명 미리보기를 지정하는 메타 태그 규약입니다. 카카오톡, 슬랙, 페이스북, 링크드인 같은 서비스가 링크 카드를 만들 때 이 태그를 읽습니다. 페이스북이 제안해 널리 쓰이지만 W3C의 HTML 표준은 아닙니다.
<meta property="og:title" content="페이지 제목" />
<meta property="og:type" content="article" />
<meta property="og:description" content="페이지 소개 한두 문장" />
<meta property="og:image" content="https://example.com/share.png" />
<meta property="og:url" content="https://example.com/page" />
이 글은 Open Graph 공식 규약 문서를 기준으로 작성했습니다.
검색용 메타 태그와 다른 역할
오픈그래프의 주된 역할은 공유 미리보기이고, 타이틀 태그와 메타 디스크립션은 검색결과에 주로 쓰입니다. 다만 경계가 완전히 닫힌 것은 아닙니다. Google은 제목 링크를 만들 때 og:title을 참고할 수 있다고 안내하고, 네이버도 제목과 설명, 이미지 후보로 오픈그래프 값을 사용할 수 있습니다. 검색엔진이 항상 이 값을 그대로 보여 주는 것은 아닙니다.
구글 검색 순위에 오픈그래프가 쓰인다는 공식 근거는 없습니다. 오픈그래프는 공유 카드의 제목과 이미지, 설명을 관리하는 태그입니다. 클릭 효과는 공유 환경과 문구에 따라 달라지므로 별도로 측정해야 합니다.
필수 네 속성과 설명 속성 관리
공식 규약의 필수 네 속성은 og:title, og:type, og:image, og:url입니다. og:description은 카드 설명을 위해 함께 쓰는 선택 속성입니다.
- og:image는 절대 경로의 공개 URL이어야 합니다. 로그인해야 보이는 이미지는 카드에 뜨지 않습니다
- 이미지는 가로형 큰 사이즈로 준비합니다. 서비스마다 자르는 비율이 달라, 핵심 요소를 가운데에 두면 안전합니다
- og:url은 공유할 대표 주소로 통일합니다. 다만 검색엔진의 대표 URL을 지정하는 캐노니컬 태그를 대신하지는 않습니다
- og:image:alt에는 이미지가 무엇을 보여 주는지 짧게 적습니다
- 페이지를 바꿨는데 옛 미리보기가 나오면 공유 서비스의 캐시 때문입니다. 각 플랫폼의 미리보기 갱신 도구로 새로고침할 수 있습니다
실제 공유 카드 예시와 확인 방법
블로그 글에 다음 값을 넣었다고 해보겠습니다.
og:title: 와이어 하네스 불량 검사 5단계og:description: 압착부터 전기 검사까지 현장에서 확인할 항목og:image: 글의 검사 장면을 담은 공개 이미지 URLog:url: 파라미터가 없는 대표 글 URL
카카오톡이나 LinkedIn에 URL을 공유하면 서비스가 이 값을 읽어 카드로 만들 수 있습니다. 다만 플랫폼마다 글자 수와 이미지 자르기, 캐시 정책이 달라 같은 모양을 보장할 수는 없습니다.
- 페이지 소스에서 필수 네 속성과 og:description이 올바르게 출력되는지 확인합니다
og:imageURL을 새 창에서 열어 로그인 없이 200 응답으로 보이는지 확인합니다- Facebook Sharing Debugger와 LinkedIn Post Inspector처럼 플랫폼이 제공하는 검사 도구에 URL을 입력합니다
- 카카오 디벨로퍼스의 URL 디버거와 실제 카카오톡 공유 화면에서 제목과 이미지를 확인합니다
- 변경 뒤 옛 카카오 카드가 남으면 OG 캐시 초기화 기능을 사용합니다. Slack처럼 공개 초기화 도구가 없는 채널은 실제 공유 화면을 확인하고 캐시 갱신을 기다립니다
오픈그래프는 링크를 공유할 때 만드는 카드 정보입니다. AI 답변의 출처 제목과 이미지, 인용 여부를 정하는 공통 메타데이터는 아닙니다. ChatGPT나 Claude가 링크 카드를 보여 주는 화면에서는 오픈그래프를 쓸 수 있지만, 카드가 잘 나온다는 사실과 답변 출처로 선택되는 것은 구분해야 합니다.
자주 묻는 질문
오픈그래프가 없으면 어떻게 되나요?
서비스가 HTML 제목과 메타 설명, 다른 카드 태그에서 값을 가져오거나 미리보기를 만들지 않을 수 있습니다. 공유 결과를 직접 확인하려면 오픈그래프 값을 명시하는 편이 좋습니다.
트위터 카드 태그도 따로 넣어야 하나요?
X(트위터)는 자체 카드 태그를 우선 읽지만, 없으면 오픈그래프를 참고합니다. 오픈그래프를 기본으로 두고, X 노출이 중요한 사이트만 전용 태그를 추가하면 됩니다.
페이지마다 다르게 넣어야 하나요?
네, 검색 태그처럼 페이지 단위로 그 페이지의 내용을 담는 것이 기본입니다. 모든 페이지에 같은 대표 이미지 하나만 걸려 있으면 어떤 글을 공유해도 같은 카드가 나와 클릭 이유가 약해집니다.