소셜 공유 미리보기

Google, Facebook, X, LinkedIn, WhatsApp, Slack, Discord, Pinterest에서 페이지가 공유될 때 어떻게 보이는지 확인하고, 잘리는 부분을 고친 뒤, 바로 붙여넣을 수 있는 Open Graph 태그를 복사하세요.

1. 페이지 정보

양식을 채우거나 페이지 코드에서 가져오세요.

0 / 60
0 / 155
페이지 유형
공유 이미지

JPG, PNG, WebP, GIF. 선택한 이미지는 미리보기에만 쓰여요. 코드에 들어갈 수 있도록 온라인 주소도 입력하세요.

2. 미리보기

플랫폼별 시뮬레이션이에요. 실제 결과는 조금 다를 수 있지만, 잘리는 위치는 실제와 거의 같아요.

Google

Eexample.comhttps://example.com › …
페이지 제목페이지 설명이 여기에 표시돼요.

Facebook

example.com페이지 제목페이지 설명이 여기에 표시돼요.

X

페이지 제목
출처: example.com

LinkedIn

페이지 제목example.com

WhatsApp

페이지 제목페이지 설명이 여기에 표시돼요.example.com
https://example.com10:24

Slack

example.com페이지 제목페이지 설명이 여기에 표시돼요.

Discord

example.com페이지 제목페이지 설명이 여기에 표시돼요.

Pinterest

페이지 제목Eexample.com

Pinterest는 이미지를 자르지 않고 전체를 보여 줘요. 세로 이미지(2:3, 예: 1000 × 1500 px)는 Pinterest에서 더 넓게 보이지만, 다른 곳에서는 잘려요.

3. 점검 및 코드

고칠 점, 그리고 페이지에 붙여넣을 태그예요.

  • 문제제목 없음제목이 없으면 SNS마다 페이지 내용으로 제목을 임의로 만들어요.
  • 문제설명 없음SNS가 페이지에서 텍스트 일부를 가져다 쓰는데, 적절하지 않은 경우가 많아요.
  • 문제이미지 없음이미지가 없는 링크는 클릭 수가 훨씬 적어요. 1200 × 630 px 이미지를 준비하세요.
  • 개선 필요페이지 주소 없음og:url은 페이지의 공식 주소를 알려 줘서, 공유가 하나로 모이게 해요.

페이지의 head 영역에 붙여넣으세요.

양식을 채우면 코드가 만들어져요.

소셜 공유 미리보기 소개

누군가 페이지를 공유할 때마다 SNS는 제목, 설명, 이미지가 담긴 카드를 보여 줘요. 이 도구는 게시하기 전에 그 카드를 미리 보여 주고, 카드에 쓰이는 태그를 만들어 줘요.

링크를 보기 좋게 만들기

페이지가 공유되면 SNS마다 제목, 설명, 이미지가 담긴 카드를 보여 줘요. 이 정보는 페이지 코드에 넣은 Open Graph 태그에서 가져와요. 태그가 없으면 카드가 비어 있거나 엉뚱한 내용이 표시돼요.

알맞은 길이

Google은 제목을 약 60자, 설명을 약 155자에서 잘라요. 1200 × 630픽셀(1.91:1) 이미지는 어디서나 보기 좋아요. 일부 플랫폼은 이미지를 잘라내므로 핵심 내용은 가운데에 두세요. Pinterest는 세로 이미지를 선호해요.

바로 붙여넣는 코드

페이지 head에 넣을 HTML 태그나, Next.js 사이트용 메타데이터 객체를 복사하세요. 게시한 뒤에도 SNS가 며칠 동안 이전 미리보기를 캐시에 보관하기도 해요.

아무것도 업로드되지 않아요

미리보기는 브라우저 안에서 시뮬레이션돼요. 이미지와 텍스트는 어디에도 전송되지 않아요. 유일한 요청은 입력한 이미지 주소를 불러오는 것으로, 브라우저가 직접 보내요.

개발

JWT 디코더

JWT의 헤더, 페이로드, 날짜를 읽고 서명을 확인하세요.