메타 디스크립션과 og:description, 왜 다른 태그일까
검색엔진용 메타 디스크립션 하나만 정성껏 써 두면 카카오톡이나 페이스북에 공유했을 때도 같은 문구가 나올 거라고 생각하기 쉽습니다. 하지만 <meta name="description">과 og:description, twitter:description은 서로 다른 크롤러가 각자 읽는 별개의 태그입니다. 셋 중 하나만 채워두면 나머지 플랫폼에서는 설명 칸이 비거나 예상 밖의 문장으로 채워질 수 있습니다.
요약 ①
<meta name="description">은 구글 같은 검색엔진이 검색결과 설명 후보로 참고하는 태그입니다. ②og:description은 카카오톡·페이스북처럼 오픈그래프 규격을 읽는 플랫폼 전용 태그입니다. ③twitter:description이 비어 있으면 트위터(X)는og:description값을 대신 가져다 씁니다.
검색 결과와 공유 카드에 설명이 다르게 나오는 이유
블로그 글이나 상품 페이지를 배포할 때 <meta name="description"> 태그 하나만 신경 써서 채우고 넘어가는 경우가 많습니다. 구글 검색결과에는 원하는 문구가 그대로 나오니 설명은 다 됐다고 여기기 쉽습니다.
그런데 같은 링크를 카카오톡 대화방에 붙여 보면 설명 칸이 텅 비어 있거나, 본문 아무 문장이나 잘려 나온 모습을 보게 됩니다. 코드를 다시 봐도 <meta name="description">은 멀쩡히 들어 있는데도 그렇습니다.
원인은 간단합니다. 구글은 <meta name="description">을 보지만, 카카오톡·페이스북 같은 오픈그래프 소비 플랫폼은 이 태그를 아예 보지 않고 og:description만 찾습니다. 이름만 비슷할 뿐 완전히 독립된 값입니다.
세 태그를 직접 확인하는 방법 — 페이지 소스 보기
가장 확실한 확인 방법은 도구 없이도 할 수 있습니다. 문제의 페이지를 열고 마우스 오른쪽 버튼 → 페이지 소스 보기(윈도우 Ctrl+U, 맥 Cmd+Option+U)를 누른 뒤 Ctrl+F로 description을 검색합니다.
<head> 안에서 name="description", property="og:description", name="twitter:description" 이 세 줄이 각각 따로 있는지 확인합니다. 이름과 값이 있는데도 특정 플랫폼에서 설명이 안 보인다면, 그 플랫폼이 읽는 태그 자체가 없다는 뜻입니다.
터미널을 쓸 수 있다면 curl -s 주소 | grep description 한 줄로 같은 결과를 더 빨리 볼 수 있습니다.
저희 도구로 확인하기. 태그 세 개를 직접 손으로 맞추다 보면 여닫는 따옴표 하나만 빠져도 태그가 깨집니다. 설명 문구를 한 번만 입력하면 세 태그에 그대로 나눠 넣어 주는 쪽이 더 빠릅니다.
무료 · 회원가입 없음 · 제목·설명을 한 번만 입력하면 SEO·오픈그래프·트위터 태그를 함께 생성
제목과 설명을 한 번 입력하면 <meta name="description">·og:description·twitter:description 세 줄에 같은 문구가 동시에 채워진 코드가 만들어집니다. 사이트 이름·트위터 계정처럼 태그별로 다른 값이 필요한 항목만 따로 입력하면 됩니다.
자주 막히는 지점
| 증상 | 원인 |
|---|---|
| 구글 검색결과는 정상인데 카톡 설명만 비어 있음 | og:description 태그 자체가 없음 |
| 트위터에 공유하면 다른 문장이 나옴 | twitter:description이 og:description과 다른 값으로 따로 채워져 있음 |
og:description을 지웠는데도 트위터 카드엔 설명이 남아 있음 | twitter:description이 남아 있어 그 값을 그대로 사용 |
| 세 태그 다 있는데도 플랫폼마다 다른 문구가 나옴 | 태그별로 실제 값이 다르게 입력된 정상적인 경우 |
정리
<meta name="description">은 검색엔진용, og:description은 오픈그래프 플랫폼용으로 서로 안 보는 별개의 태그입니다. twitter:description이 비어 있으면 og:description 값을 대신 쓰지만, og:description마저 없으면 검색엔진용 태그를 대신 봐주지 않습니다.
셋 다 같은 문구를 넣어도 규격 위반이 아니며, 실제로 대부분의 사이트가 그렇게 합니다. 플랫폼마다 다르게 나오는 문제는 태그가 아예 없어서인지, 값이 실제로 다르게 들어있어서인지부터 페이지 소스에서 구분하면 됩니다.
무료 · 회원가입 없음 · 제목·설명을 한 번만 입력하면 SEO·오픈그래프·트위터 태그를 함께 생성
자주 묻는 질문
og:description을 안 쓰면 정말 문제가 되나요?
비워두면 페이스북·카카오톡 같은 오픈그래프 플랫폼이 대체 문구를 자체적으로 추정해서 채웁니다. 보통 페이지 본문 텍스트 일부를 가져오므로 어떤 문장이 뽑힐지 예측하기 어렵습니다. 원하는 문구를 보여주려면 직접 지정하는 편이 안전합니다.
설명 세 개를 전부 다른 문장으로 써야 하나요?
그럴 필요는 없습니다. 대부분의 사이트는 같은 문장을 세 태그에 반복해서 넣습니다. 다만 검색결과용 문장과 공유 카드용 문장의 목적을 다르게 두고 싶다면 따로 써도 규격상 문제는 없습니다.
트위터(X)에 twitter:description을 안 넣으면 어떻게 되나요?
og:description 값이 있으면 그 값을 대신 사용합니다. 트위터 카드 규격 자체가 twitter: 전용 태그가 비어 있으면 같은 이름의 오픈그래프 태그 값으로 대체하도록 설계돼 있기 때문입니다. og:description마저 없으면 카드에서 설명 칸이 비어 보일 수 있습니다.
메타 디스크립션은 글자 수가 몇 자가 적당한가요?
구글 검색결과는 흔히 150~160자 내외에서 잘립니다. 다만 실제 기준은 글자 수가 아니라 화면에 표시되는 폭이므로, 짧아도 잘리거나 길어도 안 잘리는 경우가 있습니다.