오픈 그래프 태그란? 링크 미리보기 및 소셜 공유 가이드

Facebook, LinkedIn, Slack 또는 Twitter에서 링크를 공유하면 보통 미리보기 카드가 나타나는데, 여기에는 제목, 설명 및 이미지가 포함됩니다. 이러한 미리보기는 마법이 아닙니다. 페이지의 HTML에 있는 오픈 그래프(OG) 태그로 제어됩니다.

오픈 그래프 태그를 올바르게 설정하면 공유된 링크가 전문적으로 보이고 더 많은 클릭을 받습니다. 잘못 설정하면 보기 흉한 미리보기, 누락된 이미지 또는 일반적인 대체 텍스트가 표시됩니다.

오픈 그래프 프로토콜이란?

오픈 그래프는 Facebook이 2010년에 만든 프로토콜로, 웹 페이지가 소셜 플랫폼에서 어떻게 표시되는지 정의할 수 있게 해줍니다. HTML <head> 섹션의 메타 태그를 사용합니다:

<meta property="og:title" content="페이지 제목" />
<meta property="og:description" content="페이지에 대한 짧은 요약" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />

소셜 플랫폼이 공유된 URL을 감지하면 페이지를 가져와 이러한 태그를 읽어 미리보기 카드를 생성합니다.

필수 오픈 그래프 태그

og:title

미리보기 카드에 표시되는 제목입니다. 플랫폼 전체에서 최적의 표시를 위해 60자 이하로 유지하세요.

<meta property="og:title" content="브랜드된 짧은 링크를 만드는 방법" />

팁:

<title> 태그를 단순히 복제하지 마세요 — 소셜 참여를 위해 최적화하세요
중요한 단어를 앞에 배치하세요
클릭베이트를 피하세요 (플랫폼이 이를 페널티할 수 있음)

og:description

제목 아래에 표시되는 간단한 요약입니다. 120-160자를 목표로 하세요.

<meta property="og:description" content="클릭 추적 및 분석이 포함된 맞춤형 브랜드 짧은 링크를 만드세요. 5분 안에 설정하세요." />

og:image

미리보기에 표시되는 이미지입니다. 이것은 가장 영향력 있는 태그입니다 — 이미지가 있는 게시물은 훨씬 더 많은 참여를 받습니다.

<meta property="og:image" content="https://example.com/social-preview.jpg" />

플랫폼별 이미지 요구사항:

플랫폼	권장 크기	종횡비
Facebook	1200 × 630 px	1.91:1
Twitter	1200 × 628 px	1.91:1
LinkedIn	1200 × 627 px	1.91:1
Slack	최소 500 × 500 px	모든 크기

모든 플랫폼을 다루기 위해 1200 × 630 픽셀을 사용하세요.

og:url

페이지의 정규 URL입니다. 이것은 플랫폼이 표시할 URL을 알려주고 중복 콘텐츠를 방지하는 데 도움이 됩니다.

<meta property="og:url" content="https://example.com/page" />

og:type

콘텐츠의 유형을 설명합니다. 일반적인 값:

website — 홈페이지 및 일반 페이지용
article — 블로그 게시물 및 기사용
product — 제품 페이지용

Twitter 카드 태그

Twitter는 미리보기 카드를 위해 자체 메타 태그를 사용합니다 (오픈 그래프 외에):

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="제목" />
<meta name="twitter:description" content="설명" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Twitter 카드 태그가 없으면 Twitter는 오픈 그래프 태그로 대체합니다. 대부분의 사이트는 최대 제어를 위해 둘 다 설정합니다.

소셜 플랫폼이 오픈 그래프 데이터를 가져오는 방법

URL을 공유할 때:

1플랫폼의 크롤러가 URL을 방문합니다
2HTML <head>에서 OG 태그를 읽습니다
3미리보기 카드 데이터를 캐시합니다
4동일한 URL의 후속 공유는 캐시된 버전을 사용합니다

중요: OG 태그의 변경사항은 즉시 반영되지 않습니다. 플랫폼은 적극적으로 캐시하므로 수동으로 캐시를 지워야 할 수 있습니다 (아래 디버깅 참조).

