Open Graph 미리보기

사용 방법

1. 페이지에서 사용 중이거나 사용할 예정인 og:title과 og:description을 입력하세요.
2. og:image의 전체 URL을 붙여 넣으세요. 도구가 이미지를 불러와 실제 픽셀 크기를 알려 줍니다.
3. 페이지 URL 또는 도메인을 입력한 다음 큰 카드와 작은 카드 미리보기를 비교하고 경고가 있으면 수정하세요.

작동 방식

누군가 링크를 공유하면 대부분의 소셜 네트워크와 채팅 앱은 페이지를 가져와 Open Graph 태그인 og:title, og:description, og:image, og:url을 읽습니다. 그런 다음 미리보기 카드를 만듭니다. 가로세로 비율이 약 1.91:1인 넓은 이미지는 보통 이미지가 위에 있는 큰 카드를 표시하고, 작거나 정사각형인 이미지는 텍스트 옆에 썸네일을 배치한 작은 카드를 표시하는 경우가 많습니다.

이 도구는 두 가지 일반적인 카드 스타일을 보여 주어 텍스트 길이와 이미지 구도를 확인할 수 있도록 합니다. 브라우저에서 이미지가 로드된 후 실제 크기를 확인합니다. 200 × 200 px보다 작으면 많은 앱에서 이미지를 표시하지 않고, 600 × 315 px보다 작으면 작은 레이아웃을 사용하는 경우가 많습니다. 비율이 1.91:1에서 크게 벗어나면 이미지가 잘릴 수 있습니다. 1200 × 630 px는 고밀도 화면에서도 선명하게 표시되는 널리 권장되는 크기입니다.

미리보기가 특정 앱에 표시되는 모습을 정확히 보여 주는 것은 아닙니다. 앱마다 표시하는 제목 및 설명의 줄 수가 다르고, 설명을 무시하는 앱도 있습니다. 또한 대부분의 앱은 첫 공유 후 한동안 미리보기를 캐시하므로 태그를 변경해도 바로 반영되지 않을 수 있습니다. 많은 플랫폼에서 캐시를 새로고침할 수 있는 자체 디버깅 도구를 제공합니다.

예시

자주 묻는 질문

개인정보 보호

입력한 텍스트는 브라우저에 남습니다. 이미지를 확인할 때는 브라우저가 입력한 URL에 직접 요청을 보내며 리퍼러는 전송하지 않습니다. 따라서 해당 서버에는 일반적인 이미지 요청이 기록됩니다. TIG Tools로 전송되는 정보는 없습니다.