11월 8, 2026 가이드 읽는 시간 2분

Open Graph 태그 확인 및 링크 미리보기 하는 법 (단계별 가이드)

누군가 여러분의 링크를 Facebook, X, LinkedIn, WhatsApp, Slack에 올릴 때마다 플랫폼은 숨겨진 몇 개의 메타 태그를 읽어 소셜 카드로 만듭니다: 이미지, 제목, 설명, 도메인. 그 태그가 없거나 잘못 만들어져 있으면 플랫폼이 즉흥적으로 채워 넣고, 즉흥적으로 만들어진 카드는 거의 항상 직접 고른 카드보다 나쁩니다. 그래서 게시 전에 open graph preview 점검을 돌리는 것이 기술 SEO에서 가장 효과가 큰 5분짜리 작업 중 하나입니다. 이 가이드에서는 OG 태그를 확인하는 방법, 실제 플랫폼이 렌더링할 두 개의 미리보기 카드를 읽는 방법, 그리고 점검에서 발견되는 모든 흔한 문제를 고치는 방법을 배웁니다.

Open Graph 태그란?

Open Graph는 Facebook이 2010년에 도입한 메타데이터 표준으로, 지금은 사실상 모든 소셜 플랫폼, 메신저 앱, 나아가 AI 답변 엔진까지 채택하고 있습니다. 태그는 HTML의 <head> 섹션 안에 살며, 페이지가 다른 곳에서 공유될 때 어떻게 표현되어야 하는지 기술합니다. 핵심 세트는 다음과 같습니다:

<head>
  <meta property="og:title" content="Best Running Shoes 2026 — Lab-Tested">
  <meta property="og:description" content="We tested 42 pairs over 600 miles. Here are the 9 best models.">
  <meta property="og:image" content="https://example.com/images/running-shoes.png">
  <meta property="og:url" content="https://example.com/best-running-shoes/">
  <meta property="og:type" content="article">
  <meta property="og:site_name" content="Acme Sports">
</head>

이와 함께 대부분의 사이트는 Twitter Card 태그(twitter:card, twitter:title, twitter:description, twitter:image)도 추가합니다. X는 Open Graph 태그로 자동 폴백할 수 있지만, twitter:card 태그는 X에게 큰 히어로 이미지 카드와 간결한 요약 카드 중 무엇을 렌더링할지 알려 주는 것이므로 명시적인 주의가 필요합니다. 이 태그들을 직접 손으로 쓰는 방법에 대한 전체 배경——바로 옆에 놓이는 SEO title, 메타 설명, canonical URL을 포함해——이 필요하다면 웹사이트에 메타 태그 추가하는 법 가이드를 읽어 보세요.

Open Graph 미리보기가 중요한 이유

소셜 카드는 사실상 페이지의 광고이며, 클릭할지 말지 결정하기 전에 스크롤하는 사람이 보는 거의 유일한 것입니다. 적절한 큰 이미지, 읽기 쉬운 헤드라인, 한 줄짜리 약속을 갖춘 페이지는 맨 URL을 렌더링하거나 더 나쁘게는 레이아웃에서 잘라낸 엉뚱한 이미지를 보여 주는 페이지보다 꾸준히 더 많은 클릭을 얻습니다. 게시 전에 OG 태그를 확인하면 세 가지를 동시에 지킵니다: 소셜·채팅 공유의 클릭률, 플랫폼 전반의 브랜드 일관성, 그리고 같은 메타데이터를 재사용하는 서비스의 크롤링 가능성입니다.

가장 흔한 실패는 가장 조용한 실패이기도 합니다. og:image가 없으면 텍스트만 있는 카드가 나와 경쟁자 옆에서는 깨져 보입니다. /images/hero.png 같은 상대 이미지 URL은 브라우저에서는 잘 작동하지만 전체 절대 URL이 필요한 소셜 플랫폼에서는 실패합니다. 95자의 og:title은 문장 중간에 잘립니다. 스테이징 도메인의 canonical은 모든 공유가 잘못된 호스트를 가리키게 합니다. 이런 오류 중 어느 것도 CMS 어디에서도 경고를 던지지 않습니다. 잡을 수 있는 유일하게 신뢰할 만한 방법은 라이브 URL로 open graph preview를 돌려 실제로 렌더링되는 것을 보는 것입니다.

