오픈 그래프 태그: 소셜 미디어 미리보기 완벽 가이드
· 12분 읽기
목차
Facebook, LinkedIn, Twitter 또는 메시징 앱에서 링크를 공유할 때 나타나는 미리보기 카드는 페이지 HTML의 오픈 그래프(OG) 태그에서 생성됩니다. 이러한 태그를 올바르게 설정하면 매력적이고 클릭을 유도하는 미리보기와 깨지거나 일반적인 모양의 링크 사이의 차이를 만들 수 있습니다.
이 종합 가이드는 오픈 그래프 태그, 트위터 카드 및 소셜 미디어 미리보기 최적화에 대해 알아야 할 모든 것을 다룹니다. 처음으로 OG 태그를 구현하는 개발자이든 소셜 참여를 개선하려는 마케터이든, 전반에 걸쳐 실행 가능한 인사이트와 실용적인 예제를 찾을 수 있습니다.
오픈 그래프란 무엇인가?
오픈 그래프는 원래 2010년 Facebook에서 만든 프로토콜로, 웹 페이지가 소셜 그래프에서 풍부한 객체가 될 수 있도록 합니다. HTML에 OG 메타 태그를 추가하면 소셜 미디어 플랫폼에서 콘텐츠가 공유될 때 표시되는 방식을 정확하게 제어할 수 있습니다.
오픈 그래프 태그가 없으면 플랫폼은 페이지 콘텐츠를 자동으로 스크랩하려고 시도하며, 종종 품질이 낮거나 잘못된 미리보기를 생성합니다. 결과는? 깨진 이미지, 누락된 제목 또는 혼잡한 소셜 피드에서 주목을 끌지 못하는 일반적인 설명입니다.
이 프로토콜은 HTML의 <head> 섹션에서 og: 접두사가 붙은 property 속성을 가진 메타 태그를 사용합니다. 이러한 태그는 소셜 플랫폼이 안정적으로 파싱하고 표시할 수 있는 구조화된 데이터를 제공합니다.
오픈 그래프를 지원하는 플랫폼
오픈 그래프는 소셜 미디어 미리보기의 사실상 표준이 되었습니다. 프로토콜을 지원하는 주요 플랫폼은 다음과 같습니다:
- Facebook – 원래 제작자이자 주요 구현자
- LinkedIn – 전문 콘텐츠 공유에 OG 태그 사용
- Pinterest – 핀 미리보기에 OG 이미지 사용
- WhatsApp – 채팅 대화에서 풍부한 미리보기 표시
- Telegram – OG 데이터로 미리보기 카드 표시
- Slack – 오픈 그래프 정보를 사용하여 링크 펼치기
- Discord – OG 태그에서 임베드 카드 생성
- iMessage – iOS 기기에서 링크 미리보기 생성
프로 팁: 게시하기 전에 오픈 그래프 검사기를 사용하여 다양한 플랫폼에서 태그가 어떻게 표시되는지 즉시 확인하세요.
오픈 그래프 태그 작동 방식
누군가 소셜 플랫폼에서 귀하의 URL을 공유하면 플랫폼의 크롤러(종종 "봇" 또는 "스크래퍼"라고 함)가 페이지를 방문하여 HTML <head> 섹션에서 오픈 그래프 메타 태그를 찾습니다. 이러한 태그는 콘텐츠에 대한 구조화된 정보를 제공합니다.
크롤러는 이 데이터를 추출하여 "리치 스니펫" 또는 "링크 미리보기"라고도 하는 미리보기 카드를 생성하는 데 사용합니다. 이 카드에는 일반적으로 제목, 설명, 이미지 및 URL이 포함됩니다.
크롤링 프로세스
링크를 공유할 때 백그라운드에서 일어나는 일은 다음과 같습니다:
- URL 제출 – 사용자가 소셜 플랫폼에 URL을 붙여넣거나 공유
- 크롤러 발송 – 플랫폼이 페이지를 가져오기 위해 봇 전송
- HTML 파싱 – 봇이 페이지의 HTML을 읽고 OG 태그 추출
- 캐시 저장 – 플랫폼이 추출된 데이터를 캐시(일반적으로 24-48시간)
- 미리보기 생성 – 캐시된 데이터를 사용하여 미리보기 카드 렌더링
- 표시 – 사용자의 피드 또는 메시지에 미리보기 표시
이 프로세스를 이해하는 것은 OG 태그 변경 사항이 즉시 나타나지 않는 이유를 설명하기 때문에 중요합니다. 대부분의 플랫폼은 서버 부하를 줄이기 위해 미리보기 데이터를 적극적으로 캐시합니다.
빠른 팁: OG 태그를 업데이트한 후 플랫폼별 디버깅 도구를 사용하여 캐시 새로 고침을 강제하세요. 디버깅 섹션에서 이러한 도구를 다룰 것입니다.
필수 오픈 그래프 태그
네 개의 OG 태그는 적절하게 정의된 오픈 그래프 객체에 필수로 간주됩니다. 이러한 태그가 없는 페이지도 여전히 미리보기를 생성할 수 있지만 결과는 예측할 수 없고 종종 품질이 낮습니다.
필요한 최소 구현은 다음과 같습니다:
<meta property="og:title" content="Your Page Title">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">og:title
소셜 미디어 미리보기에 표시되어야 하는 콘텐츠의 제목입니다. 사용자가 가장 먼저 보는 것이기 때문에 가장 중요한 태그라고 할 수 있습니다.
모범 사례:
- 대부분의 플랫폼에서 잘림을 방지하기 위해 60자 미만으로 유지
- 매력적이고 설명적으로 작성 – 이것이 헤드라인입니다
- 사이트 이름을 포함하지 마세요(
og:site_name사용) - 가시성을 높이기 위해 중요한 키워드를 앞에 배치
- 40자로 잘렸을 때 어떻게 보이는지 테스트(모바일 보기)
예시:
<meta property="og:title" content="10 Proven Strategies to Double Your Email Open Rates">og:type
페이지가 나타내는 콘텐츠 유형입니다. 이는 플랫폼이 콘텐츠의 특성을 이해하는 데 도움이 되며 표시되거나 분류되는 방식에 영향을 줄 수 있습니다.
일반적인 값:
website– 일반 웹사이트 및 랜딩 페이지article– 블로그 게시물, 뉴스 기사 및 편집 콘텐츠video.movie– 영화 페이지 및 영화 콘텐츠video.episode– TV 쇼 에피소드music.song– 개별 노래music.album– 음악 앨범profile– 개인 또는 비즈니스 프로필book– 도서 페이지 및 문학
대부분의 웹사이트와 블로그 게시물의 경우 website 또는 article을 사용합니다. article 유형은 article:published_time 및 article:author와 같은 추가 태그를 활성화합니다.
예시:
<meta property="og:type" content="article">og:image
미리보기 카드에 표시되어야 하는 이미지의 URL입니다. 이는 참여에 중요합니다 – 이미지가 있는 게시물은 텍스트만 있는 미리보기보다 훨씬 더 많은 클릭과 공유를 받습니다.
요구사항:
- 절대 URL이어야 함(상대 경로 아님)
- HTTPS를 통해 제공되어야 함
- 공개적으로 액세스 가능해야 함(인증 불필요)
- 권장 최소 크기: 1200×630 픽셀
- 종횡비: 1.91:1(가로)이 플랫폼 전반에서 가장 잘 작동
예시:
<meta property="og:image" content="https://example.com/images/social-preview.jpg">이미지 사양 및 최적화에 대해서는 아래 전용 섹션에서 더 자세히 다룰 것입니다.
og:url
페이지의 표준 URL입니다. 이는 이 콘텐츠와 연결하려는 영구적이고 선호하는 URL이어야 합니다.
모범 사례:
- 표준 URL 사용(추적 매개변수 제외)
- 프로토콜 포함(https://)
- 표준 링크 태그가 있는 경우 일치시키기
- 일관성을 위해 소문자 사용
- 세션 ID 또는 임시 매개변수 포함하지 않기
예시:
<meta property="og:url" content="https://example.com/ko/blog/email-marketing-guide">프로 팁: og:url 값은 표준 URL과 일치해야 합니다. 이는 소셜 신호를 통합하고 중복 콘텐츠 문제를 방지하는 데 도움이 됩니다. 메타 태그 생성기를 사용하여 모든 메타 태그의 일관성을 보장하세요.
선택적 오픈 그래프 태그
네 개의 필수 태그 외에도 오픈 그래프는 추가 컨텍스트를 제공하고 소셜 플랫폼에서 콘텐츠가 표시되는 방식을 개선하는 수많은 선택적 태그를 지원합니다.
og:description
콘텐츠에 대한 간략한 설명입니다. 대부분의 미리보기 카드에서 제목 아래에 표시됩니다.
모범 사례:
- 최적의 표시를 위해 150-160자 사이로 유지
- 매력적이고 실행 가능하게 작성
- 관련 키워드를 자연스럽게 포함
- 제목을 중복하지 않기
- 적절한 경우 행동 유도 문구로 끝내기
예시:
<meta property="og:description" content="Learn proven email marketing strategies that top marketers use to achieve 40%+ open rates. Includes templates and real examples.">og:site_name
웹사이트 또는 브랜드의 이름입니다. 페이지 제목과 별도로 표시되며 브랜드 인지도에 도움이 됩니다.
예시:
<meta property="og:site_name" content="SEO-IO">og:locale
콘텐츠의 언어 및 지역 형식입니다. 지정하지 않으면 기본값은 en_US입니다.
예시:
<meta property="og:locale" content="en_GB">
<meta property="og:locale:alternate" content="fr_FR">
<meta property="og:locale:alternate" content="es_ES">기사 관련 태그
og:type 값으로 article을 사용할 때 추가 메타데이터를 포함할 수 있습니다:
<meta property="article:published_time" content="2026-03-31T09:00:00Z">
<meta property="article:modified_time" content="2026-03-31T14:30:00Z">
<meta property="article:author" content="https://example.com/author/john-doe">
<meta property="article:section" content="Email Marketing">
<meta property="article:tag" content="email">
<meta property="article:tag" content="marketing">
<meta property="article:tag" content="conversion">이러한 태그는 플랫폼이 콘텐츠의 컨텍스트를 이해하는 데 도움이 되며 분류되거나 표시되는 방식에 영향을 줄 수 있습니다.
이미지 향상 태그
OG 이미지에 대한 추가 정보를 제공합니다:
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Infographic showing email open rate statistics">
<meta property="og:image:type" content="image/jpeg">너비와 높이를 포함하면 플랫폼이 먼저 이미지를 다운로드하지 않고도 미리보기를 더 빠르게 렌더링할 수 있습니다. 대체 텍스트는 접근성을 개선하고 대체 컨텍스트를 제공합니다.
트위터 카드와 X 플랫폼
트위터(현재 X)는 오픈 그래프가 널리 보급되기 전에 트위터 카드라는 자체 메타 태그 시스템을 개발했습니다. 트위터 카드는 다른 태그 이름을 사용하지만 오픈 그래프 태그와 동일한 목적을 제공합니다.
좋은 소식: 트위터 카드 태그가 없으면 트위터는 오픈 그래프 태그로 대체합니다. 그러나 트위터 전용 태그를 사용하면 플랫폼에서 콘텐츠가 표시되는 방식을 더 잘 제어할 수 있습니다.
트위터 카드 유형
트위터는 여러 카드 유형을 지원하지만 주로 다음 두 가지를 사용합니다:
| 카드 유형 | 사용 사례 | 이미지 크기 |
|---|---|---|
summary |
작은 정사각형 이미지가 있는 기본 카드 | 1:1 종횡비(예: 400×400) |
summary_large_image |
큰 이미지 카드(대부분의 콘텐츠에 권장) | 2:1 종횡비(예: 1200×600) |
app |
모바일 앱 프로모션 | 다양함 |
player |
비디오 또는 오디오 콘텐츠 | 다양함 |
대부분의 웹사이트와 블로그 게시물의 경우 summary_large_image를 사용하세요.