오픈 그래프 검사기: OG 태그와 링크 미리보기 테스트

URL을 입력하면 페이스북, X, 링크드인, 메신저 앱에서 공유될 때 어떻게 보일지 확인할 수 있습니다. 검사기는 모든 og:*와 twitter:* 태그를 읽고 미리보기 이미지를 측정해 무엇을 고쳐야 하는지 정확히 알려 드립니다.

링크 미리보기 (근사치입니다. 각 플랫폼이 자체 레이아웃, 자르기, 캐시를 적용합니다)

검사 결과

미리보기 이미지

발견된 태그

항목	값

오픈 그래프 태그를 검사하는 방법

공유하려는 페이지의 URL을 입력하고 태그 검사를 누릅니다. 리다이렉트는 따라가며, 분석 대상은 최종 URL입니다.
미리보기를 봅니다. 페이스북, X, 링크드인, 메신저 앱이 읽는 태그로 만든, 링크 카드 레이아웃의 근사치입니다.
검사 결과를 하나씩 확인합니다. 오류는 미리보기를 망가뜨리고, 경고는 일부 플랫폼에서 미리보기를 나쁘게 하며, 참고는 권장 사항입니다. 각 항목에 무엇을 바꿔야 하는지 나옵니다.
고치고 다시 검사합니다. 추천 태그 상자에는 현재 값이 채워진, 바로 고칠 수 있는 태그 블록이 나옵니다.
수정을 배포한 뒤에는 플랫폼의 캐시를 새로 고치세요(아래 참고). 그렇지 않으면 이미 공유된 글에는 예전 미리보기가 남습니다.

스테이징 사이트, 로그인 뒤의 페이지, localhost의 페이지는 HTML 붙여넣기로 전환하세요. 페이지 소스를 붙여넣으면 같은 검사가 브라우저 안에서 실행됩니다.

모든 페이지에 필요한 오픈 그래프 태그

오픈 그래프는 대부분의 링크 미리보기 뒤에 있는 규약입니다. 모든 페이지에 네 가지 속성을 필수로 정하고(ogp.me), 링크드인은 공유 미리보기에 제목, 이미지, 설명, URL이 있어야 한다고 안내합니다(LinkedIn 도움말, 영문).

태그	역할	팁
`og:title`	카드의 제목입니다. 필수.	검색이 아니라 피드를 위해 쓰세요. 브랜드 이름은 꼭 넣지 않아도 됩니다.
`og:type`	객체의 종류로, 예를 들면 `website`나 `article`입니다. 필수.	글에는 `article`을 쓰세요. `article:*` 태그를 쓸 수 있게 됩니다.
`og:image`	미리보기 이미지입니다. 필수.	전체 `https://` URL을 쓰고 너비, 높이, 대체 텍스트도 지정하세요.
`og:url`	객체의 정식 URL로, 영구 ID로 쓰입니다. 필수.	`<link rel="canonical">`과 일치시키세요.
`og:description`	제목 아래의 한두 문장입니다. 규약에서는 선택이지만 링크드인에서는 필수입니다.	페이지가 무엇인지가 아니라 독자가 무엇을 얻는지 쓰세요.
`og:site_name`	사이트 전체의 이름입니다.	많은 메신저 앱에서 제목 위에 표시됩니다.
`og:image:alt`	이미지 설명입니다. 규약은 `og:image`를 지정한 페이지라면 이것도 지정해야 한다고 합니다.	페이지가 아니라 이미지를 설명하세요.
`og:image:width` / `og:image:height`	이미지 크기(픽셀)입니다.	페이스북은 링크가 처음 공유될 때 이미지가 제대로 불러와지도록 지정하라고 안내합니다.
`og:locale`	콘텐츠의 언어와 지역으로, 예를 들면 `ko_KR`입니다.	페이스북은 `og:type`과 함께 쓰기를 권장합니다.

같은 태그가 두 번 나오면 첫 번째가 우선합니다. 값이 충돌할 때 규약은 위에서 아래로 첫 번째 태그를 우선하도록 정합니다. 중복은 보통 테마와 SEO 플러그인이 둘 다 태그를 쓰면서 생기며, 검사기가 이를 표시합니다.

트위터(X) 카드 태그

X의 카드 마크업 참조 문서(X 개발자 문서, 보관본(영문))에 따르면 X는 자체 twitter:* 태그를 읽고 대부분은 오픈 그래프로 대체합니다.

