Open Graph 미리보기이란?

Open Graph Preview는 Facebook, Twitter, LinkedIn 등 소셜 플랫폼에서 URL이 공유될 때 어떻게 보이는지 정확히 보여줍니다. OG 메타 태그 값을 입력하면 게시 전에 소셜 공유 카드의 실시간 미리보기를 확인할 수 있습니다.

미리보기는 og:title, og:description, og:image, og:site_name, og:url 태그를 읽어 각 SNS가 실제로 사용하는 레이아웃을 그대로 재현합니다. Facebook은 제목을 약 88자에서 자르고, Twitter의 큰 이미지 카드는 2:1 비율이 필요하며, LinkedIn은 설명을 약 200자 이후 말줄임표로 자릅니다.

사용 방법

1. Open Graph 태그를 입력하세요: 제목, 설명, 이미지 URL, 사이트 이름, URL.
2. Google 검색, Facebook, Twitter, LinkedIn, WhatsApp, Slack, Discord, Pinterest 여덟 가지 카드 형식 미리보기를 실시간으로 나란히 확인하세요.
3. 제목 길이, 설명, 이미지 크기를 조정하여 모든 플랫폼에서 미리보기가 완벽하게 표시되도록 하세요.

사용 시기

• 블로그 글이나 마케팅 페이지를 SNS에 공유하기 전에 표시 상태를 확인할 때.
• 기존 사이트의 공유 미리보기가 이미지가 비어 있거나 깨져 보일 때 원인을 점검할 때.
• 새 OG 이미지 템플릿을 만들 때, 제목이 핵심 그래픽을 가리지 않는지 검증할 때.

결과

새 블로그 글을 LinkedIn에 공유하기 전에, OG 이미지가 어색하게 잘리지 않는지, 설명이 Twitter의 200자 카드 제한 내에서 잘 읽히는지 확인해 보세요.

자주 묻는 질문

Open Graph 이미지의 안전한 사이즈는?

1200x630 픽셀이 표준 안전값입니다. Facebook과 LinkedIn은 1.91:1로 렌더링하고, Twitter의 summary_large_image 카드도 동일한 비율을 씁니다. 파일은 5 MB 이하로, 형식은 JPEG 또는 PNG가 좋습니다.

메타 태그를 바꿨는데 Facebook 미리보기가 갱신되지 않는 이유는?

Facebook은 OG 데이터를 약 24시간 캐시합니다. URL을 Meta의 Sharing Debugger에 붙여 넣고 'Scrape Again' 버튼을 누르면 다시 가져옵니다. LinkedIn에는 같은 기능이 Post Inspector로 제공됩니다.

이미 og:* 태그가 있는데 twitter:* 태그도 필요한가요?

Twitter는 twitter:* 태그가 없을 때 og:title, og:description, og:image를 대신 읽어 가므로 일반적인 페이지는 og 태그만으로 충분합니다. Twitter 전용 제목이나 이미지를 따로 보여주고 싶을 때만 twitter:card와 twitter:image를 추가하세요.

Twitter의 summary와 summary_large_image 차이는?

summary는 텍스트 옆에 작은 정사각형 썸네일을 보여 주며 뉴스 기사처럼 글 위주 콘텐츠에 어울립니다. summary_large_image는 텍스트 위에 와이드 이미지를 크게 띄워 랜딩 페이지나 영상 같은 시각 중심 콘텐츠에 적합합니다.

움직이는 GIF를 og:image로 써도 되나요?

SNS는 GIF를 받아들이지만 첫 프레임만 표시합니다. 중요한 정보가 그 한 장에 보이도록 정적 PNG나 JPEG를 쓰거나, 움직임이 필요하면 짧은 MP4로 변환해 og:video로 연결하세요.

관련 도구