개발자 도구
Open Graph 미리보기
입력한 OG 제목, 설명, 이미지 URL로 카드 미리보기를 만듭니다.
도구 안내
시작 전 확인하세요
Open Graph 미리보기는 공유 제목, 설명, 이미지 URL을 카드 형태로 보여 주는 소셜 미리보기 도구입니다.
- 분류
- 개발자 도구
- 처리 방식
- 입력한 OG 값은 브라우저에서 미리보기로만 렌더링되며 외부 공유 API나 서버 저장소로 전송하지 않습니다.
- 예시
- og:title과 og:image URL을 넣으면 공유 카드의 제목 줄바꿈과 이미지 영역을 확인할 수 있습니다.
입력 / 출력
SEO / 마케팅 작업대
OG 미리보기
공유 카드와 이미지 비율을 미리 확인합니다.
작업 모드
OG
OG 미리보기
검수 상태
ready-to-publish
social-card
내보내기
HTML
open-graph-preview-2026-06-08.html
example.com/landing
브라우저에서 바로 쓰는 온라인 도구
Online Toolbox는 입력값을 서버로 보내지 않고 빠르게 처리하는 도구 모음입니다.
마케팅 작업 선택
5/6핵심 입력
입력
미리보기
https://example.com/landing
브라우저에서 바로 쓰는 온라인 도구
Online Toolbox는 입력값을 서버로 보내지 않고 빠르게 처리하는 도구 모음입니다.
Open Graph
Open Graph 필수 태그가 준비되었습니다.
입력값만 사용하며 외부 URL을 크롤링하지 않습니다.
검색 노출과 소셜 미리보기는 각 플랫폼 정책에 따라 달라질 수 있습니다.
OG/Twitter image
OG/Twitter large image: 1200x630, 1.90:1, recommended
recommended 1200x630 image size
minimum 600x315 for large image cards
aspect ratio 1.90:1 is close to 1.91:1
image URL is provided
publish readiness
social-card / ready-to-publish
open-graph-preview-2026-06-08.html
Verify canonical and og:url on the live URL
Refresh social card cache after publishing
Refresh Facebook/LinkedIn/Twitter card cache after publishing
Save a copy of the generated output before deploy
Facebook Sharing Debugger
LinkedIn Post Inspector
Twitter/X card validator
External platform reflection is not guaranteed by this local preview.
Search engines and social networks can cache old data after deployment.
결과
open-graph-preview-2026-06-08.html 파일로 저장할 수 있습니다.
<title>브라우저에서 바로 쓰는 온라인 도구</title> <meta name="description" content="Online Toolbox는 입력값을 서버로 보내지 않고 빠르게 처리하는 도구 모음입니다."> <link rel="canonical" href="https://example.com/landing"> <meta property="og:type" content="website"> <meta property="og:title" content="브라우저에서 바로 쓰는 온라인 도구"> <meta property="og:description" content="Online Toolbox는 입력값을 서버로 보내지 않고 빠르게 처리하는 도구 모음입니다."> <meta property="og:url" content="https://example.com/landing"> <meta property="og:image" content="https://example.com/og.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:image" content="https://example.com/og.png">
빠른 답변 요약
Open Graph 미리보기는 공유 제목, 설명, 이미지 URL을 카드 형태로 보여 주는 소셜 미리보기 도구입니다.
- 언제 쓰나요
- 링크를 SNS나 메신저에 공유하기 전 카드 문구와 이미지 비율이 자연스러운지 확인할 때 사용합니다.
- 처리 방식
- 입력한 OG 값은 브라우저에서 미리보기로만 렌더링되며 외부 공유 API나 서버 저장소로 전송하지 않습니다.
- 대표 예시
- og:title과 og:image URL을 넣으면 공유 카드의 제목 줄바꿈과 이미지 영역을 확인할 수 있습니다.
도움말사용 방법, 예시, 실무 팁, FAQ는 필요할 때 펼쳐보세요.
이 도구는 무엇인가요?
Open Graph 미리보기는 입력한 OG 제목, 설명, 이미지 URL로 카드 미리보기를 만듭니다. 입력값은 서버 저장소로 보내지 않고 브라우저 안에서 결과를 만듭니다. 결과는 입력, 옵션, 상태, 다운로드 또는 복사 영역을 한 화면에서 확인하도록 구성했습니다.
사용 방법
- 샘플 상태 확인
처음 열린 화면에서 예시 입력과 결과 미리보기를 확인합니다.
- 입력값 준비
og:title처럼 처리할 텍스트, URL, 수치 또는 로컬 파일을 넣습니다.
- 옵션 조정
Open Graph, OG 미리보기, social card 작업에 맞게 범위, 형식, 단위, 출력 방식을 선택합니다.
- 결과 저장
소셜 카드 preview 형태의 결과를 확인하고 복사하거나 파일로 내려받습니다.
예시
Open Graph 로컬 처리
- 입력
- og:title
- 출력
- 소셜 카드 preview
OG 미리보기 옵션 조정
- 입력
- og:title 값을 바탕으로 세부 옵션을 변경
- 출력
- 변경된 설정이 결과 미리보기와 다운로드 이름에 반영
Open Graph 미리보기 검토와 저장
- 입력
- 실제 작업에 쓸 입력값을 적용
- 출력
- 복사 가능한 요약 또는 내려받을 수 있는 결과 파일 생성
실무 팁
- 중요한 업무에 쓰기 전 원본 데이터와 결과를 한 번 더 대조하세요.
- 큰 파일이나 긴 입력은 브라우저 메모리를 많이 사용할 수 있으므로 필요한 범위만 처리하세요.
- 입력값은 서버 저장소로 보내지 않고 브라우저 안에서 결과를 만듭니다.
- 광고는 입력, 출력, 복사, 다운로드, 업로드, 초기화 버튼 내부에 배치하지 않습니다.
- 결과 파일명과 미리보기 텍스트를 확인하면 여러 도구를 연속으로 사용할 때 혼동을 줄일 수 있습니다.
FAQ
Open Graph 미리보기는 서버에 데이터를 보내나요?
입력값은 서버 저장소로 보내지 않고 브라우저 안에서 결과를 만듭니다.
Open Graph 미리보기 결과를 저장할 수 있나요?
지원되는 도구는 다운로드 링크를 제공하고, 텍스트 결과는 복사하거나 텍스트 파일로 저장할 수 있습니다.
Open Graph 미리보기를 모바일에서도 사용할 수 있나요?
네. 입력, 옵션, 상태, 결과 영역이 좁은 화면에서도 순서대로 보이도록 구성했습니다.
Open Graph 미리보기 결과가 벤치마크 서비스와 완전히 같나요?
브라우저 로컬 처리 범위 안에서 핵심 흐름을 제공하며, 계정 기반 저장, 서버 압축, 장기 보관 같은 기능은 포함하지 않습니다.
Open Graph 미리보기에서 오류가 나면 어떻게 하나요?
오류 메시지와 상태 영역을 확인한 뒤 입력 형식, 파일 종류, 범위 값을 수정해 다시 실행하면 됩니다.
Open Graph 미리보기 페이지의 광고가 조작을 방해하나요?
아니요. 도구 입력, 출력, 복사, 다운로드, 업로드, 초기화 버튼 근처에는 수동 광고 영역을 두지 않습니다.
SNS 공유 카드처럼 미리 볼 수 있나요?
네. og:title, og:description, og:image 값을 카드 형태로 확인해 줄바꿈과 이미지 비율을 점검할 수 있습니다.
Open Graph 값이 외부 API나 서버로 전송되나요?
아니요. 입력한 OG 값은 브라우저 미리보기로만 렌더링되며 외부 공유 API나 서버 저장소로 보내지 않습니다.