OG 태그 확인하기: 단계별 가이드

1단계: Open Graph Preview 도구 열기

무료 Open Graph Preview & Checker로 이동하세요. 이 도구는 소셜 크롤러와 정확히 같은 방식으로 페이지를 가져옵니다. 공개 서버에서, 로그인 세션에 접근할 수 없이 말입니다. 그러므로 도구가 보는 것이 Facebook과 X가 보는 것입니다. 가입이나 설치가 필요 없습니다.

2단계: URL 붙여넣고 점검 실행

https://를 포함한 전체 페이지 주소를 입력 필드에 붙여넣고 Check & preview를 누르세요. 도구는 서버 사이드로 페이지를 요청하고 HTML을 파싱해 og:title, og:description, og:image, og:url, og:type, og:site_name, 4개의 Twitter Card 태그, 일반 <title> 태그, canonical 링크를 추출합니다. 여러 페이지를 감사한다면 중요한 랜딩 페이지마다 반복하세요. OG 태그는 사이트 단위가 아니라 페이지 단위로 설정됩니다.

3단계: 두 개의 미리보기 카드 읽기

도구는 나란히 두 개의 미리보기를 렌더링합니다. Facebook 카드는 큰 이미지, 작은 회색 대문자 도메인, 제목, 설명을 보여 주며 피드에서 링크가 보이는 모습을 재현합니다. X 카드는 twitter:card 값을 따릅니다. summary_large_image는 큰 16:9 히어로 카드를, summary는 작은 정사각형 썸네일이 붙은 간결한 카드를 렌더링합니다. 페이지에 Twitter 태그가 전혀 없으면 도구는 카드에 OG fallback 배지를 붙이고 Open Graph 값을 대신 사용하는데, 이는 X 자신이 하는 것과 정확히 같아서 미리보기가 진실을 유지합니다.

4단계: 빨간색·노란색 항목 모두 고치기

미리보기 아래의 체크리스트는 태그당 한 행을 줍니다. 녹색은 존재하고 길이 제한 안에 있다는 뜻입니다. 노란색은 존재하지만 위험하다는 뜻입니다. 예를 들어 60자를 넘는 og:title이나 110자를 넘는 og:description——소셜 카드에서 시각적으로 잘리는 경우—— 또는 누락된 twitter:card입니다. 빨간색은 누락이며, og:image 누락은 이미지 없는 카드가 클릭 매력의 대부분을 잃기 때문에 고위험으로 취급됩니다. 무엇이 빠졌는지 알았다면 메타 태그 생성기로 1분 안에 고친 태그 블록을 만들어 <head>에 붙여넣고, open graph preview를 다시 돌려 모두 렌더링되는지 확인하세요.

Open Graph 모범 사례

권장 이미지 크기를 사용하세요. og:image의 널리 통용되는 표준은 JPG, PNG 또는 WebP의 1200×630 픽셀(1.91:1 비율)이며, 대략 8 MB 이하로 유지하고 절대 https:// URL을 사용합니다. X의 큰 이미지 카드는 약 1200×675(16:9)를 쓰므로 1200×630 이미지도 두 플랫폼에서 모두 잘 작동합니다. 플랫폼마다 자르는 방식이 조금씩 다르므로 중요한 콘텐츠는 바깥 가장자리에서 멀리 두세요.

표시 길이 제한을 지키세요. og:title은 약 60자 이하, og:description은 약 110자 이하로 유지하면 어느 것도 문장 중간에 잘리지 않습니다. 이것은 엄격한 스펙 한도가 아니라 표시 가이드라인이지만, 주요 카드가 실제로 보여 주는 것과 일치합니다.

항상 절대 URL이자 canonical URL을 사용하세요. og:image와 og:url은 둘 다 프로덕션 도메인의 완전한 URL이어야 하고, 이상적으로는 canonical 태그와 일치해야 합니다. 그래야 플랫폼이 추적 파라미터를 붙이거나 스테이징 호스트를 인덱싱하지 않습니다.

중요한 페이지마다 자신만의 태그를 주세요. 아티클, 제품 페이지, 핵심 랜딩 페이지는 각각 고유한 제목, 설명, 이미지를 가져야 합니다. 사이트 전체의 폴백 이미지 하나가 유틸리티 페이지용으로는 괜찮지만, 공유가 클릭을 얻게 만드는 것은 고유한 이미지입니다.

