Open Graph 검사기
Open Graph 태그는 페이지 링크가 Facebook, X, LinkedIn, Slack 또는 채팅 앱에 붙여넣어질 때 그 페이지가 어떻게 보일지를 결정하는 메타 태그입니다. URL을 입력하면 이 검사기는 페이지를 한 번만 가져와 각 플랫폼이 실제로 사용할 태그와 대체값을 정확히 보여 주고, 네 개의 공유 카드를 렌더링하며, 공유 이미지의 실제 크기를 확인합니다. 동반 가이드인 게시하기 전에 공유 카드 확인하기는 발견한 문제를 고치는 과정을 안내합니다. 더 넓은 정기 점검이 필요하면 대신 웹사이트 상태 검사를 실행하세요.
마지막 업데이트:
계속 감시하고 싶으신가요? myeventwatch로 무료 감시하기 — 만료 및 중단 알림, 카드 불필요.
검사 방식
검사기는 입력한 URL에 대해 보호된 서버 가져오기를 한 번만 수행하고, 리디렉션을 따라가며, 최종 페이지의 정적 HTML — 플랫폼 스크레이퍼가 보는 것과 같은 HTML — 을 읽습니다. og: 태그와 twitter: 메타 태그, 페이지의 <title>과 메타 설명을 파싱한 뒤, 플랫폼별로 각 공유 카드가 실제로 표시할 값과 그 값의 출처를 계산합니다. 대체값으로 제공된 값에는 대체값 라벨이 붙으므로, 완전해 보이는 카드 아래에 누락된 태그가 숨겨지지 않습니다.
나머지 모든 것을 결정하는 제한이 하나 있습니다. 이것은 일반 HTTP 가져오기이지 브라우저가 아니며, 플랫폼 스크레이퍼 역시 브라우저가 아닙니다 — 둘 다 JavaScript를 실행하지 않습니다. 스크립트로 삽입되거나, 클라이언트 측에서 렌더링되거나, 로그인한 뒤에만 추가되는 태그는 여기에서도 보이지 않고 Facebook, X, LinkedIn, Slack에서도 정확히 같은 방식으로 보이지 않습니다. 태그가 JavaScript 번들 안에만 존재한다면, 공유에서는 존재하지 않는 것입니다. 결과에 보이는 것 — 최종 URL, HTTP 상태, 원시 태그 표, 렌더링된 네 개의 카드 — 이 스크레이퍼가 다뤄야 하는 정적 진실입니다.
대체값, 상대 이미지 함정, 스크레이퍼 캐시
플랫폼마다 대체 방식이 다르기 때문에 같은 페이지가 한 앱에서는 올바르게 보이고 다른 앱에서는 깨져 보일 수 있습니다. Facebook은 og: 태그를 직접 읽습니다. X는 먼저 자체 twitter: 태그를 읽고, 없을 경우 대응하는 og: 태그로 대체합니다. LinkedIn은 og: 태그만 읽으므로 완벽한 Twitter Card 설정도 거기에서는 도움이 되지 않습니다. Slack은 먼저 og: 태그를 읽고 그다음 twitter: 태그를 읽습니다. 아래 체크리스트는 누락된 모든 필드, 빈 모든 필드, 플랫폼이 대체값으로 채울 모든 필드를 표시하고, 대체할 출처의 이름도 함께 적습니다.
가장 흔한 조용한 실패는 상대 경로 og:image입니다. /images/share.jpg 같은 값은 템플릿과 브라우저에서는 멀쩡해 보이지만, 대부분의 스크레이퍼는 그것을 어떤 기준으로도 해석할 수 없으므로 카드에는 그냥 이미지가 표시되지 않습니다. 수정은 항상 스킴을 포함한 절대 URL입니다. 두 번째 함정은 캐시입니다. 모든 플랫폼은 스크레이퍼가 가져온 내용을 캐시하므로, 태그를 고쳐도 이미 나가 있는 게시물은 업데이트되지 않으며, 플랫폼에 URL 재스크랩을 요청하기 전까지는 새 미리보기조차 오래된 카드를 계속 제공할 수 있습니다. 먼저 태그를 고치고, 여기서 검증한 뒤, 재스크랩하세요 — 이 순서가 아니면 깨진 버전을 다시 캐시하게 됩니다.
정직한 한계: 여기의 미리보기는 각 플랫폼의 문서화된 동작을 시뮬레이션한 것이지 실제 게시물의 스크린샷이 아닙니다. 플랫폼마다 자르기, 모서리 둥글리기, 줄이기가 다르고, 카드 레이아웃은 예고 없이 바뀌며, 로그인 여부에 따라 다르게 취급할 수도 있으므로, 카드를 충실한 모델로 취급하되 보장으로 여기지는 마세요. 시뮬레이션이 아닌 것이 하나 있습니다. 공유 이미지의 크기는 페이지가 선언한 og:image:width 및 og:image:height 값이 아니라 실제 이미지 파일의 헤더에서 읽습니다 — 선언된 값은 주장일 뿐이며, 이 검사기는 파일 자체와 대조해 검증합니다.
검사 대상과 그 뒤의 규칙
| 검사 대상 태그 | og:title, og:description, og:image, og:url, og:type, og:site_name에 더해 twitter:card, twitter:title, twitter:description, twitter:image — 그리고 대체 출처로서 페이지의 <title>과 메타 설명. |
| 권장 이미지 크기 — 1200 × 630 px | 1200 × 630은 공식 표준이 아니라 플랫폼 지침입니다. Facebook이 권장하는 크기이며, X, LinkedIn, Slack이 가장 잘 처리하는 큰 카드 크기입니다. 더 작은 이미지도 표시되지만, 카드가 잘라내거나 작은 썸네일로 대체할 수 있습니다. |
| og: 태그 — og:title, og:description, og:image — 를 직접 읽으며, og: 태그가 없을 때만 페이지의 <title>과 메타 설명으로 대체합니다. | |
| X (Twitter) | 먼저 twitter:title, twitter:description, twitter:image를 읽습니다. 각각 없을 경우 대응하는 og: 태그로 대체합니다. twitter:card가 카드 레이아웃을 결정하며, 없으면 X는 찾은 내용으로 추측합니다. |
| LinkedIn과 Slack | LinkedIn은 og: 태그만 읽습니다 — twitter: 태그는 거기에서 도움이 되지 않습니다. Slack은 먼저 og: 태그를 읽고 그다음 twitter: 태그를 읽으므로 네 플랫폼 중 가장 관대합니다. |
| 상대 이미지 URL | og:image와 twitter:image는 스킴을 포함한 절대 URL이어야 합니다. 대부분의 스크레이퍼는 상대 경로를 해석할 수 없으며, 결과는 이미지가 없고 어디에도 오류가 없는 카드입니다. |
| 이미지 크기 | 실제 이미지 파일 — 그 PNG, JPEG, GIF 또는 WebP 헤더 — 에서 바이트 크기 및 형식과 함께 읽습니다. 선언된 og:image:width와 og:image:height는 비교용으로 표시되지만 그 자체만으로는 절대 신뢰하지 않습니다. |
| 크기를 알 수 없음 | 검사기가 이미지 파일을 가져오거나 파싱할 수 없었다는 뜻입니다 — 시간 초과, 요청 거부, 또는 헤더를 읽을 수 없는 형식인 경우입니다. 그 경우 페이지가 선언한 크기(있는 경우)가 스크레이퍼를 포함해 모두가 가진 유일한 정보가 됩니다. |
자주 묻는 질문
공유한 링크에 이미지가 표시되지 않는 이유는 무엇인가요?
흔한 원인을 순서대로 들면, og:image가 아예 없는 경우, og:image가 스크레이퍼가 해석할 수 없는 상대 URL인 경우, 이미지가 너무 작거나 스크레이퍼가 가져올 수 없는 곳에 있는 경우(로그인 뒤, robots 규칙으로 차단됨, 오류 응답), 또는 플랫폼이 이미지가 존재하기 전의 캐시된 스크랩을 계속 표시하는 경우입니다. 위의 검사를 실행하세요 — 어떤 경우에 해당하는지 알려 줍니다 — 태그를 고친 뒤 플랫폼에 재스크랩을 요청하세요.
Open Graph 태그와 Twitter 태그, 둘 다 필요한가요?
실무에서는 그렇습니다. Facebook과 LinkedIn은 og: 태그만 읽는 반면, X는 자체 twitter: 태그를 선호하고 og: 태그를 대체값으로 사용합니다. 완전한 og: 세트에 twitter:card 태그를 더하면 대부분의 경우를 커버하지만, 명시적인 twitter:title, twitter:description, twitter:image만이 X 카드를 Facebook 카드와 다르게 만드는 유일한 방법입니다 — 그리고 Slack은 두 세트를 모두 읽되 og:를 먼저 읽습니다.
실제 게시물이 이 미리보기와 다르게 보이는 이유는 무엇인가요?
거의 항상 캐시 때문입니다. 각 플랫폼의 스크레이퍼는 URL에 대해 가져온 내용을 캐시하며, 태그를 편집해도 그 캐시는 무효화되지 않습니다. 수정 전에 작성된 게시물은 오래된 카드를 유지하고, 플랫폼 자체 디버거조차 재스크랩이 강제되기 전까지는 캐시된 버전을 계속 표시할 수 있습니다. 더 드물게는 자르기 때문입니다. 플랫폼은 현재 레이아웃에 맞춰 자르고 줄이며, 이 미리보기는 문서화된 동작의 시뮬레이션이지 스크린샷이 아닙니다.
이 검사기는 JavaScript를 실행하나요?
아니요 — 의도적인 설계입니다. 검사기는 플랫폼 스크레이퍼가 하는 것과 정확히 같은 방식으로 정적 HTML을 한 번만 가져오며, 스크레이퍼 역시 JavaScript를 실행하지 않습니다. 따라서 스크립트나 클라이언트 측 프레임워크가 추가한 태그가 여기서 누락되는 이유는 Facebook, X, LinkedIn, Slack에서 누락되는 이유와 같습니다. 태그가 JavaScript로 렌더링된다면, 공유에서 인정받으려면 서버에서 렌더링된 HTML 안에 있어야 합니다.
og:image는 어떤 크기여야 하나요?
가능하면 1200 × 630 px을 사용하세요. 이것은 공식 표준이 아니라 플랫폼 지침입니다 — Facebook이 권장하는 것이며, X, LinkedIn, Slack의 큰 카드가 기준으로 삼는 크기입니다. 파일은 적당히 작게 유지하고, PNG 또는 JPEG를 사용하며(WebP 지원은 스크레이퍼마다 다릅니다), 항상 절대 URL로 참조하세요. 이 검사기는 1200 × 630보다 작은 이미지에 플래그를 표시하고, 파일에서 측정한 실제 크기를 알려 줍니다.