Open Graph / meta 태그 생성기

사용법

다섯 개 항목을 채우면 Open Graph(og:) 태그와 Twitter 카드 태그를 한꺼번에 생성합니다. 결과를 페이지의 <head> 안에 넣으면 카카오톡, 슬랙, 페이스북, X(트위터), 디스코드 등에서 링크를 공유할 때 제목·설명·썸네일이 있는 카드로 표시됩니다.

이미지는 절대 URL이어야 하며(상대 경로 불가), 1200×630px 비율을 권장합니다. 너무 작으면 플랫폼이 썸네일 없이 텍스트만 노출합니다. 제목은 약 60자, 설명은 약 155자를 넘으면 뒷부분이 잘릴 수 있어 글자 수 안내를 표시합니다.

블로그 글·뉴스처럼 작성일이 있는 콘텐츠는 유형을 article로 두세요. 일반 페이지는 website입니다. 공유 카드가 갱신되지 않을 때는 각 플랫폼의 디버거로 캐시를 비워야 합니다.

실제 응용

한 벌 만들어 전 페이지에 붙여넣지 않는다

가장 흔한 실수입니다. 여기서 만든 태그를 그대로 공통 레이아웃에 넣으면 어느 페이지를 공유해도 같은 카드가 뜹니다. 글 목록을 공유하든 개별 글을 공유하든 제목이 사이트 이름 하나로 나오는 상태가 됩니다.

이 도구는 형태를 확정하는 데 쓰고, 실제 코드에서는 값을 변수로 빼세요. 페이지마다 달라야 하는 것은 제목·설명·URL·이미지 넷이고, 사이트명·locale·카드 유형은 공통으로 두면 됩니다.

<!-- 레이아웃에서 값만 주입 (Astro 예시) -->
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={Astro.url.href} />
<meta property="og:image" content={new URL(image, Astro.site)} />

og:image는 반드시 절대 URL

/og.png 같은 상대 경로를 넣으면 대부분의 플랫폼이 이미지를 찾지 못하고 텍스트만 있는 카드로 표시합니다. 크롤러는 여러분의 페이지 밖에서 이 값을 읽기 때문에 기준이 될 주소가 없습니다. https://로 시작하는 전체 주소를 넣으세요. 위 예시에서 new URL(image, Astro.site)을 쓴 이유가 이것입니다.

캐시 때문에 한 번에 끝내는 편이 낫다

각 플랫폼은 링크를 처음 읽을 때 카드를 만들어 저장해 둡니다. 그래서 태그를 고쳐도 공유 카드는 예전 그대로인 경우가 많습니다. 디버거에서 강제로 다시 읽게 할 수 있지만, 링크가 이미 퍼진 뒤라면 이미 받은 사람들 화면까지 바꾸지는 못합니다. 배포 전에 확정해 두는 편이 안전합니다.

• 페이스북·인스타그램 — Sharing Debugger에서 "Scrape Again"
• X(트위터) — Card Validator에서 URL 재조회
• 카카오톡 — 캐시가 특히 오래 남습니다. 개발자 도구의 초기화 기능을 쓰거나, URL 뒤에 ?v=2 같은 쿼리를 붙여 다른 주소로 만드는 우회를 씁니다.
• 슬랙·디스코드 — 비교적 짧게 유지되며, 대체로 하루 안에 갱신됩니다.

이미지는 가장자리가 잘린다고 보고 만든다

권장 크기는 1200×630px이지만 플랫폼마다 비율이 조금씩 달라 가장자리가 잘려 나갑니다. 특히 카카오톡과 슬랙은 정사각형에 가깝게 자르는 경우가 있어 좌우가 많이 사라집니다. 글자와 로고는 가운데 80% 안에 배치하고, 바깥쪽은 배경만 두세요.

이미지에 넣는 글자는 크게 씁니다. 카드가 실제로 표시되는 크기는 폭 400~500px 정도라, 시안에서 적당해 보이던 24px 글자는 카드에서 10px처럼 보입니다.

시간이 없으면 이 넷만

모든 태그를 채울 필요는 없습니다. 나머지는 없어도 플랫폼이 알아서 기본값으로 처리하거나 페이지에서 추론합니다. 우선순위는 og:title, og:description, og:image, og:url 넷입니다. Twitter 카드 태그도 og: 값이 있으면 X가 그것을 대신 읽으므로, twitter:card 하나만 지정해도 큰 카드로 나옵니다.