메타태그는 페이지의 정보를 검색엔진과 SNS에 알려주는 태그입니다. HTML의 <head> 영역에 들어갑니다. 방문자 눈에는 직접 보이지 않지만 검색결과에 표시되는 제목과 설명문, 카카오톡에 링크를 보냈을 때 뜨는 미리보기 카드가 모두 메타태그로 결정됩니다. 메타태그는 곧 내 사이트의 첫인상을 만드는 문구 작업인 셈입니다.
title과 description이 먼저입니다
title은 검색결과의 제목 줄입니다. 페이지 주제를 담되 고객이 검색할 표현을 앞쪽에 배치하고 상호명은 뒤에 붙이는 구성이 무난합니다. 예: "강남 왁싱샵 예약 안내 | ○○뷰티". 길이는 대략 30자 안팎에서 핵심이 드러나게 쓰세요. description은 제목 아래 설명문으로, 80~120자 정도로 페이지 내용과 방문할 이유를 요약합니다. 검색엔진이 항상 이 문구를 그대로 쓰지는 않습니다. 그래도 잘 쓴 설명문은 클릭률에 영향을 줍니다.
작성 예시
<title>수원 인테리어 시공 사례 | ○○디자인</title>
<meta name="description" content="수원 아파트·상가 인테리어 시공 사례를 사진과 함께 소개합니다. 평형별 예상 비용과 상담 방법 안내.">
카카오톡 미리보기를 만드는 오픈그래프
og 태그는 링크 공유 시 보이는 카드(제목·설명·이미지)를 지정합니다. og:title, og:description, og:image 세 가지가 핵심이며, 특히 og:image가 없으면 카드가 밋밋해져 클릭을 놓칩니다. 이미지는 가로형(예: 1200×630px 내외)을 권장합니다. 카카오톡은 미리보기를 한동안 저장(캐시)하므로, 이미지를 바꿨는데 예전 것이 보인다면 카카오 공유 디버거로 캐시를 갱신할 수 있습니다.
페이지마다 다르게 쓰는 것이 원칙
모든 페이지에 같은 title/description을 복사해 넣는 것은 흔하지만 아까운 실수입니다. 회사소개, 서비스, 오시는길 페이지는 각각 다른 검색어로 유입될 수 있으므로 페이지별로 맞춤 작성하세요. 반대로 keywords 메타태그는 현재 주요 검색엔진에서 순위 요소로 쓰이지 않으므로 거기에 키워드를 잔뜩 나열하는 데 시간 쓸 필요는 없습니다.
기타 알아둘 태그
<meta name="robots" content="noindex">— 이 페이지를 검색에서 제외. 개발용 페이지에만 쓰고, 실수로 전체 적용되지 않게 주의.<meta name="viewport" ...>— 모바일 화면 대응의 기본 태그로 사실상 필수.
메타태그 점검 목록
title과 description은 페이지마다 고객의 검색어를 반영해 다르게 쓰고, og 태그 특히 og:image를 챙기면 카카오톡 공유 시 클릭률이 달라집니다. noindex 오적용 같은 사고만 피하면 메타태그는 어렵지 않습니다. NOAH 패키지에는 메타태그와 카카오 미리보기 카드 세팅이 기본 포함되어 있습니다.