Open Graph 소셜 카드 미리보기

Open Graph 소셜 카드 미리보기란?

이 도구는 Open Graph(OG) 소셜 카드를 시각적으로 미리 보는 도구입니다. Open Graph와 트위터 카드 메타 태그는 누군가 링크를 공유할 때 어떤 제목·요약·이미지를 보여 줄지 플랫폼에 알려 주는데, 이 도구는 그 링크 카드를 재현해 공개 전에 확인할 수 있게 합니다. 마케터, 콘텐츠 작성자, 개발자가 블로그 글·랜딩 페이지·제품 페이지를 공개할 때 제목이 잘리지 않는지, 이미지가 프레임을 채우는지, 도메인이 올바르게 보이는지 확인하려고 사용합니다. 세그먼트 컨트롤로 플랫폼을 고르면 그 플랫폼 고유의 레이아웃이 나타납니다. X·Facebook·LinkedIn은 위쪽에 큰 배너 이미지, 그 아래에 제목과 설명을 둔 카드로 그려지고, Slack·Discord는 강조색 바·도메인·작은 썸네일이 있는 콤팩트한 카드로 보입니다. 도메인 줄은 페이지 URL에서 자동으로 도출됩니다. 입력한 값으로 카드를 모형화할 뿐, 실제 페이지를 크롤링하거나 기존 메타 태그를 읽지 않습니다.

Open Graph 소셜 카드 미리보기 사용법

1. 카드의 제목으로 표시할 페이지 제목을 입력합니다.
2. 설명(제목 아래에 표시되는 요약 줄)을 작성합니다.
3. 미리보기 이미지를 로드하려면 절대 경로 이미지 URL(1200×630 권장)을 붙여넣습니다.
4. 페이지 URL을 입력합니다 — 카드에 표시되는 도메인이 여기서 도출됩니다.
5. X·LinkedIn·Slack·Discord·Facebook을 전환하며 각 플랫폼의 레이아웃을 비교합니다.
6. 아무것도 잘리지 않고 카드가 보기 좋게 나올 때까지 제목과 설명을 조정합니다.

예시

자주 묻는 질문

어떤 플랫폼을 미리 볼 수 있나요?

다섯 가지입니다: X(Twitter)·LinkedIn·Slack·Discord·Facebook. X·Facebook·LinkedIn은 큰 이미지 배너 카드로 그려지고, Slack·Discord는 강조색 바와 작은 썸네일이 있는 콤팩트한 펼침 스타일을 씁니다. 플랫폼 전환으로 즉시 바꿔 볼 수 있습니다.

실제 페이지에서 Open Graph 태그를 읽어 오나요?

아니요. 페이지를 크롤링하거나 가져오지 않고, 기존 메타 태그를 분석하지도 않습니다. 입력한 제목·설명·이미지 URL·페이지 URL만으로 카드를 만들기 때문에, 공개된 페이지를 검증하는 도구가 아니라 '이렇게 보인다'를 시험하는 미리보기입니다.

미리보기 이미지는 어디서 오나요?

이미지는 입력한 이미지 URL에서 브라우저가 직접 로드합니다. 이미지 자체의 호스트에서 브라우저로 바로 오며, 우리 서버를 거치지 않습니다. 이미지가 보이지 않으면 URL이 절대 경로(https://로 시작)이고 공개적으로 접근 가능한지 확인하세요.

제목이나 설명이 카드에서 잘리는 이유는 무엇인가요?

소셜 플랫폼은 긴 제목과 설명을 잘라 내며, 미리보기도 줄 수를 제한해 이를 흉내 냅니다. 여기서 텍스트가 잘리면 공유할 때도 잘릴 가능성이 높으니 들어맞을 때까지 줄이세요.

제 데이터가 서버로 전송되나요?

아니요. 입력한 제목·설명·URL은 브라우저 안에 머물며 우리가 업로드·기록·저장하지 않습니다. 유일한 외부 요청은 브라우저가 입력한 URL에서 미리보기 이미지를 가져오는 것뿐이며, 이는 일반적인 브라우저 동작입니다.