Linkly로 링크 미리보기 맞춤화

제어할 수 없는 URL을 공유하거나 다양한 컨텍스트에서 다른 미리보기 카드를 원한다면 어떻게 할까요?

Linkly의 맞춤 소셜 미리보기 기능을 사용하면 단축된 모든 링크에 대해 오픈 그래프 데이터를 재정의할 수 있습니다:

맞춤 제목, 설명 및 이미지 설정
다양한 대상을 위한 다양한 미리보기
대상 페이지의 HTML을 편집할 필요가 없습니다
소유하지 않은 페이지를 포함한 모든 URL에 적합합니다

이것은 다음의 경우에 특히 유용합니다:

자신의 브랜딩으로 타사 콘텐츠 공유
A/B 테스트를 통해 다양한 미리보기 카드를 테스트하여 어느 것이 더 많은 클릭을 받는지 확인
대상 페이지의 OG 태그가 낮거나 누락된 경우

오픈 그래프 태그 디버깅

Facebook 공유 디버거

Facebook의 도구를 사용하면 캐시된 OG 데이터를 미리 보고 새로 고칠 수 있습니다:

1URL을 입력합니다
2디버그를 클릭합니다
3Facebook이 페이지에서 읽은 내용을 확인합니다
4다시 스크래핑을 클릭하여 캐시를 지웁니다

Twitter 카드 검증 도구

Twitter의 검증 도구는 카드가 어떻게 표시되는지 보여주고 문제를 강조합니다.

LinkedIn 게시물 검사자

LinkedIn의 도구는 링크 카드를 미리 보고 캐시된 데이터를 새로 고칩니다.

일반적인 팁

소스 확인: 페이지 소스를 보고 og:를 검색하여 태그가 있는지 확인합니다
절대 URL 사용: 이미지 URL은 절대적이어야 합니다 (상대 경로가 아닌 https://로 시작).
변경 후 테스트: OG 태그를 업데이트한 후 항상 플랫폼 캐시를 지웁니다
JavaScript 렌더링 확인: 일부 플랫폼은 JavaScript를 실행할 수 없으므로 OG 태그는 초기 HTML 응답에 있어야 합니다

일반적인 실수

1og:image 누락: 이미지가 없는 게시물은 2-3배 적은 클릭을 받습니다
2이미지가 너무 작음: 최소 1200 × 630 픽셀을 사용합니다
3잘못된 종횡비: 이미지가 어색하게 잘립니다
4오래된 캐시: OG 태그를 업데이트했지만 플랫폼 캐시를 지우는 것을 잊었습니다
5중복 태그: 동일한 유형의 여러 OG 태그로 인해 예측 불가능한 동작이 발생합니다
6HTTP 이미지: 이미지 URL에 HTTPS를 사용하세요 — 일부 플랫폼은 HTTP 이미지를 차단합니다
7상대 URL: 플랫폼 크롤러는 상대 경로를 확인할 수 없습니다

다양한 콘텐츠 유형별 오픈 그래프

블로그 게시물

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-04-02" />
<meta property="article:author" content="이름" />

제품

<meta property="og:type" content="product" />
<meta property="product:price:amount" content="29.99" />
<meta property="product:price:currency" content="USD" />

비디오

<meta property="og:type" content="video.other" />
<meta property="og:video" content="https://example.com/video.mp4" />

결론

오픈 그래프 태그는 HTML에 작은 추가 기능이지만, 콘텐츠가 소셜 웹 전체에서 어떻게 표시되는지에 큰 영향을 미칩니다. 올바른 제목, 설명 및 이미지로 올바르게 설정하면 링크가 공유될 때의 클릭률이 직접적으로 증가합니다.

HTML을 편집하지 않고 맞춤 링크 미리보기를 원하세요? Linkly 시작하기하고 단축된 모든 링크에 대해 소셜 미리보기 카드를 맞춤화하세요 — 자신의 제목, 설명 및 이미지를 설정하세요.