라이브 소셜 미리보기로 Open Graph와 Twitter Card 태그를 작성하세요.
마지막 업데이트
Coddy는 브라우저에서 실제 코드를 작성하며 배웁니다. 인터랙티브 레슨, 즉각적인 피드백, 막힐 때 도와주는 AI까지.
최신 앱(게시물, DM, Slack 채널 등)에서 링크를 공유하면, 플랫폼이 그 URL을 가져와 작은 메타데이터 묶음을 뽑아 *공유 카드*로 렌더링합니다: 제목, 설명, 이미지, 사이트 이름이죠. 그 메타데이터는 페이지의 보이는 본문이 아니라 <head> 안의 특정 <meta> 태그 모음에서 가져옵니다. 그 대부분을 정의하는 게 2010년에 Facebook이 만든 Open Graph 프로토콜입니다. X(구 Twitter)는 twitter: 접두사를 붙여 몇 가지를 더 추가합니다. LinkedIn, Discord, Slack, iMessage, WhatsApp, Pinterest도 같은 태그를 약간씩 변형해 읽습니다.
이 태그들을 올바르게 다는 건 페이지마다 한 번만 하면 되는 일이지만, 그 영향은 결코 작지 않습니다. Open Graph 이미지가 없는 페이지는 공유했을 때 망가져 보입니다. 너무 긴 제목은 단어 중간에서 잘립니다. 비율이 잘못된 og:image는 모든 플랫폼에서 레터박스 처리됩니다. 이 도구는 그 값들을 실시간 미리보기로 조정할 수 있게 해 줘서, 페이지를 배포하기 *전에* 잘림이나 크롭 문제를 발견할 수 있습니다.
모든 처리는 로컬에서 이루어집니다. 폼 상태, 미리보기, 생성된 HTML은 절대 브라우저를 떠나지 않습니다 - 출시 전 URL과 미공개 카피를 유출 걱정 없이 그대로 붙여 넣어도 안전합니다.
property 속성(<meta property="og:title">)을 쓰고, 일반 SEO와 Twitter Card 태그는 name(<meta name="description">, <meta name="twitter:card">)을 씁니다.title, meta description), Open Graph(og:title, og:description), Twitter(twitter:title, twitter:description).og:image는 1200×630, HTTPS 제공, 절대 URL이어야 합니다 - 상대 경로는 다른 서버가 페이지를 가져올 때 실패합니다.twitter:card 값이 레이아웃을 결정합니다: summary는 작은 정사각 썸네일, summary_large_image는 대부분의 브랜드가 원하는 전체 폭 배너입니다.50~60자를 목표로 하세요. Facebook은 ~95자, X는 ~70자에서 자릅니다. 브랜드보다 가치를 앞에 두세요 - "Cloudflare Workers로 배포하는 방법"이 "Coddy Blog · 배포 가이드"보다 낫습니다.
120~155자를 목표로 하세요. 대부분의 플랫폼은 200자 근처에서 자릅니다. 카드마다 제목 아래에 설명이 나타나기 때문에 완결된 문장을 쓰세요 - 잘린 조각은 미완성처럼 보입니다.
추적이나 리다이렉트 링크가 아니라, 페이지 자체의 절대 https:// URL을 쓰세요. Open Graph 크롤러는 공유를 중복 제거할 때 og:url을 따라가므로, 정식 URL을 두면 공유 카운트와 미리보기가 일관되게 유지됩니다.
X의 summary_large_image 카드와 Facebook · LinkedIn의 표준 카드에는 1200×630이 가장 알맞습니다. PNG나 JPEG로, 약 5MB 이하. 항상 절대 URL을 쓰세요 - 소셜 크롤러는 자기 서버에서 URL에 접근하기 때문에 상대 경로는 실패합니다.
**Generated <head> tags** 패널의 블록을 페이지 <head>에 붙여넣으세요. 배포한 뒤에는 각 플랫폼의 디버거(Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector)로 검증하고, 이미지를 나중에 바꿀 때는 재크롤을 강제 실행하세요.
오늘날 소셜 플랫폼이 읽는 거의 모든 태그를 아래에 정리했습니다. property=로 표시된 태그는 Open Graph 프로토콜에 속하고, name=으로 표시된 태그는 표준 SEO / Twitter Card 변형입니다. 명세: Open Graph, X Cards.
| 태그 | 사용처 | 권장 값 | 메모 |
|---|---|---|---|
og:title | FB, LinkedIn, Slack, Discord | 50~60자 | 없으면 <title>로 폴백 - 그래도 따로 설정하세요. |
og:description | FB, LinkedIn, Slack, Discord | 120~155자 | 없으면 meta description으로 폴백. |
og:image | 모든 플랫폼 | 1200×630, < 5MB, HTTPS, 절대 URL | 절대 URL이어야 합니다 - 상대 경로는 실패합니다. |
og:image:alt | 접근성 | 이미지를 설명 | 스크린 리더와 일부 플랫폼이 사용합니다. |
og:url | FB, LinkedIn | 정식 https:// URL | 쿼리 문자열이 다른 변형 간의 공유를 중복 제거하는 데 쓰입니다. |
og:type | FB, LinkedIn | website 또는 article | article은 article:published_time, article:author를 활성화합니다. |
og:site_name | FB, Discord | 브랜드 이름 | 카드 위/아래의 작은 출처 표시로 노출됩니다. |
twitter:card | X | summary_large_image | summary는 작은 정사각 썸네일, summary_large_image는 배너 레이아웃. |
twitter:title | X | og:title과 동일 | 없으면 X가 og:title로 폴백합니다 - 안전하게 둘 다 설정하세요. |
twitter:description | X | og:description과 동일 | 없으면 og:description으로 폴백. |
twitter:image | X | og:image와 동일 | 없으면 og:image로 폴백. |
twitter:site | X | @yourbrand | 퍼블리셔의 X 핸들 - 일부 분석에 영향을 줍니다. |
**og:type**을 article로 설정하고, article 전용 섹션에 **Author**와 **Published time**을 추가한 뒤, 1200×630 커버 이미지를 쓰세요. 각 플랫폼에서 카드가 어떻게 보일지 미리보기가 실시간으로 갱신됩니다.
og:type=article은 일부 플랫폼(Discord, LinkedIn)이 출처 표시에 활용하는 article 전용 태그(article:published_time, article:author)를 활성화합니다. Twitter는 무시하지만 따로 불평하지도 않습니다.
**og:type**은 website로 두세요. 제품 이름을 제목으로, 한 문장의 가치 제안을 설명으로, 히어로 이미지나 스크린샷 크롭을 이미지로 쓰세요.
랜딩 페이지에는 article 메타데이터가 필요하지 않습니다. 공유된 랜딩 페이지 카드에서 가장 많이 클릭되는 요소는 보통 이미지이므로, 깔끔한 1200×630 비주얼에 투자하세요.
제목: "개념 - 섹션 · 문서". 설명: 그 개념을 한 문장으로 설명. 이미지: 일반 문서 커버나 관련 UI의 스크린샷.
문서 페이지는 Slack 채널과 X 스레드에서 자주 공유됩니다. 일관된 문서 커버 이미지가 있으면 제목을 읽기 전에도 정신없는 피드 속에서 한눈에 알아볼 수 있습니다.
/images/cover.png 같은 상대 경로 og:image URL을 쓰는 것. 소셜 크롤러는 *자기* 서버에서 페이지에 접근하므로, 상대 경로는 소셜 플랫폼 자신의 도메인을 가리키게 되어 404가 납니다. 항상 절대 https:// URL을 쓰세요.twitter:card를 빠뜨리는 것. 이게 없으면 X는 이미지가 없는 최소 카드를 기본으로 씁니다. 거의 모든 브랜드가 원하는 배너 레이아웃을 얻으려면 twitter:card=summary_large_image를 추가하세요.og:image:alt 태그를 건너뛰는 것. 비용은 없고 스크린 리더 사용자에게 도움이 되며, 일부 플랫폼은 렌더링된 카드의 대체 텍스트로 노출하기도 합니다.og:image를 바꿀 때마다 Facebook Sharing Debugger로 다시 스크랩하세요.<meta> 태그 집합 - 제목, 설명, 이미지, 타입 등 - 으로 자신을 설명할 수 있게 해 줍니다. 오늘날 주요 소셜과 채팅 플랫폼이 전부 읽기 때문에, 공유 카드 메타데이터의 사실상 표준이 되었습니다.twitter: 태그에서 그에 상응하는 og: 태그로 폴백하기 때문에, 기술적으로는 Open Graph만으로도 어느 정도 동작합니다. 하지만 twitter:card, twitter:site, twitter:creator를 더하면 X에서 카드가 렌더링되는 방식을 더 세밀하게 제어할 수 있습니다.<title>, meta description을 읽습니다. Google이 이미지 검색이나 디스커버 영역에서 og:image를 가끔 가져오긴 하지만 랭킹 신호는 아닙니다.