Open Graph / Twitter Card / 소셜 미리보기 검사
Open Graph meta tags를 한곳에서 생성, 검사, 미리보기
URL을 입력하면 OpenGraphy가 서버에서 원본 HTML을 가져와 Open Graph와 Twitter Card metadata를 분석하고 플랫폼별 카드와 수정 제안을 보여줍니다.
공개 전에 공유 미리보기 확인
Facebook, LinkedIn, Slack, 메시지 앱에서 일관되고 매력적인 링크 카드를 보여줍니다.
링크가 실제로 공유되는 플랫폼을 위해 설계
안전한 가져오기, 정확한 분석, 신뢰 가능한 미리보기
OpenGraphy는 사용자의 브라우저가 아니라 백엔드에서 crawler와 비슷하게 DNS, 리디렉션, 사설망 차단, HTML 분석, 이미지 접근성을 확인합니다.
SSRF 보호모든 요청에서 DNS, IP 범위, 리디렉션을 확인해 localhost, 내부망, 예약 주소 접근을 막습니다.
4시간 캐시metadata와 미리보기 결과는 Redis에 임시 저장되며 URL 기록이나 개인정보를 장기 저장하지 않습니다.
진단 제안누락 태그, 상대 이미지 URL, 이미지 크기, HTTP 상태, 제목과 설명 길이를 확인합니다.
모든 공유를 잘 설계된 광고 영역처럼 보이게
Open Graph는 소셜 플랫폼과 메신저가 페이지 미리보기를 읽는 공통 언어입니다.
Open Graph란?
OG 태그는 crawler를 위한 metadata입니다. 많은 플랫폼이 og:title, og:description, og:image를 읽어 링크 미리보기를 만듭니다.
권장 이미지 크기
가장 안정적인 미리보기 이미지는 1200 x 630, 약 1.91:1 비율입니다. 가벼운 이미지일수록 메신저에서 빠르게 표시됩니다.
왜 백엔드에서 가져오나요?
대부분의 crawler는 JavaScript를 실행하거나 SPA 렌더링을 기다리지 않습니다. 서버 측 가져오기가 실제 crawler 동작에 더 가깝습니다.
최소 Open Graph 태그
먼저 title, description, image, canonical URL을 채우면 대부분의 미리보기 문제를 줄일 수 있습니다.
<meta property="og:title" content="你的頁面標題" />
<meta property="og:description" content="一段清楚、有吸引力的頁面摘要。" />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example" />
<meta name="twitter:card" content="summary_large_image" />플랫폼마다 metadata 해석 방식이 다릅니다
Facebook은 og:title, og:description, og:image를 중요하게 봅니다. 수정 후 Sharing Debugger로 다시 가져오게 할 수 있습니다.
X / Twitter
X는 OG metadata로 대체할 수 있지만 twitter:card와 twitter:image를 추가하면 큰 이미지 카드가 더 안정적입니다.
LinkedIn은 첫 가져오기 결과를 캐시하는 경우가 많습니다. 공개 전에 확인하고, 변경 후에는 Post Inspector로 갱신하세요.
WhatsApp / iMessage
이미지가 너무 크면 실패하거나 잘릴 가능성이 높습니다. 이미지를 압축하고 너비와 높이 정보를 명확히 제공하세요.
Discord / Slack / Telegram
채팅 앱은 초기 서버 HTML에 있는 metadata를 선호합니다. 프런트엔드 JavaScript에만 태그 삽입을 의존하지 마세요.
Pinterest / Reddit
커머스, 포트폴리오, 글 페이지는 와이드 이미지 외에 정사각형 또는 세로형 이미지도 준비하면 더 돋보입니다.
주요 기술 스택 연동
Next.js / Nuxt / Astro
프레임워크의 metadata API 또는 SSR/SSG를 사용해 서버가 반환하는 HTML 안에 OG 태그를 직접 넣으세요.
WordPress
SEO 플러그인이나 테마의 head hook으로 글 제목, 요약, 대표 이미지, canonical 링크를 출력하세요.
싱글 페이지 앱
모든 것을 클라이언트에서 렌더링하면 많은 crawler가 metadata를 놓칩니다. SSR, 사전 렌더링, 공유용 정적 HTML을 추가하세요.
자주 묻는 질문
Open Graph가 SEO 순위에 직접 영향을 주나요?
보통 직접적인 순위 요인은 아니지만, 소셜 클릭률과 공유 품질을 높여 트래픽, 인용, 브랜드 노출에 도움을 줄 수 있습니다.
이미지를 바꿨는데 왜 예전 이미지가 보이나요?
플랫폼은 가져오기 결과를 캐시합니다. Facebook Sharing Debugger나 LinkedIn Post Inspector로 새로고침하고, 필요하면 이미지 URL에 버전을 붙이세요.
OG 태그가 없으면 어떻게 되나요?
플랫폼이 title, meta description, 페이지 안의 큰 이미지로 추측합니다. 결과가 불안정하고 카드가 깨져 보일 수 있습니다.
태그 대소문자가 중요한가요?
네. OG:Title 대신 og:title처럼 표준 소문자 이름을 사용하세요. 많은 crawler는 표기에 엄격합니다.
