메타태그 설정, 넣을 5가지와 제목·설명 길이

메타태그는 페이지 머리(head) 부분에 넣어 검색엔진과 메신저에 그 페이지가 무엇인지 알려 주는 짧은 코드입니다. 꼭 챙길 것은 다섯 가지 — 제목(title) · 설명(description) · 공유 미리보기(og) · 대표 주소(canonical) · 수집 규칙(robots)입니다. 제목은 핵심 낱말을 앞에 두고 페이지마다 다르게 쓰고, 설명은 그 페이지에서만 얻는 것을 한두 문장으로 적습니다. keywords 태그는 구글이 쓰지 않는다고 공식 문서에 적혀 있어 시간을 들일 곳이 아닙니다.

메타태그 — 무엇을 넣나요

엄밀히 말하면 제목(title)은 meta 태그가 아닌 별도 요소이고 canonical 은 link 태그입니다. 다만 모두 head 안에 들어가 검색 결과와 공유 카드에 쓰이므로 실무에서는 함께 메타태그라고 부릅니다. 다섯 가지를 하는 일과 예시 코드로 정리했습니다.

og 는 오픈 그래프(Open Graph) 규격의 줄임말입니다. 규격 문서는 og:title · og:type · og:image · og:url 네 가지를 기본 속성으로, og:description 을 선택 속성으로 두고, 이미지를 넣으면 무엇이 보이는지 적는 og:image:alt 도 함께 넣으라고 안내합니다. 이미지 크기와 잘리는 자리는 공유 카드 이미지와 파비콘, 어떤 크기로 만드나에 정리해 두었습니다.

robots 는 아무것도 적지 않으면 색인이 허용된 상태라 일반 페이지에는 넣지 않습니다. 주문 완료 · 장바구니 · 사이트 안 검색 결과처럼 검색에 나올 필요가 없는 페이지에만 noindex 를 넣습니다. 이때 robots.txt 로 그 페이지 접근까지 막으면 검색엔진이 noindex 를 읽지 못하므로, noindex 를 쓰는 페이지는 접근을 열어 둡니다.

canonical 은 구글이 강한 신호로 받아들이지만, 비슷한 페이지가 여럿이면 구글이 다른 주소를 대표로 고를 수도 있습니다. 공식 문서는 대표 페이지 자신에게도 자기 주소를 canonical 로 넣고, 상대 주소 대신 전체 주소를 쓰라고 권합니다. 색상 · 정렬 값이 주소 뒤에 붙어 같은 상품이 여러 주소로 열리는 쇼핑몰에서 특히 챙깁니다.

제목 · 설명은 몇 자로 쓰나요

구글 문서는 제목과 설명 모두 길이 제한이 없다고 적고, 대신 검색 결과에서 기기 화면 폭에 맞춰 잘린다고 설명합니다. 그래서 글자 수보다 표시 폭으로 재는 편이 맞습니다. 한글은 영문 · 숫자 · 공백보다 두 배 넓은 자리를 차지해, 같은 글자 수라도 한글 제목이 먼저 잘립니다.

아래는 잘림을 줄이려고 잡는 작업 기준입니다. 구글이 정한 수치가 아니라 예시로 정한 값이고, 폭은 한글 2 · 영문과 숫자와 공백 1로 셉니다.

• 제목 — 폭 60 안(한글만이면 30자 안팎). 핵심 낱말은 앞 20폭 안에 두고, 회사 이름은 끝에 구분 기호(| · —)와 함께 짧게 붙입니다.
• 설명 — 폭 150 안(한글만이면 75자 안팎). 첫 문장에 답을, 둘째 문장에 그 페이지에만 있는 것(표 · 가격 · 계산 예)을 적습니다.
• 공유 카드 제목(og:title) — 제목에서 회사 이름을 뺀 판. 페이스북 개발자 문서도 og:title 에는 사이트 이름 같은 브랜딩을 빼라고 안내합니다.

페이지 유형별로 채운 예시입니다. 가상의 그래놀라 쇼핑몰 A 브랜드를 가정했고, 마지막 칸은 위 기준으로 잰 제목 폭 · 설명 폭입니다.

세 예시는 모두 페이지마다 다른 낱말로 시작합니다. 구글은 페이지마다 고유한 제목을 쓰고, 같은 낱말을 되풀이해 채우지 말고, 회사 이름은 앞이나 끝에 구분 기호와 함께 짧게 붙이라고 안내합니다. 메인처럼 회사 이름 자체가 내용인 페이지만 이름을 앞에 둡니다.

메타태그 설정 방법 — 어디에 넣나요

직접 만든 사이트라면 모든 페이지가 함께 쓰는 머리 틀(템플릿)의 head 안에 넣고, 상품 · 글처럼 늘어나는 페이지는 페이지마다 제목 · 설명 값을 받아 채우도록 만들어 둡니다. 상품 페이지 하나를 예로 들면 이렇게 됩니다.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>무가당 그래놀라 500g — 귀리 · 아몬드 | A 브랜드</title>
  <meta name="description" content="귀리 · 아몬드 · 코코넛을 구운 무가당 그래놀라 500g입니다. 원재료 표와 1회 분량 계산 예, 개봉 뒤 보관법을 함께 적었습니다.">
  <link rel="canonical" href="https://example.com/product/granola-500g">
  <meta property="og:type" content="website">
  <meta property="og:title" content="무가당 그래놀라 500g — 귀리 · 아몬드">
  <meta property="og:description" content="원재료 표와 1회 분량 계산 예, 개봉 뒤 보관법을 함께 적었습니다.">
  <meta property="og:url" content="https://example.com/product/granola-500g">
  <meta property="og:image" content="https://example.com/og/granola-500g.jpg">
  <meta property="og:image:alt" content="유리병에 담긴 그래놀라와 아몬드">
