Open Graph, 줄여서 OG는 웹페이지를 공유 카드로 표현하기 위한 메타데이터 규약입니다. 플랫폼이 링크를 수집할 때 이 값을 읽어 카드 제목, 설명, 대표 이미지를 구성할 수 있습니다.
검색용 제목·설명과 무엇이 다른가요?
<title>과 meta description은 검색결과 제목·스니펫의 주요 후보입니다. og:title과 og:description은 링크 공유 미리보기를 위해 사용합니다. 같은 문장을 재사용할 수도 있지만, 공유 카드에서는 브랜드와 클릭 맥락에 맞게 더 짧고 선명하게 다듬을 수 있습니다.
검색 메타데이터가 검색 결과 진열대의 상품표라면, Open Graph는 누군가 링크를 선물로 보낼 때 붙는 포장 카드입니다.
먼저 챙길 핵심 속성
<meta property="og:title" content="Meta Checker로 배포 전 SEO 점검하기">
<meta property="og:description" content="현재 DOM과 최초 HTML을 비교하는 실전 가이드">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/guide">
<meta property="og:image" content="https://example.com/images/guide-cover.jpg">| 속성 | 역할 | 검사 포인트 |
|---|---|---|
og:title | 공유 카드 제목 | 페이지 주제와 일치하고 너무 장황하지 않은가 |
og:description | 공유 카드 요약 | 링크를 열 이유가 구체적인가 |
og:type | article, website 등 객체 유형 | 페이지 성격과 맞는가 |
og:url | 공유 대상의 대표 URL | canonical과 같은 대표 주소인가 |
og:image | 대표 이미지 절대 URL | 공개 접근 가능하고 페이지를 잘 대표하는가 |
Meta Checker에서 확인하기
- 1
og:title이 실제 페이지 제목과 같은 주제를 말하는지 확인합니다. - 2
og:description이 비어 있거나 오래된 문구가 아닌지 확인합니다. - 3
og:image가 절대 URL이며 실제로 열리는 이미지인지 확인합니다.
콘텐츠 탭을 열고 Open Graph를 펼칩니다
제목 구조 아래에 있으므로 필요하면 제목 섹션을 접어 한눈에 봅니다.
N/A와 상태 칩을 봅니다
핵심 값이 없거나 현재 DOM에서만 New로 추가된다면 서버가 보내는 HTML에도 포함할 수 있는지 확인합니다.
검색 메타데이터·canonical과 비교합니다
og:url과 canonical이 서로 다른 페이지를 가리키지 않는지, 제목·설명의 주제가 어긋나지 않는지 봅니다.
og:image URL을 직접 엽니다
로그인 없이 열리는지, 오류가 없는지, 너무 작은 로고나 관계없는 이미지가 아닌지 확인합니다.
개선하고 실제 공유까지 재검사하기
- 페이지 유형별 OG 기본 템플릿을 만듭니다.
- 글·상품처럼 독립적으로 공유되는 페이지는 각 콘텐츠의 제목, 설명, 대표 이미지를 사용합니다.
og:url을 canonical 대표 URL과 맞춥니다.- 이미지는 중요한 글자와 피사체가 가장자리에서 잘리지 않도록 안전 여백을 둡니다.
- 배포 후 Meta Checker에서 최초 HTML 포함 여부를 확인합니다.
- 사용하는 메신저나 플랫폼의 공유 디버거로 실제 카드와 캐시를 확인합니다.
플랫폼 캐시를 기억하세요.OG를 고쳐도 이전 카드가 잠시 보일 수 있습니다. Meta Checker에서 값이 바뀌었다면 플랫폼별 디버거의 다시 수집 기능을 사용하세요.
완료 체크리스트
- og:title, og:description, og:url, og:image가 있다.
- og:url과 canonical이 같은 대표 주소를 가리킨다.
- 대표 이미지가 공개 URL에서 정상적으로 열린다.
- 공유 카드 문구가 현재 페이지 내용과 일치한다.
- 실제 메신저 또는 플랫폼 디버거로 확인했다.