오픈그래프는 웹페이지의 제목과 이미지, 설명 등을 HTML 메타태그로 제공하는 규약입니다. 카카오톡과 Slack, Facebook, LinkedIn 등이 링크 공유 카드를 만들 때 참고합니다. Facebook에서 시작한 규약이며, 페이지의 <head> 안에 og:로 시작하는 속성을 적습니다.
<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" />
검색 메타데이터와 공유 카드의 차이
타이틀 태그와 메타 디스크립션은 검색 제목과 설명의 재료가 됩니다. 오픈그래프는 주로 링크 공유 카드를 관리합니다.
검색엔진도 오픈그래프를 참고합니다. Google은 검색결과의 제목을 만들 때 og:title을 활용할 수 있으며, 네이버도 제목과 설명, 대표 이미지 후보로 오픈그래프 값을 사용합니다. 검색엔진이 본문 등 다른 정보도 고려하므로 태그에 적은 값과 실제 검색결과가 다를 수 있습니다.
필수 속성과 이미지 설정
공식 규약의 필수 속성은 og:title, og:type, og:image, og:url입니다. og:description은 설명을 제공하는 선택 속성입니다.
og:image에는 로그인 없이 접근할 수 있는 이미지의 절대 URL을 적습니다.- 서비스의 권장 규격에 맞는 이미지를 준비합니다. 카드가 이미지를 잘라 표시할 수 있으므로 제목이나 제품 등 핵심 부분이 남는지 실제 미리보기에서 확인합니다.
og:url에는 공유할 대표 주소를 일관되게 적습니다. 이 값이 검색용 캐노니컬 태그를 대신하지는 않습니다.og:image:alt에는 이미지를 보지 못해도 내용을 이해할 수 있도록 설명을 적습니다. 공식 규약은og:image를 지정할 때 이 속성도 제공하도록 권합니다.
공유 카드 점검 예시
“와이어 하네스 불량 검사 5단계”라는 글이라면 og:title에는 글 제목을, og:description에는 “압착부터 전기 검사까지 현장에서 확인할 항목”을 적을 수 있습니다. og:image에는 검사 장면의 공개 이미지 URL을, og:url에는 그 글의 대표 URL을 지정합니다. 문서를 식별하는 데 필요한 매개변수까지 지우면 다른 페이지를 가리킬 수 있습니다.
카카오톡과 LinkedIn이 같은 값을 읽어도 글자 수와 이미지 비율, 캐시 정책에 따라 카드 모습은 다를 수 있습니다.
- 페이지 소스에서 필수 네 속성과 설명을 확인합니다. CMS나 플러그인이 다른 값을 중복 출력하지 않는지도 살펴봅니다.
- 이미지 URL을 열어 로그인 없이 접근할 수 있는지, 정상 응답인 HTTP 200을 반환하는지 검사합니다. 서비스의 스크랩 서버가 방화벽에 막혀 있다면 접근 설정도 확인합니다.
- Facebook Sharing Debugger와 LinkedIn Post Inspector에서 공유 URL을 검사합니다.
- 카카오톡 등 실제 공유할 서비스에서 제목, 설명과 이미지가 의도대로 보이는지 확인합니다.
- 수정한 값이 카드에 반영되지 않았다면 페이지 소스에 변경 사항이 먼저 반영됐는지 확인합니다. 카카오는 개발자 도구의 OG 캐시 메뉴에서 웹페이지나 이미지 URL의 캐시를 삭제할 수 있습니다. 다른 서비스는 해당 서비스의 갱신 안내를 따릅니다.
자주 묻는 질문
오픈그래프가 없으면 어떻게 되나요?
서비스가 HTML 제목이나 메타 설명, 다른 카드 태그로 미리보기를 만들 수도 있고 아예 표시하지 않을 수도 있습니다. 이때 본문 중 엉뚱한 이미지가 선택되는 등 의도와 다른 카드가 나올 수 있으므로, 공유할 정보를 메타태그에 명시하는 편이 좋습니다.
같은 오픈그래프 속성이 여러 번 나오면 어떻게 되나요?
공식 규약은 같은 속성에 여러 값이 있으면 먼저 나온 태그를 우선하도록 정합니다. 테마와 SEO 플러그인이 서로 다른 제목이나 이미지를 출력한다면 한쪽에서 관리하도록 설정을 정리해야 합니다. 여러 이미지를 의도적으로 제공하는 경우에도 순서를 확인합니다.
페이지마다 다르게 넣어야 하나요?
각 페이지의 내용에 맞는 제목과 설명, 이미지를 지정하는 것이 좋습니다. 모든 글에 홈페이지 소개를 그대로 넣으면 공유 카드만 보고는 어떤 글인지 알기 어렵습니다.
함께 알아두면 좋은 용어
- 메타 디스크립션: HTML에 적는 페이지 요약으로, 검색결과의 설명문을 구성할 때 참고하는 정보
- 타이틀 태그: HTML에 지정한 페이지 제목으로, 브라우저 탭에 표시되며 검색결과 제목의 재료가 되는 값
- 캐노니컬 태그: 대표 URL을 알리는 태그
- 트위터 카드: X의 링크 미리보기 전용 태그