CodeKitHub이 도구는 무엇인가요?
Open Graph는 원래 Facebook이 만든 프로토콜로, HTML <head>에 배치되는 작은 <meta property="og:..."> 태그 집합을 통해 모든 웹페이지가 스스로를 설명할 수 있게 해줍니다. 누군가 링크를 소셜 앱, 채팅 클라이언트, 메시징 도구에 붙여넣으면 해당 앱은 페이지 콘텐츠에서 추측하는 대신 이 태그를 읽어 미리보기 카드(제목, 설명, 썸네일 이미지)를 구성합니다.
트위터(X)는 관련은 있지만 별도인 <meta name="twitter:..."> 태그 세트를 사용해 자사 플랫폼에서 링크가 어떻게 미리보기되는지를 구체적으로 제어합니다. 대부분의 사이트는 두 가지를 모두 설정합니다. Open Graph 태그는 폭넓은 호환성을 위해, Twitter Card 태그는 X에서의 미리보기를 세밀하게 조정하기 위해(예: 작은 요약 카드 대신 큰 이미지 카드 선택) 사용됩니다.
이 태그들이 없으면 공유된 링크는 미리보기가 전혀 표시되지 않거나, 플랫폼이 페이지의 원본 콘텐츠에서 제목과 이미지를 추측하려고 시도합니다 — 종종 엉뚱한 제목이나 임의의 본문 이미지를 선택하거나 아무것도 표시하지 않습니다. og:title, og:description, og:image를 명시적으로 설정하면 누군가 클릭하기 전에 콘텐츠가 어떻게 보일지 완전히 제어할 수 있습니다.
왜 사용해야 할까요?
- 실시간 미리보기 — 게시하기 전에 입력하는 동안 공유 카드가 어떻게 보일지 정확히 확인할 수 있습니다.
- Open Graph 태그(og:title, og:description, og:image, og:url, og:type, og:site_name)와 Twitter Card 태그를 한 번에 생성합니다.
- 플랫폼이 실제로 읽는 필드를 모두 포함합니다: 제목, 설명, 정규 URL, 이미지, 사이트 이름, 콘텐츠 유형, 트위터 카드 스타일.
- 완전히 클라이언트 측에서 실행됩니다 — 제목, 설명, URL이 브라우저를 벗어나지 않습니다.
- 무료이며 로그인이나 사용 제한이 없습니다 — 결과를 복사해 HTML에 붙여넣기만 하면 됩니다.
사용 방법
- 페이지 제목과 짧은 설명을 입력합니다(제목은 약 60자 이내, 설명은 약 155~160자 이내를 권장합니다).
- 페이지의 정규 URL과 미리보기 이미지의 절대 URL을 입력합니다(이미지 URL은 https://example.com/image.jpg처럼 완전한 형태여야 하며, 상대 경로는 사용할 수 없습니다).
- 필요에 따라 사이트 이름을 설정하고, og:type(website, article, product, profile, video, music)을 선택한 뒤 트위터 카드 유형(summary 또는 summary_large_image)을 선택합니다.
- 실시간 미리보기 카드를 확인해 제목, 설명, 이미지가 잘 어울리는지 확인합니다.
- "복사"를 클릭하고 생성된 <meta> 태그를 페이지의 <head> 안, 닫는 </head> 태그 바로 앞에 붙여넣습니다.
예시
입력
제목: "실제로 사용하게 될 무료 개발자 도구 10선"
설명: "JSON, 정규식, UUID 등을 위한 브라우저 기반 도구 모음 — 설치가 필요 없습니다."
URL: https://example.com/blog/dev-tools
이미지: https://example.com/images/dev-tools-cover.jpg결과
<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />입력한 필드만 결과에 포함됩니다. 사이트 이름을 비워두면 출력에서 og:site_name이 단순히 생략됩니다.
피해야 할 흔한 실수
- og:image를 아예 설정하지 않는 것 — 이것이 없으면 대부분의 플랫폼은 미리보기 이미지를 표시하지 않거나 페이지에서 무작위 이미지를 가져오는데, 보통 어색하거나 전문적이지 않아 보입니다.
- https://example.com/images/cover.jpg 같은 완전한 URL 대신 /images/cover.jpg 같은 상대 이미지 경로를 사용하는 것 — 소셜 크롤러는 일반적으로 상대 경로를 해석하지 못합니다.
- 잘못된 이미지 비율 — 정사각형이나 세로형 이미지는 플랫폼이 1.91:1 가로 프레임에 강제로 맞출 때 어색하게 잘립니다. 공유 이미지는 항상 1200×630에 가깝게 디자인하세요.
- 잘리는 제목이나 설명 — 대부분의 플랫폼에서 말줄임표로 잘리지 않도록 og:title은 약 60자 이내, og:description은 약 155~160자 이내로 유지하세요.
- 캐시된 미리보기 업데이트를 잊는 것 — 이미 게시된 페이지에서 og 태그를 변경한 후에도, Facebook이나 LinkedIn의 디버깅 도구로 수동으로 재크롤링을 강제하기 전까지는 오래된 미리보기가 캐시에 남아 있을 수 있습니다.
각 태그가 사용되는 위치
og:title, og:description, og:image는 거의 모든 플랫폼이 미리보기를 구성할 때 읽는 세 가지 핵심 태그입니다. og:url은 크롤러에게 미리보기를 어떤 정규 링크와 연결해야 하는지 알려주며, 동일한 콘텐츠가 여러 URL을 통해 접근 가능한 경우 중요합니다. og:site_name은 Facebook 같은 일부 플랫폼에서 제목 위에 (발행처나 브랜드 이름 같은) 작은 라벨로 표시됩니다.
og:type은 Open Graph의 더 풍부한 객체 모델을 지원하는 크롤러에게 페이지가 어떤 종류의 객체인지 알려줍니다 — 예를 들어 article로 설정하면 이를 읽는 플랫폼에서 og:article:published_time과 og:article:author가 활성화되지만, 대부분의 소셜 미리보기는 이러한 추가 필드를 무시하고 제목/설명/이미지라는 핵심 세 가지만 사용합니다.
twitter:card는 X에서의 레이아웃을 구체적으로 제어합니다. summary는 텍스트 옆에 작은 정사각형 썸네일을 표시하고, summary_large_image는 텍스트 위에 전체 너비 이미지를 표시합니다 — 의미 있는 커버 이미지가 있는 콘텐츠라면 거의 항상 후자가 더 나은 선택입니다.
자주 묻는 질문
og:image는 어떤 크기로 해야 하나요?
권장 크기는 1200×630px입니다 — 고밀도 디스플레이에서도 충분히 선명하며, Facebook, LinkedIn, X가 자르는 데 사용하는 약 1.91:1 비율과 일치합니다. 파일 크기는 5~8MB 이하로 유지하고, JPG나 PNG를 사용하며, 이미지 URL이 상대 경로가 아닌 완전한 절대 URL인지 확인하세요 — 대부분의 크롤러는 상대 이미지 경로를 제대로 해석하지 못합니다.
링크를 공유했을 때 미리보기가 표시되지 않는 이유는 무엇인가요?
가장 흔한 원인은 og:image 누락, 절대 경로가 아닌 상대 이미지 URL 사용, robots.txt에 의한 크롤러 차단, 또는 플랫폼이 예전 미리보기의 캐시된 버전을 보여주는 경우입니다. Facebook과 LinkedIn 모두 미리보기를 적극적으로 캐싱하므로, 태그를 업데이트한 후에는 Facebook의 Sharing Debugger나 LinkedIn의 Post Inspector를 사용해 다시 크롤링하도록 강제하세요.
og: 태그와 twitter: 태그의 차이는 무엇인가요?
og: 태그(og:title, og:description, og:image 등)는 Open Graph 표준의 일부로, Facebook, LinkedIn, Slack, Discord, WhatsApp 등 대부분의 플랫폼이 읽습니다. twitter: 태그는 Twitter/X 자체 형식입니다. twitter:title이나 twitter:image가 없으면 X는 자동으로 해당하는 og: 태그로 대체하지만, 둘 다 명시적으로 설정하면 summary_large_image를 선택해 큰 미리보기 이미지를 사용하는 등 더 세밀한 제어가 가능합니다.
어떤 og:type을 사용해야 하나요?
홈페이지와 일반 콘텐츠를 포함한 대부분의 페이지에는 "website"가 안전한 기본값입니다. 블로그 게시물이나 뉴스에는 "article"을 사용하세요(게시 시간 같은 기사 전용 추가 태그가 활성화됩니다). 전자상거래 페이지에는 "product"를, 개인 또는 사용자 프로필 페이지에는 "profile"을 사용하세요. 이 유형은 주로 어떤 추가 Open Graph 속성이 유효한지에 영향을 미칠 뿐, 기본 미리보기 카드의 모양 자체를 바꾸지는 않습니다.
이 도구가 제 데이터를 어딘가에 저장하거나 전송하나요?
아니요. 모든 생성 과정은 순수 JavaScript를 사용해 브라우저에서 로컬로 이루어집니다. 입력한 어떤 내용도 전송, 기록, 저장되지 않으며, 탭을 닫으면 모든 것이 사라집니다.