오픈 그래프 미리보기
EXAMPLE WEBSITE
페이지 제목 예시
이것은 소셜 미디어에 공유될 때 나타나는 페이지 콘텐츠에 대한 예시 설명입니다.
https://example.com/page
페이지 제목 예시
이것은 소셜 미디어에 공유될 때 나타나는 페이지 콘텐츠에 대한 예시 설명입니다.
example.com
websiteOpen Graph Previewer 사용 방법
- 1
페이지 URL 입력
확인하려는 페이지의 전체 URL을 website URL 입력란에 붙여넣으세요.
- 2
OG 데이터 가져오기
"Fetch OG Data"를 클릭해 페이지의 기존 Open Graph 제목, 설명, 이미지, 사이트 이름을 가져오세요.
- 3
필요하면 수동 편집
Edit Manually로 전환해 제목, 설명, 이미지 URL, 유형 등 항목을 조정하고 미리보기가 갱신되는 것을 확인하세요.
- 4
미리보고 태그 복사
Facebook과 Twitter 카드 미리보기를 검토한 뒤, 생성된 메타 태그를 복사해 페이지에 추가하세요.
Open Graph와 링크 미리보기에 관한 결정판 가이드
Open Graph 프로토콜이란
Open Graph 프로토콜은 원래 Facebook이 도입한 작은 메타 태그 모음으로, 어떤 웹 페이지든 공유될 때 자기 자신을 풍부한 객체로 설명할 수 있게 해 줍니다. Open Graph 태그가 있는 페이지는 맨 파란 링크 대신 헤드라인과 요약, 큰 이미지가 담긴 카드로 바뀝니다. 이 태그들은 페이지의 head에 자리 잡으며, og 접두사가 붙은 property 속성(예: og:title, og:image)에 값을 담는 content 속성을 짝지어 사용합니다. 이 표준이 널리 채택되었기 때문에, 이제 같은 og 태그가 Facebook을 훨씬 넘어선 여러 곳에서 미리보기를 만들어 냅니다.
Open Graph는 오로지 소셜과 메시징 환경에서의 표현에 관한 것입니다. 검색 순위에는 직접적인 영향이 없지만, 클릭과 공유에는 큰 영향을 줍니다. 매력적인 카드는 클릭되고 다시 공유되는 반면, 밋밋하거나 깨진 카드는 그냥 지나쳐지기 때문입니다.
핵심 Open Graph 태그
다섯 개의 속성이 대부분의 일을 합니다. og:title은 카드의 헤드라인으로 HTML title 태그와 다를 수 있어, 공유에 최적화된 문구를 쓸 수 있게 해 줍니다. og:description은 그 아래에 받쳐 주는 줄입니다. og:image는 썸네일이며 단연 가장 큰 시각적 비중을 차지합니다. og:url은 카드가 가리켜야 할 표준 URL로, 같은 콘텐츠가 여러 URL로 접근 가능하더라도 공유를 하나의 주소로 모아 줍니다. og:type은 객체를 설명하며, 일반 페이지에는 흔히 website를, 블로그 글이나 뉴스 기사에는 article을 씁니다.
추가 속성들은 결과를 더 다듬어 줍니다. og:site_name은 출처를 표시하고, og:locale은 언어를 선언하며, 이미지의 경우 og:image:width와 og:image:height는 이미지가 다 내려받아지기 전에 플랫폼이 카드를 배치하도록 돕습니다. 이들을 채워 넣으면 더 안정적이고 빠르게 렌더링되는 미리보기가 만들어집니다.
Twitter Card와 X가 태그를 읽는 방식
X는 자체적인 twitter card 태그를 사용하지만 너그럽습니다. Twitter 전용 태그가 없으면 Open Graph 태그로 대체합니다. 핵심 태그는 twitter:card로, summary_large_image는 대부분의 브랜드가 원하는 큰 이미지 레이아웃을 만들고, summary는 텍스트 옆에 더 작은 썸네일을 보여 줍니다. X에서 다른 문구를 쓰고 싶을 때는 twitter:title, twitter:description, twitter:image, twitter:site를 설정해 X에 한해 Open Graph 값을 덮어쓸 수도 있습니다.
실제로 좋은 전략은 폭넓은 커버리지를 위해 Open Graph 태그를 완전하게 설정하고, 큰 이미지 레이아웃을 선택하기 위해 twitter:card만 추가한 뒤 나머지는 X가 Open Graph에서 물려받게 하는 것입니다. 이렇게 하면 거의 동일한 두 벌의 태그를 유지하지 않으면서도 X에서 더 풍부한 카드를 얻을 수 있습니다.
카드의 성패를 가르는 이미지 요건
og:image는 대부분의 미리보기가 성공하거나 실패하는 지점입니다. 널리 권장되는 크기는 1200 x 630 픽셀로, 대략 1.91 대 1 비율이며, Facebook과 LinkedIn, X에서 잘리지 않고 큰 이미지 카드를 깔끔하게 채웁니다. https로 시작하는 절대적이고 공개적으로 접근 가능한 URL을 사용하세요. /images/card.png 같은 상대 경로는 썸네일이 아예 나오지 않는 단연 첫 번째 원인인데, 스크래퍼가 이를 풀어낼 기준 URL이 없기 때문입니다. 파일은 수백 킬로바이트 이하로 유지하고, 플랫폼마다 자르는 방식이 조금씩 다르므로 가장자리 가까이에 중요한 텍스트를 두지 마세요.
각 플랫폼은 자체적인 최소·최대 크기도 강제합니다. 너무 작은 이미지는 작은 썸네일로 대체되거나 아예 이미지가 나오지 않고, 지나치게 큰 파일은 건너뛸 수 있습니다. 어디서나 일관되게 렌더링하려면 HTTPS로 제공되는 하나의 1200 x 630 JPEG나 PNG를 고수하는 것이 가장 안전한 선택입니다.
Facebook, LinkedIn, Discord, Slack이 미리보기를 렌더링하는 방법
이들 플랫폼 어디에든 링크가 붙여넣어지면, 플랫폼은 카드를 렌더링하기 전에 자체 스크래퍼 봇을 보내 페이지를 가져와 head를 읽습니다. Facebook은 facebookexternalhit를 사용하고, Slack과 Discord는 각자의 봇을 두며, 각각 og 태그를 파싱해 미리보기를 만듭니다. 이는 미리보기가 스크래퍼가 서버 측에서 본 것을 반영함을 뜻하는데, 이는 로그인한 사용자가 보는 것과 다를 수 있습니다. 특히 로그인을 요구하거나 메타 태그를 로드 후 JavaScript로 렌더링하는 페이지에서 그렇습니다.
렌더링이 봇 측에서 일어나기 때문에 두 가지가 중요합니다. 첫째, og 태그는 스크래퍼가 실행하지 않을 수도 있는 클라이언트 측 스크립트로 나중에 주입되는 것이 아니라, 서버가 반환하는 초기 HTML에 들어 있어야 합니다. 둘째, 페이지는 인증 없이 봇이 접근할 수 있어야 합니다. 그렇지 않으면 스크래퍼는 콘텐츠 대신 로그인 벽을 만나고 미리보기는 비어 돌아옵니다.
캐시, 디버거, 그리고 다시 긁기 강제하기
소셜 플랫폼은 긁어 온 미리보기를 공격적으로 캐시하며, 때로는 며칠씩 유지합니다. 이것이 갱신한 Open Graph 태그가 나타나지 않는다는 고전적인 불평의 원인입니다. 플랫폼이 변경 이전의 캐시된 버전을 여전히 제공하고 있는 것입니다. 해결책은 플랫폼 자체의 디버깅 도구를 사용해 새로 긁기를 강제하는 것입니다. Facebook의 Sharing Debugger, LinkedIn의 Post Inspector, X의 카드 검증기는 모두 페이지를 다시 가져와 어떤 태그를 파싱했는지 정확히 보여 주며, 이는 카드가 왜 잘못 보이는지 진단하는 방법도 됩니다.
이미 공유된 URL에서 제목이나 설명, 이미지를 바꿀 때마다 다시 긁기를 게시 절차의 일부로 삼으세요. 그렇게 하지 않으면 초기 공유가 오래되거나 깨진 카드를 고정해 버려, 페이지 자체가 올바르게 바뀐 뒤에도 오래도록 남을 수 있습니다. 이 미리보기 도구를 쓰면 게시 전에 태그를 확인할 수 있어 나중에 바로잡을 일이 줄어듭니다.
가장 흔한 Open Graph 실수
되풀이되는 실패는 예측 가능합니다. og:image가 없어 카드에 썸네일이 없는 경우, 스크래퍼가 풀어낼 수 없는 상대 이미지 URL, 그 밖에는 HTTPS인 페이지에서 HTTP로 제공되는 og:image(일부 플랫폼은 이를 거부합니다), 그리고 스크래퍼가 결코 실행하지 않는 JavaScript로 주입된 태그가 그것입니다. 또 다른 빈번한 실수는 og:url을 표준이 아니거나 스테이징 URL로 가리켜 두는 것인데, 이는 공유 수를 쪼개고 사용자를 엉뚱한 곳으로 보낼 수 있습니다.
더 미묘한 실수는 Open Graph와 검색 스니펫이 별개임을 잊는 것입니다. og:title과 og:description은 소셜 카드를 제어하고, HTML title 태그와 메타 설명은 Google 결과를 제어하며, 둘이 똑같을 필요는 없습니다. 각각을 그 맥락에 맞게 최적화하세요. 소셜 카드에는 강렬하고 호기심을 자극하게, 검색 스니펫에는 명확하고 키워드를 의식하여 쓰세요.
자주 묻는 질문
Open Graph 태그란 무엇이고 왜 중요한가요?
Facebook과 Twitter 미리보기는 어떻게 작동하나요?
기존 페이지 없이 태그를 생성할 수 있나요?
왜 URL 가져오기가 실패하거나 데이터를 반환하지 않을 수 있나요?
이 도구는 무료이고, 입력한 URL은 어떻게 처리되나요?
관련 도구
이런 편리한 도구도 함께 사용해 보세요