</head>

앞의 두 줄(charset · viewport)은 글자 깨짐을 막고 휴대폰 화면 폭을 맞추는 기본 줄로, 빌더를 쓰면 보통 자동으로 들어갑니다. 빌더에서는 코드 대신 관리자 화면의 칸을 채웁니다.

메타태그 확인하는 법은 무엇인가요

넣은 뒤에는 세 군데에서 확인합니다. 순서대로 하면 10분 안쪽입니다.

1. 페이지 소스 보기 — 페이지에서 오른쪽 클릭 → 페이지 소스 보기를 열고, 찾기(Ctrl+F · 맥은 Cmd+F)로 <title · description · og:image · canonical · robots 를 차례로 찾습니다. 소스에는 없고 개발자 도구에서만 보이면 페이지가 열린 뒤 스크립트로 넣는 방식이라, 공유 카드 수집기가 읽지 못하는 경우가 있어 개발 담당에게 확인합니다.
2. 공유 미리보기 점검 도구 — 페이스북 개발자 사이트의 공유 디버거(Sharing Debugger)에 주소를 넣으면 수집기가 읽은 태그와 오류가 보이고, 다시 수집을 눌러 저장된 미리보기를 새로 고칠 수 있습니다. 카카오 개발자 사이트(로그인 필요)와 링크드인(Post Inspector)에도 같은 용도의 도구가 있습니다.
3. 서치콘솔 URL 검사 — 페이지가 선언한 대표 주소와 구글이 고른 대표 주소, 색인 허용 여부가 함께 보입니다. 두 대표 주소가 다르면 중복 페이지가 있는지부터 봅니다. 서치콘솔 등록 순서는 구글 서치콘솔 등록 방법 5단계에 있습니다.

확인한 결과는 페이지 주소 · 제목 · 설명 · og:image · canonical · robots 여섯 칸 표에 적어 둡니다. 다음에 페이지를 개편하거나 빌더를 옮길 때 이 표가 그대로 점검표가 됩니다.

자주 묻는 질문

keywords 메타태그는 넣어야 하나요?

구글 검색 센터 문서는 meta keywords 태그를 구글 검색이 쓰지 않으며 색인과 순위에 아무 영향이 없다고 적고 있습니다. 빌더에 키워드 칸이 있으면 브랜드 이름 정도만 적고 넘어가고, 그 시간에 제목과 설명을 페이지마다 다르게 고칩니다. 다른 검색엔진이 이 태그를 어떻게 다루는지는 각 검색엔진의 안내 문서에서 확인합니다.

설명을 적었는데 구글에는 다른 문장이 뜹니다. 왜 그런가요?

구글은 설명이 페이지를 더 정확하게 보여 줄 때 설명을 쓰고, 그렇지 않으면 본문에서 문장을 골라 보여 줍니다. 검색어에 따라 같은 페이지라도 다른 문장이 뜰 수 있습니다. 설명 첫 문장이 그 페이지 내용을 그대로 요약하는지, 낱말만 나열하지 않았는지 다시 봅니다 — 공식 문서도 낱말을 길게 나열한 설명을 나쁜 예로 듭니다.

제목 · 설명을 바꾸면 검색 결과에 언제 반영되나요?

구글 문서는 제목을 바꾼 뒤 반영되기까지 며칠에서 몇 주가 걸릴 수 있다고 안내합니다. 서치콘솔 URL 검사에서 다시 수집을 요청할 수 있지만 하루에 요청할 수 있는 수에 한도가 있어, 바꾼 페이지가 많으면 사이트맵을 다시 제출합니다. 메신저 · SNS의 공유 카드는 각 서비스가 저장해 둔 미리보기가 있어, 공유 디버거에서 다시 수집을 눌러 새로 고칩니다.

모든 페이지에 같은 설명을 넣어도 되나요?

권하지 않습니다. 구글 문서는 모든 페이지가 같거나 비슷한 설명을 쓰면 검색 결과에서 도움이 되지 않는다고 적고, 메인 · 목록 페이지에는 사이트 전체 설명을, 나머지 페이지에는 그 페이지만의 설명을 쓰라고 권합니다. 상품이 수백 개라 손으로 쓰기 어려우면 상품명 · 용량 · 특징 칸을 조합해 자동으로 만드는 방식도 공식 문서가 괜찮은 방법으로 듭니다.

오늘 할 일

메인 · 가장 많이 들어오는 상품(또는 글) · 문의 페이지 세 곳의 소스를 열어 title · description · og:image · canonical 네 줄이 있는지, 세 페이지의 제목과 설명이 서로 다른지 확인해 표에 적으십시오. 빠진 줄과 겹친 문장부터 고치면 됩니다.

이어서 읽기 — 랜딩페이지 제작, 10칸 구성표와 업종별 예시 · 이메일 서명, 6칸 양식과 예시 3개·로고 크기 · 웹폰트 적용, 한글 용량 줄이는 법과 확장자 표 · robots.txt 작성법, 예시 6개와 차단 확인 순서 · 구글 비즈니스 프로필 등록, 영상 인증 준비표 · 홈페이지 팝업, 사이즈표와 조건·문구 예시 6개