twitter:card: 카드 유형으로, summary(작은 정사각형 이미지) 또는 summary_large_image(넓은 이미지)입니다. 없어도 og:type, og:title, og:description이 있으면 요약 카드가 표시될 수 있습니다.
twitter:title: 최대 70자이며 og:title로 대체됩니다.
twitter:description: 최대 200자이며 og:description으로 대체됩니다.
twitter:image: 5MB 미만, JPG, PNG, WEBP, GIF(첫 프레임만)이며 SVG는 지원하지 않습니다. og:image로 대체됩니다.
twitter:image:alt: 최대 420자이며 og:image:alt로 대체됩니다.

실제로는 오픈 그래프에 한 줄, <meta name="twitter:card" content="summary_large_image">만 더하면 X까지 해결됩니다.

og:image 크기: 플랫폼별 요구 사항

플랫폼	문서화된 요구 사항
링크드인	최소 1200 × 627px, 권장 비율 1.91:1, 최대 파일 크기 5MB (LinkedIn 도움말, 영문)
페이스북	고해상도 기기에서 가장 잘 보이도록 너비 1080px 이상, `og:image:width`와 `og:image:height` 지정 (Meta 공유 모범 사례, 영문)
X: 큰 이미지 카드	2:1 비율, 최소 300 × 157, 최대 4096 × 4096px, 5MB 미만 (X 문서, 보관본(영문))
X: 요약 카드	1:1 비율, 최소 144 × 144, 최대 4096 × 4096px, 5MB 미만, 정사각형으로 잘림 (X 문서, 보관본(영문))

이미지 하나로 모두 충족할 수 있습니다. 1200 × 630픽셀, PNG 또는 JPEG, 5MB 미만입니다. 링크드인의 최소 크기와 페이스북의 너비 권장을 넘고, 비율이 대략 1.91:1이며, X는 2:1 큰 카드에 맞춰 약간 자릅니다. 글자와 로고는 잘림에 걸리지 않도록 가장자리에서 떨어뜨리세요. X는 또한 범용 사이트 로고 대신 페이지마다 고유한 이미지를 쓰라고 하는데, 어느 플랫폼에서나 합리적인 규칙입니다.

링크 미리보기가 잘못 나오는 이유와 해결법

예전 이미지나 제목이 계속 나옵니다

플랫폼은 미리보기를 캐시합니다. 페이스북은 이미지를 URL 기준으로 캐시하고 URL이 바뀌지 않으면 갱신하지 않으므로(Meta for Developers, 영문), 바꾼 이미지를 새 파일 이름으로 올리고 공유 디버거에 페이지를 넣어 새로 수집하게 하세요. 링크드인에서는 Post Inspector로 URL을 새로 고치세요(영문).

이미지가 아예 없습니다

위의 미리보기 이미지 표를 확인하세요. 흔한 원인은 og:image가 상대 경로인 경우, 이미지가 크롤러에게 403이나 404를 돌려주는 경우(핫링크 방지, 보호된 디렉터리, CDN 규칙), SVG인 경우, 5MB를 넘는 경우입니다. 링크드인은 요건을 갖춘 이미지도 사이트가 링크드인의 가져오기를 막으면 실패할 수 있다고 설명합니다.

브라우저에는 태그가 있는데 여기에는 없습니다

태그가 페이지를 불러온 뒤 자바스크립트로 추가되는 것일 수 있습니다. 크롤러는 서버가 보내는 HTML을 읽으므로 태그를 서버 렌더링이나 미리 빌드한 HTML로 옮기세요. 싱글 페이지 앱은 공유 미리보기를 위해 보통 서버 사이드 렌더링이나 프리렌더링이 필요합니다.

엉뚱한 페이지가 미리보기로 나옵니다

URL이 리다이렉트되면 크롤러는 최종 페이지를 미리보기로 만듭니다. 검사기는 리다이렉트 횟수를 보여 주고, 리다이렉트 검사기는 모든 단계를 나열합니다. 또한 og:url이 홈페이지가 아니라 그 페이지 자신을 가리키는지 확인하세요. 템플릿에서 흔한 실수입니다.

오픈 그래프 태그와 SEO 메타 태그

<title>, 메타 설명, canonical 링크는 검색 엔진용이고 오픈 그래프와 트위터 태그는 공유용입니다. 둘은 달라도 됩니다. 공유용 제목이 검색용 제목보다 더 강렬해도 되지만, canonical URL과 og:url은 일치해야 하고, 페이지를 홍보하기 전에 noindex 로봇 지시문이 있는지도 알아 두면 좋습니다. 검사기는 X-Robots-Tag HTTP 헤더를 포함해 이 모두를 보고합니다.

검사기가 URL로 하는 일

