Softonic

Open Graph 미리보기

단계 1 / 2
다음

제목, 설명, 사이트 이름, 페이지 URL, 이미지 URL을 입력하면 이 도구가 키를 누를 때마다 업데이트되는 Facebook과 X(Twitter) 공유 카드를 실시간으로 렌더링합니다. Open Graph 태그를 위한 디자인 샌드박스입니다. 아무것도 가져오거나 게시하지 않으므로, 카드가 제대로 보일 때까지 헤드라인 길이와 이미지 크롭을 연습한 뒤, 그 문구를 실제 og: 태그에 복사하면 됩니다.

미리보기가 구성되는 방식

  1. 1

    카드 필드 입력

    제목, 사이트 이름, 설명, 페이지 URL, 이미지 URL. 각 필드는 하나의 og: 태그에 대응합니다.

  2. 2

    카드가 업데이트되는 모습 확인

    Facebook과 X 모형이 입력하는 대로 각 플랫폼의 실제 레이아웃과 잘림 방식을 사용해 다시 렌더링됩니다.

  3. 3

    이미지 URL 추가

    절대 https 이미지 주소를 붙여넣어 크롭을 확인하세요. 비워 두면 Facebook 카드에 회색 자리표시자가 표시됩니다.

  4. 4

    og: 태그로 복사

    카드가 잘 읽히면 같은 제목, 설명, 이미지를 페이지의 메타 태그로 옮기세요.

각 필드가 무엇이 되는가

필드 Open Graph 태그 카드에 표시되는 내용
제목 og:title 굵은 헤드라인, 한 줄로 잘림
설명 og:description 회색 부제, 두 줄로 제한
사이트 이름 og:site_name Facebook 헤드라인 위의 작은 라벨
URL og:url 도메인이 표시됨. 호스트가 이를 결정
이미지 URL og:image 두 모형 카드 모두에서 1.91:1로 크롭

이 도구는 입력한 URL에서 호스트를 읽으므로, https://blog.example.com/post는 카드에 blog.example.com으로 표시됩니다.

두 카드, 그리고 그 차이

  • Facebook은 이미지를 1.91:1로 크롭한 뒤, 작은 대문자로 도메인, 한 줄의 굵은 제목, 최대 두 줄의 설명을 보여줍니다. 이미지 URL이 없으면 회색 자리표시자를 렌더링하는데, 이것이 실제 환경에서 밋밋하고 이미지 없는 공유가 생기는 가장 흔한 원인입니다.
  • **X(Twitter)**는 모서리가 둥근 summary_large_image 카드를 보여줍니다: 2:1로 크롭된 이미지, 도메인, 제목, 그 아래의 설명.

문구를 알맞게 맞추기

  • 제목: 60~70자를 목표로 하세요. Facebook은 약 88자에서, X는 약 70자에서 잘리므로, 70자 이내의 제목은 어디서나 온전하게 유지됩니다.
  • 설명: 약 160자 미만으로 유지하세요. 카드는 두 줄로 제한하고 나머지는 버립니다.
  • 이미지: 1.91:1 크롭이 깔끔하도록 1200 x 630 px로 디자인하고, 절대 https:// URL로 호스팅하세요. 상대 경로는 태그가 실제로 적용되면 로드되지 않습니다.
  • 사이트 이름: 짧게, 브랜드만 넣고 슬로건은 넣지 마세요. 헤드라인 위에 라벨로 표시됩니다.

게시일 체크리스트

  • [ ] 제목 70자 미만
  • [ ] 설명 160자 미만
  • [ ] 이미지 URL이 절대 경로(https, //나 상대 경로가 아님)
  • [ ] 이미지를 1200 x 630 px, JPG 또는 PNG로 디자인
  • [ ] URL이 실제 배포할 표준(canonical) URL과 일치
  • [ ] 문구를 실제 og: 태그에 복사한 뒤 체커로 검증

자주 묻는 질문

아니요. 카드 필드를 직접 입력하면 이 도구가 그것이 어떻게 보일지 모형으로 만들어 줍니다. 스크레이퍼가 아니라 디자인 샌드박스이므로 페이지가 온라인에 올라가기 전에도 작동합니다. 페이지에 이미 있는 태그를 읽으려면, 그 페이지의 HTML을 Open Graph 체커에 붙여넣으세요.

Facebook 카드와 X(Twitter) 대형 이미지 카드입니다. 둘 다 같은 Open Graph 값을 사용하므로, 여기서 잘 읽히는 카드는 같은 og: 태그에서 펼쳐지는 LinkedIn, Slack, Discord 및 기타 앱의 좋은 지표가 됩니다. 다만 각각의 제한은 조금씩 다릅니다.

이미지 필드가 비어 있거나, 붙여넣은 URL이 작동하는 절대 https 주소가 아니기 때문입니다. 전체 https 이미지 URL을 추가하면 크롭이 즉시 나타납니다. 실제로 게시할 때는 파일을 5 MB 미만으로 유지하고 공개된 image/* 콘텐츠 타입으로 제공하세요.

각 플랫폼은 서로 다른 지점에서 잘라내며(Facebook은 약 88자, X는 약 70자), 모형 카드도 이를 그대로 반영합니다. 제목을 60~70자로 줄이면 모든 플랫폼에서 온전하게 유지됩니다.

관련 도구

UTM 링크 빌더

UTM의 source, medium, campaign, term, content 파라미터로 캠페인 추적 URL을 만듭니다. 광고와 뉴스레터에 바로 쓸 수 있는 깔끔한 URL 인코딩 링크.

UTM 파서

캠페인 URL을 붙여넣으면 다섯 개의 표준 UTM 태그(source, medium, campaign, term, content)를 각 값이 디코딩된 상태로 읽어줍니다. 추적 링크를 보내기 전에 빠르게 점검하는 방법입니다.

SERP 미리보기

게시하기 전에 구글 검색 결과를 미리 확인하세요. 실시간 글자 수 카운터가 너무 긴 제목과 메타 설명을 알려주고, 구글 스타일 스니펫으로 결과가 어떻게 보이는지 보여줍니다.

사이트맵 생성기

URL 목록을 붙여넣어 changefreq, priority, 선택적 lastmod가 포함된 유효한 XML 사이트맵을 생성하세요. 저장해 Search Console에 제출할 준비가 됩니다.

보안 헤더 분석기

HTTP 응답 헤더를 붙여넣으면 중요한 보안 헤더에 대한 우선순위별 조언을 받을 수 있습니다: Content-Security-Policy, Strict-Transport-Security, X-Frame-Options, Referrer-Policy 등.

URL에서 SERP 스니펫 미리보기

URL을 붙여넣고 그 제목, 메타 설명, 표준 URL이 구글 스니펫으로 어떻게 나타나는지 바로 확인하세요. 페이지에서 직접 가져오며 수동 복사가 필요 없습니다.

이 도구는 다른 언어로도 제공됩니다