Open Graph · Twitter Card 생성기
폼 입력 → 즉시 붙여넣기 가능한 <meta> 블록. Facebook·LinkedIn·Slack용 OG와 X·Discord용 Twitter Card 태그.
<title>Site Title — Page Title</title> <meta name="description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." /> <link rel="canonical" href="https://example.com/page" /> <!-- Open Graph --> <meta property="og:title" content="Site Title — Page Title" /> <meta property="og:description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." /> <meta property="og:url" content="https://example.com/page" /> <meta property="og:image" content="https://example.com/og-image.png" /> <meta property="og:image:alt" content="Cover image describing the page" /> <meta property="og:site_name" content="Example Site" /> <meta property="og:type" content="website" /> <meta property="og:locale" content="en_US" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Site Title — Page Title" /> <meta name="twitter:description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." /> <meta name="twitter:image" content="https://example.com/og-image.png" /> <meta name="twitter:image:alt" content="Cover image describing the page" /> <meta name="twitter:site" content="@example" /> <meta name="twitter:creator" content="@author" />
미리보기
Example Site
Site Title — Page Title
A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card.
배포 후 Facebook Sharing Debugger·Twitter Card Validator로 검증.
사용법
- 제목·설명·canonical URL·1200×630 커버 이미지 URL 입력.
- OG
og:type(article·website 등)과 Twitter 카드 스타일(summary·summary_large_image 등) 선택. - 생성된 블록을 페이지
<head>에 복사 — HTML·Astro·Next.js 등에서 동작.
자세한 설명
펼치기접기
사용자가 URL을 공유할 때 모든 소셜 플랫폼·채팅 앱이 찾는 표준 미리보기 카드 메타데이터 블록 생성. 제목·설명·이미지·타입·Twitter 카드 변형 모두 설정. 작은 미리보기로 소셜 피드에 어떻게 보일지 대략 표시. 결과를 페이지 <head>에 바로 복사. 태그를 넣고 난 뒤의 현실적인 주의 사항이 하나 있습니다. 플랫폼은 URL을 처음 긁어 간 결과를 때로는 며칠씩 캐시하므로, 태그를 고쳐도 이미 만들어진 미리보기는 바뀌지 않습니다. 각 플랫폼의 디버거로 다시 긁어 가게 만드세요. 이미지는 1200×630 픽셀 언저리를 목표로 하는 것이 좋습니다. 거의 모든 카드가 그 모양으로 잘리기 때문입니다.
자주 묻는 질문
이미지 크기?
1200 × 630 픽셀(1.91:1)이 안전한 기본 — Facebook·LinkedIn·Slack·Twitter summary_large_image 카드 만족. Twitter 일반 summary는 1:1이지만 대부분 사이트가 둘 다에 한 이미지 사용.
summary와 summary_large_image 차이?
summary는 제목·설명 옆에 작은 정사각 썸네일. summary_large_image는 제목 위에 전체 폭 배너 이미지. 콘텐츠 중심 게시물은 large, 이미지가 부수적이면 small.
canonical 링크가 중요?
예. 크롤러가 URL 변형(?utm_source=…·trailing slash 등) 중복 제거 및 소셜 인게이지먼트(좋아요·댓글)를 단일 canonical URL로 라우팅.
태그를 고쳤는데 미리보기에 옛 이미지가 계속 나온다. 어떻게 하나?
플랫폼이 예전 수집 결과를 캐시한 것이다. 대부분 며칠씩 보관하고 요청받을 때만 갱신하므로, 그 플랫폼의 디버거나 공유 검사 도구로 해당 URL을 다시 가져오게 하라. 급할 때 더 빠른 우회책은 이미지의 URL 자체를 바꾸는 것이다. 새 파일 이름은 옛 캐시 항목으로 제공될 수 없기 때문이다.
이 태그들은 서버에서 렌더링돼야 하나?
실질적으로 그렇다. 크롤러는 HTML을 가져와 그 안에 있는 것을 읽는다. 대부분 자바스크립트를 실행하지 않으므로, 로드 후에 클라이언트 코드가 넣은 태그는 아예 보이지 않는다. 싱글 페이지 앱에서 어떤 링크를 공유해도 사이트의 일반 제목만 뜨는 흔한 이유가 이것이다. 태그는 그 URL에 대해 서버가 보내는 HTML 안에 들어 있어야 한다.
관련 도구
SNS / SEO 글자수 한도 체커
한 번 입력하면 28개 이상 플랫폼 한도(트위터·인스타·SEO 타이틀·광고 등)에 맞는지 실시간 표시.
텍스트
JSON to Go 구조체 변환기
JSON 객체를 json 태그가 붙은 Go 구조체로 브라우저에서 즉시 변환합니다.
개발
Snowflake ID 디코더 (Discord, Twitter)
Discord·Twitter/X·Instagram Snowflake ID를 생성 타임스탬프, 워커/프로세스 또는 데이터센터, 시퀀스로 디코딩 — 커스텀 에폭 모드 포함 — 브라우저에서.
개발
CSS 애니메이션 생성기
CSS 애니메이션을 시각적으로 빌드 — 프리셋 선택·시간/이징/반복 조정·미리보기·키프레임 복사.
개발
신용카드 검증 (Luhn + 브랜드)
Luhn 체크섬으로 카드번호 검증·브랜드 식별(Visa/MC/Amex 등)·길이 확인. 로컬·네트워크 없음.
개발
NumPy .npy / .npz 검사기
.npy·.npz 헤더를 브라우저에서 읽습니다. dtype, shape, 바이트 순서, 필드 배치와 값 미리보기까지. NumPy 설치도 업로드도 필요 없습니다.
개발