우리 서버는 페이지를 한 번 요청하고, 최대 여덟 번의 리다이렉트를 따라가며, 처음 600KB까지만 읽고(<head>가 끝나면 멈춥니다), 최대 두 개의 미리보기 이미지의 앞부분을 내려받아 크기와 형식을 읽습니다. 표준 포트의 공개 http(s) 주소만 가져오며, 리다이렉트가 사설, 로컬, 클라우드 메타데이터 IP를 가리킬 때를 포함해 이를 거부합니다. 아무것도 저장하지 않습니다. 이후 미리보기 카드는 이미지를 브라우저에서 직접 불러옵니다. 캠페인 링크를 공유한다면 UTM 빌더로 만들고, 다른 사람의 링크를 공유한다면 먼저 URL 정리기로 추적 코드를 지우세요.

자주 묻는 질문

오픈 그래프 검사기는 무엇을 하나요?

링크 미리보기 크롤러가 하듯이 페이지를 가져와 HTML head의 오픈 그래프(og:*)와 트위터 카드(twitter:*) 태그를 읽고, 공유된 링크가 어떻게 보일지 보여 줍니다. 이 도구는 미리보기 이미지도 내려받아 형식, 픽셀 크기, 파일 크기를 확인하고, 빠졌거나 잘못된 태그를 해결 방법과 함께 모두 나열합니다.

어떤 오픈 그래프 태그가 필수인가요?

오픈 그래프 규약은 og:title, og:type, og:image, og:url의 네 가지를 필수 속성으로 정합니다. 링크드인은 미리보기를 위해 og:title, og:image, og:description, og:url이 있어야 한다고 안내하므로, 실무에서는 다섯 가지를 모두 설정하고 이미지용 og:image:alt도 추가하세요.

og:image는 어느 크기여야 하나요?

공식적으로 하나의 크기가 정해져 있지는 않습니다. 링크드인은 1.91:1 비율로 최소 1200 × 627픽셀, 5MB 이하를 요구합니다. 페이스북은 너비 1080픽셀 이상을 권장합니다. X의 큰 이미지 카드는 2:1 비율에 최소 300 × 157, 5MB 제한입니다. 5MB 이하의 1200 × 630 PNG나 JPEG이면 모두 충족합니다.

페이스북이나 링크드인에 왜 예전 미리보기가 계속 나오나요?

플랫폼은 링크 미리보기를 캐시합니다. 페이스북은 이미지를 URL 기준으로 캐시하고 URL이 바뀌기 전에는 갱신하지 않으므로, 이미지를 새 파일 이름으로 올린 뒤 페이스북 공유 디버거에 페이지를 넣어 새로 수집하게 하세요. 링크드인은 Post Inspector가 같은 역할을 합니다.

오픈 그래프 태그가 있으면 트위터 카드 태그도 필요한가요?

X는 대부분의 필드에서 오픈 그래프로 대체합니다. twitter:title은 og:title로, twitter:description은 og:description으로, twitter:image는 og:image로 대체됩니다. twitter:card가 없어도 X가 og:type, og:title, og:description으로 작은 요약 카드를 보여 줄 수 있습니다. 큰 이미지 레이아웃을 원하면 twitter:card를 summary_large_image 값으로 추가하세요.

검사기가 자바스크립트를 실행하나요?

아니요. 서버가 돌려주는 HTML을 읽으며, 대부분의 링크 미리보기 크롤러도 그렇게 읽습니다. 태그가 클라이언트 자바스크립트가 실행된 뒤에야 나타난다면 여기서도, 아마 실제 공유에서도 빠져 보일 것입니다. 서버나 빌드 시점에 렌더링하세요.

스테이징이나 localhost 페이지도 검사할 수 있나요?

URL로는 안 됩니다. 안전을 위해 검사기는 공개 주소만 가져오고 사설, 로컬, 클라우드 메타데이터 IP는 차단합니다. 대신 HTML 붙여넣기 탭을 쓰세요. 페이지 소스를 붙여넣으면 전부 브라우저 안에서 분석되며 이미지 크기도 로컬에서 측정합니다.

미리보기가 각 플랫폼에 표시될 모습과 똑같은가요?

아니요. 각 플랫폼이 문서화한 태그로 만든 근사치입니다. 모든 네트워크는 자체 레이아웃, 자르기, 줄임, 캐시를 적용하고 이를 수시로 바꿉니다. 미리보기로 빠진 이미지와 잘못된 제목을 잡은 뒤, 큰 출시 전에는 플랫폼 자체 디버거로 확인하세요.

← 무료 도구