게시 전만 아니라 게시 후에도 다시 확인하세요. 플랫폼은 공격적으로 캐시합니다. 이미 공유된 적 있는 페이지의 태그를 고쳤다면 플랫폼 자체의 디버거(Facebook Sharing Debugger나 X의 카드 도구)로 재수집(re-scrape)을 강제한 뒤, 마지막으로 미리보기를 한 번 돌려 라이브 카드가 갱신되었는지 확인하세요.

OG 태그 확인에 관한 자주 묻는 질문

페이지의 OG 태그는 어떻게 확인하나요?

가장 빠른 방법은 페이지 URL을 Open Graph Preview & Checker 같은 무료 open graph preview 도구에 붙여넣는 것입니다. 도구는 라이브 페이지를 서버 사이드로 가져와 모든 Open Graph와 Twitter Card 태그를 추출하고, Facebook과 X 카드를 나란히 렌더링하며, 각 태그를 녹색·노란색·빨간색으로 표시해 무엇을 고쳐야 할지 정확히 알려 줍니다. 대안은 페이지 소스를 열어 “og:”를 손으로 검색하는 것인데, 동작은 하지만 렌더링된 카드나 길이 문제는 보여 주지 않습니다.

open graph 이미지가 표시되지 않는 이유는?

거의 모든 사례는 네 가지 원인으로 설명됩니다. og:image 태그가 아예 없는 경우, 이미지 URL이 절대 https URL이 아니라 상대 경로인 경우, 이미지 파일이 너무 작거나(플랫폼은 보통 최소 200×200 픽셀을 요구합니다) 지원되지 않는 형식인 경우, 또는 플랫폼이 페이지의 캐시된 옛 버전을 서빙 중인 경우로, 이때는 Facebook Sharing Debugger로 재수집을 강제해야 합니다. open graph preview 도구는 이미지 URL이 일단 해석되는지조차 즉시 보여 줍니다.

og:title과 og:description은 얼마나 길어야 하나요?

og:title은 최대 약 60자, og:description은 약 110자를 목표로 하세요. 이 지점에서 Facebook과 X 카드가 보통 텍스트를 시각적으로 잘라 냅니다. 이 길이를 넘는다고 하드 에러가 나지는 않습니다. Open Graph 프로토콜 자체는 더 허용합니다. 하지만 한도를 넘은 부분은 단순히 사용자에게 보이지 않으므로 중요한 단어를 앞세우세요.

OG 태그가 이미 있는데도 Twitter Card 태그가 필요한가요?

없어도 버틸 수는 있습니다. X는 Open Graph 태그로 자동 폴백하기 때문입니다. 그러나 명시적인 twitter:card 태그가 없으면 큰 이미지 카드와 간결한 summary 카드 중 선택할 수 없고, 예외적인 경우의 렌더링도 덜 예측 가능해집니다. 네 가지 기본 Twitter 태그 추가는 생성기로 1분이면 끝나며 추측을 없애 줍니다.

OG 태그는 얼마나 자주 다시 확인해야 하나요?

새 페이지는 라이브가 되기 전에 확인하고, 템플릿에 손대는 일이 있으면 핵심 랜딩 페이지를 다시 확인하세요. 테마 업데이트, 플러그인 업그레이드, 헤드리스 CMS 이전, 도메인 변경이 그 대상입니다. 많은 깨진 소셜 카드가 메타 블록을 조용히 지워 버린 리디자인에서 비롯됩니다. 가장 많이 공유되는 10개 페이지를 분기마다 감사하는 것이 합리적인 루틴입니다.

게시 전에 미리보기하세요

Open Graph 태그는 작고 보이지 않지만 비례를 초월한 힘을 지녔습니다. 여러분의 오디언스가 실제로 링크를 공유하는 곳에서 페이지가 만드는 첫인상을 결정하기 때문입니다. 중요한 페이지마다 open graph preview를 돌리고, 빨간 항목을 고치고, 노란 항목을 다듬고, 이미지는 1200×630으로 표준화하는 단련된 습관은 사이트의 다른 것을 하나도 건드리지 않고 소셜 클릭률을 끌어올립니다. 오늘 홈페이지와 가장 좋은 글부터 시작하세요. 지금 OG 태그를 확인하고, 발견한 빈틈은 메타 태그 생성기로 채우면 됩니다.