어떤 태그가 어디에 쓰이는가
<title>과 meta description은 검색 엔진이 결과 목록에 보여 주는 제목·요약의 재료입니다. Open Graph(og:*)는 카카오톡, 페이스북, 슬랙, 디스코드 등 대부분의 메신저·SNS가 링크 미리보기를 만들 때 읽습니다. Twitter Card(twitter:*)는 X(트위터) 전용이며, 없으면 X도 OG 태그를 대신 읽습니다. canonical은 같은 내용이 여러 주소로 열릴 때 대표 주소를 알려 중복 판정을 막습니다. 생성은 브라우저 안에서만 이루어집니다.
제목 60자, 설명 155자의 근거
검색 결과에서 제목은 픽셀 너비 기준(약 600px)으로 잘리는데, 한글·영문 혼합 기준 대략 50–60자에 해당합니다. 설명은 155–160자 부근에서 잘리며, 검색 엔진이 질의에 맞춰 본문에서 다른 문장을 뽑아 대신 쓰기도 합니다. 그래서 앞부분에 핵심 키워드와 결론을 두는 것이 안전합니다. 한글은 영문보다 글자당 폭이 넓어 같은 글자 수여도 더 일찍 잘릴 수 있습니다.
og:image 규격
1200×630px(1.91:1)이 가장 널리 통하는 크기입니다. 카카오톡은 이보다 작으면 작은 썸네일 형태로, 정사각형에 가까우면 옆에 붙는 형태로 보여 줍니다. 이미지 URL은 반드시 https 절대 경로여야 하고, 로그인 없이 접근 가능해야 하며, 8MB 이하가 안전합니다. 이미지를 바꿨는데 미리보기가 그대로라면 메신저 쪽 캐시 때문이므로 카카오 디벨로퍼스의 "링크 캐시 초기화", 페이스북 공유 디버거 같은 도구로 갱신해야 합니다.
흔한 실수
OG 태그는 name이 아니라 property 속성을 씁니다. 상대 경로 이미지(/og.png)는 대부분의 크롤러가 해석하지 못합니다. 자바스크립트로 나중에 태그를 삽입하면 크롤러가 읽지 못하므로 서버 응답 HTML에 처음부터 들어 있어야 합니다. 모든 페이지가 같은 제목·설명을 쓰면 검색 결과에서 구분이 안 되니 페이지별로 다르게 넣는 것이 원칙입니다.
자주 묻는 질문
카카오톡에 미리보기가 안 떠요.
og:title·og:image가 있는지, 이미지가 https 절대 URL인지, 페이지가 로그인 없이 열리는지 확인하세요. 이미 한 번 공유된 링크는 캐시되어 있으므로 카카오 디벨로퍼스 도구에서 캐시를 지워야 새 태그가 반영됩니다.
keywords 메타 태그는 왜 없나요?
주요 검색 엔진이 순위에 반영하지 않은 지 오래되어 넣지 않았습니다. 필요하면 직접 한 줄 추가해도 문제는 없습니다.
og:type은 무엇을 골라야 하나요?
대부분은 website면 됩니다. 블로그 글·뉴스는 article, 쇼핑몰 상품은 product를 쓰면 일부 플랫폼이 추가 정보(작성일, 가격 등)를 읽을 수 있습니다.