카카오톡·슬랙·트위터에 링크를 공유했을 때
멋진 미리보기 카드가 뜨게 만드는 방법 — OG 태그 6줄로 완성해요.
링크 공유 시 자동으로 생성되는 미리보기 카드의 비밀
카카오톡 단톡방에 링크를 붙여넣으면 제목, 설명, 이미지가 예쁜 카드 형태로 뜨는 걸 본 적 있죠?
그게 바로 오픈그래프(Open Graph) 태그 덕분이에요.
페이스북이 2010년에 만든 프로토콜로, 웹 페이지가 소셜 미디어에서 어떻게 표시될지를
HTML <head> 안의 <meta> 태그로 미리 정의하는 방식이에요.
OG 태그가 없으면 카카오톡, 슬랙, 트위터, 링크드인은 제목과 이미지를 알아서 추측해요. 그러면 엉뚱한 이미지가 뜨거나, 제목이 잘리거나, 아무것도 뜨지 않는 최악의 상황이 생겨요. OG 태그를 정확하게 설정하면 어떤 플랫폼에서 공유해도 의도한 대로 깔끔한 카드가 표시돼요.
링크를 붙여넣으면 og:title, og:image, og:description을 읽어 미리보기 카드를 생성해요. OG 태그 없으면 빈 카드가 돼요.
팀 채널에 공유 시 링크가 자동으로 언폴딩(unfurling)돼요. OG 이미지가 설정되면 채팅창에서 바로 미리보기가 보여요.
twitter:card 태그를 추가하면 트위터 전용 큰 이미지 카드가 나타나요. og 태그와 별도로 twitter 전용 태그가 있어요.
구글은 OG 태그를 직접 랭킹에 반영하진 않지만, 소셜 공유 증가 → 유입 증가 → 간접적인 SEO 효과로 이어져요.
OG = Open Graph Protocol. 페이스북이 2010년 공개한 표준이에요. 지금은 카카오톡, 슬랙, 트위터, 링크드인, 디스코드, 텔레그램 등 거의 모든 플랫폼이 이 표준을 따라요. 한 번 제대로 설정해두면 모든 플랫폼에서 효과를 볼 수 있어요.
AI에게 "내 사이트 OG 태그를 작성해줘. 사이트 이름은 [이름], 설명은 [설명], 대표 이미지 URL은 [URL]이야"라고 하면 전체 코드를 바로 써줘요. 이 페이지 ④ 만들어보기에서 직접 미리보기를 확인하면서 작성해도 좋아요.
<head> 안에 붙여넣고 대괄호 부분만 바꾸면 끝이에요
<!-- ✅ 기본 OG 태그 (필수) --> <meta property="og:title" content="[페이지 제목]"> <meta property="og:description" content="[페이지 설명 — 1~2문장]"> <meta property="og:image" content="https://yourdomain.com/og-image.png"> <meta property="og:url" content="https://yourdomain.com/this-page.html"> <!-- 📌 추가 권장 태그 --> <meta property="og:type" content="website"> <meta property="og:site_name" content="[사이트 이름]"> <meta property="og:locale" content="ko_KR"> <!-- 🐦 트위터(X) 전용 태그 --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="[페이지 제목]"> <meta name="twitter:description" content="[페이지 설명]"> <meta name="twitter:image" content="https://yourdomain.com/og-image.png">
적용 순서: ① 코드를 복사해서 <head>...</head> 안에 붙여넣기 → ② 대괄호 부분을 내 사이트에 맞게 수정 → ③ 배포 후 Facebook Sharing Debugger 또는 Twitter Card Validator에서 확인.
입력하는 즉시 카카오톡 스타일 카드로 미리볼 수 있어요
OG 태그 설정 시 가장 많이 헷갈리는 것들
1200×630px이 가장 널리 권장되는 크기예요. 비율로는 약 1.91:1이에요. 이 크기면 카카오톡, 페이스북, 링크드인 등 대부분의 플랫폼에서 이미지가 잘리지 않고 그대로 표시돼요.
트위터(X)는 2:1 비율(1200×600px)이 최적이에요. 하나의 이미지로 모든 플랫폼을 커버하고 싶다면 1200×630px을 사용하되, 이미지의 중앙 부분에 핵심 내용을 배치하세요. 플랫폼마다 잘리는 방식이 달라서 가장자리에 중요한 내용을 두면 잘릴 수 있어요.
이미지 파일 크기는 8MB 이하로 유지하세요. 카카오톡은 너무 큰 이미지를 불러오지 않는 경우가 있어요. JPEG 형식으로 저장하면 용량을 줄일 수 있어요.
카카오톡을 포함한 대부분의 플랫폼은 OG 정보를 캐시에 저장해요. 한 번 읽어간 정보를 며칠~몇 주 동안 그대로 사용해요. 수정 후 즉시 반영이 안 되는 게 정상이에요.
캐시를 강제로 갱신하는 방법은 플랫폼마다 달라요. 페이스북은 공유 디버거(Sharing Debugger)에서 URL을 입력하고 '다시 스크랩(Scrape Again)' 버튼을 누르면 즉시 갱신돼요. 카카오톡은 공식 캐시 초기화 도구는 없지만, 시간이 지나면(보통 24시간 이내) 자동으로 갱신돼요.
급하게 갱신이 필요하다면 URL에 쿼리스트링을 추가하는 임시방편을 쓸 수 있어요. ?v=2처럼 URL을 약간 다르게 만들면 새 URL로 인식해 캐시 없이 읽어가요. 단, 이 방법은 분석 도구에서 데이터가 분산될 수 있어요.
가장 많이 쓰는 값은 다음과 같아요:
website — 일반 웹사이트나 랜딩 페이지. 특별한 경우가 아니면 이 값을 사용하세요.
article — 블로그 포스트, 뉴스 기사 등. article:published_time 같은 추가 태그와 함께 사용해요.
product — 쇼핑몰 상품 페이지. 가격, 재고 등 추가 정보를 메타태그로 제공할 수 있어요.
video.movie / video.episode — 영상 콘텐츠.
music.song / music.album — 음악 콘텐츠.
일반적인 바이브 코딩 프로젝트는 대부분 website로 충분해요. 블로그를 운영한다면 글 페이지에만 article을 사용하고, 메인 페이지는 website를 사용하면 돼요.
og:image가 없으면 플랫폼이 페이지 내 이미지를 자동으로 선택해요. 카카오톡은 보통 페이지에서 가장 큰 이미지를 선택하는데, 의도치 않은 이미지(광고 배너, 작은 아이콘 등)가 뜰 수 있어요.
이미지가 전혀 없으면 텍스트만 있는 작은 링크 카드로 표시돼요. 시각적 임팩트가 크게 떨어져서 클릭률이 낮아져요. 적어도 사이트 로고나 기본 이미지라도 설정하는 것을 강력히 권장해요.
모든 페이지에 동일한 기본 이미지를 사용하고, 중요한 페이지(랜딩, 블로그 포스트)에는 개별 이미지를 만들어 설정하는 방식이 현실적이에요. Canva나 Figma로 1200×630px 템플릿을 만들어두면 새 콘텐츠마다 빠르게 OG 이미지를 제작할 수 있어요.
트위터(X)는 twitter:* 태그를 우선으로 읽고, 없으면 og:* 태그를 대신 사용해요. 즉, twitter:title이 있으면 그 값을, 없으면 og:title 값을 사용해요.
따라서 og:* 태그만 제대로 설정해도 트위터에서 기본적인 카드 표시는 돼요. 단, twitter:card 태그는 반드시 있어야 커다란 이미지 카드 형태로 표시돼요. 이 태그가 없으면 작은 썸네일만 나타나요.
가장 효율적인 방법은 og:* 태그를 기본으로 설정하고, twitter:card만 추가해서 큰 카드 형태를 지정하는 거예요. 트위터에 특별히 다른 제목·이미지를 보여주고 싶을 때만 나머지 twitter:* 태그도 추가하세요.
OG 태그를 마스터했다면 이것들도 도전해보세요