링크를 카카오톡이나 슬랙에 붙여 넣었을 때 나타나는 카드는 클릭률을 크게 좌우합니다. 그런데 이 카드는 페이지의 <head> 에 있는 Open Graph 태그로 결정되고, 태그를 고쳐도 각 플랫폼이 이전 정보를 캐시하고 있어 확인이 번거롭습니다.
이 도구는 og:title·og:description·og:image 값을 입력하면 구글 검색결과, X(트위터), 페이스북, 카카오톡, 슬랙, 링크드인에서 각각 어떻게 보일지 한 화면에서 미리 보여 줍니다. 기존 페이지의 <head> 를 붙여넣어 태그를 자동 추출할 수도 있고, 권장 길이를 넘겼는지 점검한 뒤 완성된 메타 태그를 복사해 갈 수 있습니다.
사용 방법
- 메타 정보 입력 또는 HTML 붙여넣기 — 직접 입력하거나, HTML `<head>` 붙여넣기 탭에서 기존 페이지의 소스를 넣고 태그 분석을 누릅니다. og 태그가 없으면
<title>과<meta name="description">을 대신 읽습니다. - 길이 점검 — 제목 옆의 카운터가 60자, 설명이 160자를 넘으면 점검 결과에 경고가 표시됩니다. 플랫폼마다 잘리는 길이가 다르므로 미리보기에서 실제로 어디서 말줄임이 생기는지 확인하세요.
- 이미지 확인 — og:image URL을 넣으면 각 카드에 실제로 불러와 표시합니다. 권장 크기는 1200×630(1.91:1)이며, 이미지가 없으면 카드가 작은 형태로 표시되어 눈에 덜 띕니다.
- 메타 태그 복사 — 생성된 메타 태그 블록을 복사해 페이지의
<head>에 붙여 넣습니다. og 태그와 트위터 카드 태그, canonical까지 함께 생성됩니다.
자주 묻는 질문
태그를 고쳤는데 카카오톡에서 예전 이미지가 계속 보입니다.
각 플랫폼이 크롤링 결과를 캐시하기 때문입니다.
카카오톡은 카카오 개발자 사이트의 캐시 초기화 도구로, 페이스북은 Sharing Debugger의 'Scrape Again', X는 Card Validator, 링크드인은 Post Inspector로 각각 갱신을 요청할 수 있습니다. 슬랙과 디스코드는 대개 몇 시간 안에 자동으로 갱신됩니다.
갱신 요청 후에도 그대로라면 이미지 URL 자체를 바꾸는 방법이 확실합니다. 파일명에 버전을 붙이거나(og-v2.png) 쿼리스트링을 더하면 새 리소스로 인식됩니다.
og:image는 어떤 규격으로 만들어야 하나요?
1200×630 픽셀, 비율 1.91:1이 사실상의 표준입니다. 대부분의 플랫폼이 이 비율을 기준으로 큰 카드를 그립니다.
파일 크기는 1MB 이하를 권합니다. 너무 크면 일부 크롤러가 가져오지 않습니다. 형식은 PNG나 JPG를 쓰세요. SVG는 대부분의 소셜 플랫폼이 지원하지 않아 카드가 비어 보입니다. WebP도 지원이 고르지 않으므로 안전하게 가려면 피하는 편이 좋습니다.
또 하나 자주 놓치는 점은 절대 URL이어야 한다는 것입니다. /og.png 같은 상대 경로는 크롤러가 해석하지 못합니다.
URL만 입력하면 자동으로 태그를 가져올 수 있나요?
브라우저의 동일 출처 정책 때문에 불가능합니다.
자바스크립트로 다른 도메인의 HTML을 가져오려면 그 서버가 CORS 헤더로 허용해야 하는데, 일반 웹사이트는 그렇게 설정하지 않습니다. 이를 우회하려면 중계 서버가 필요하고, 그러면 입력한 URL이 서버로 전송되어 이 사이트의 원칙과 어긋납니다.
대신 브라우저에서 대상 페이지를 열고 Ctrl+U 로 소스를 본 뒤 <head> 부분을 복사해 붙여 넣으면 같은 결과를 얻을 수 있습니다.
알아두면 좋은 개념
Open Graph 프로토콜
Open Graph는 2010년 페이스북이 제안한 규격으로, 웹 페이지가 자신을 어떻게 표현할지 스스로 선언하게 합니다. og:title, og:description, og:image, og:url, og:type 네다섯 개가 핵심이며 대부분의 메신저와 소셜 서비스가 이를 읽습니다.
X는 별도로 twitter:card 계열 태그를 정의했지만, 해당 태그가 없으면 og 태그로 대체합니다. 그래서 og 태그를 제대로 갖추고 twitter:card 만 추가로 지정하면 대부분의 플랫폼을 커버할 수 있습니다.
제목과 설명의 실질적 길이 제한
검색결과 제목은 픽셀 폭 기준으로 잘리므로 글자 수는 어림값입니다. 영문은 약 60자, 한글은 폭이 넓어 약 30자 안팎에서 말줄임이 생깁니다. 설명은 영문 약 160자, 한글 약 80자 선입니다.
중요한 키워드와 메시지를 앞쪽에 배치하는 것이 핵심입니다. 뒤가 잘려도 의미가 전달되도록 쓰면, 잘리는 길이가 플랫폼마다 달라도 안전합니다. 브랜드명을 제목 앞에 붙이는 관행은 그 자리를 차지해 정작 중요한 내용을 밀어내므로 재고할 만합니다.
동적 OG 이미지 생성
글마다 다른 OG 이미지를 손으로 만드는 것은 현실적이지 않습니다. 그래서 제목을 이미지로 렌더링해 자동 생성하는 방식이 널리 쓰입니다.
Next.js의 ImageResponse, Vercel의 OG Image Generation, Cloudflare Workers의 이미지 생성이 대표적입니다. 이 사이트도 도구마다 다른 OG 이미지를 빌드 시점에 생성합니다. 주의할 점은 한글·일본어 텍스트를 넣으려면 해당 글리프를 담은 폰트를 명시적으로 제공해야 한다는 것입니다. 기본 폰트만으로는 글자가 빈 사각형으로 나옵니다.