구글 검색 결과에 내 사이트 이름과 설명이 제대로 뜨게 하는 방법.
메타태그란 무엇인지, 어떤 태그가 필요한지, 어디에 넣는지 — 복붙 한 번으로 바로 적용해요.
사용자 눈에는 안 보이지만, 구글과 소셜 미디어가 읽는 사이트의 '명함' 같은 존재예요.
메타태그(<meta>)는 HTML 문서의 <head> 안에 넣는 태그예요.
화면에 직접 표시되지는 않지만, 구글 같은 검색 엔진과 카카오톡·슬랙 같은 소셜 앱이
내 사이트를 어떻게 이해하고 표시할지 결정하는 데 쓰여요.
예를 들어 구글 검색 결과에 보이는 파란색 제목과 회색 설명 문구 — 그게 바로
<title> 태그와 meta name="description"으로 설정하는 값이에요.
카카오톡에 링크를 공유했을 때 나오는 미리보기 이미지와 제목도 메타태그가 결정해요.
구글에서 내 사이트가 어떤 제목과 설명으로 표시될지 메타태그로 직접 지정해요. 없으면 구글이 임의로 뽑아서 보여줘요.
카카오톡, 슬랙, 디스코드에 링크를 공유하면 자동으로 미리보기가 생성돼요. 이 미리보기 내용도 메타태그가 결정해요.
적절한 메타태그는 구글이 내 사이트 내용을 정확히 이해하도록 도와줘요. 검색 순위에 직간접적으로 영향을 줘요.
구글 봇에게 "이 페이지는 색인하지 마세요" 또는 "링크를 따라가세요"처럼 지시할 수 있어요. robots 메타태그로 설정해요.
메타태그는 <head> 안에 넣어요. <body> 안이나 다른 위치에 넣으면 작동하지 않아요. 항상 </head> 바로 위에 추가하는 게 가장 안전해요.
| 상황 | 메타태그 있을 때 | 없을 때 |
|---|---|---|
| 구글 검색 결과 제목 | 내가 지정한 제목 | 구글이 임의로 선택 |
| 구글 검색 결과 설명 | 내가 쓴 설명 문구 | 본문 첫 문장 자동 발췌 |
| 카카오톡 공유 미리보기 | 이미지 + 제목 + 설명 | 텍스트 URL만 표시 |
| 모바일 화면 렌더링 | 기기 너비에 맞게 최적화 | PC 화면으로 축소 렌더링 |
| 애드센스 심사 | 완성도 높은 사이트로 평가 | 감점 요인 가능 |
아래 코드를 <head> 안에 넣고, 대문자로 표시된 값만 내 것으로 바꿔주세요
<!-- ① 문자 인코딩 (가장 첫 번째에 위치) --> <meta charset="UTF-8"> <!-- ② 모바일 최적화 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- ③ 페이지 제목 (탭 + 구글 검색 제목) --> <title>페이지 제목 (50~60자 권장) | 사이트명</title> <!-- ④ 구글 검색 설명 문구 --> <meta name="description" content="이 페이지에서 무엇을 배울 수 있는지 120~160자로 설명해요."> <!-- ⑤ 검색 봇 제어 --> <meta name="robots" content="index, follow"> <!-- ⑥ 정규 URL (중복 방지) --> <link rel="canonical" href="https://yourdomain.com/this-page.html"> <!-- ⑦ 소셜 공유 미리보기 (Open Graph) --> <meta property="og:title" content="페이지 제목"> <meta property="og:description" content="공유 시 보일 설명 (2~3문장)"> <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"> <!-- ⑧ 파비콘 --> <link rel="icon" href="favicon.svg" type="image/svg+xml">
AI에게 이렇게 물어보면 내 사이트에 딱 맞는 메타태그를 바로 받을 수 있어요 👇
"내 웹사이트의 <head>에 넣을 메타태그 전체를 작성해줘. - 사이트 이름: 바이브툴킷 - 사이트 URL: https://vibetoolkit.kr/ - 현재 페이지: 파비콘 완전 정복 가이드 - 페이지 설명: SVG로 파비콘 만드는 방법을 배우는 가이드 - OG 이미지 URL: (없으면 og:image 태그 제외해줘) UTF-8, viewport, title, description, robots, canonical, og 태그 모두 포함해줘."
제목과 설명을 입력하면 구글 검색 결과와 소셜 카드가 실시간으로 미리보여요
메타태그 적용 시 가장 많이 헷갈리는 것들
메타태그를 추가해도 구글이 실제 검색 결과에 반영하는 데는 시간이 걸려요. 신규 사이트는 수일~수주, 기존 사이트도 며칠이 걸릴 수 있어요. 구글이 내 페이지를 크롤링해야 변경사항을 인식하기 때문이에요.
빠른 반영을 원한다면 Google Search Console에서 해당 URL을 직접 색인 요청하세요. URL 검사 → 색인 생성 요청 버튼을 누르면 우선순위 크롤링이 시작돼요.
또한 브라우저에서 페이지 소스를 보고(Ctrl+U) <head> 안에 메타태그가 실제로 있는지 확인해보세요. 태그가 제대로 저장되지 않았거나 잘못된 위치에 있을 수 있어요.
구글은 description 태그를 참고하지만, 사용자 검색어에 따라 더 적합한 내용이 본문에 있다고 판단하면 본문에서 직접 발췌해서 보여줘요. 이건 구글의 의도적인 동작이라 완전히 막을 수는 없어요.
최대한 구글이 내 description을 쓰게 하려면: ① 검색자가 실제로 찾는 키워드를 description에 포함하고, ② 160자 이내로 명확하게 작성하고, ③ 키워드 나열이 아닌 자연스러운 문장으로 써야 해요.
페이지마다 고유한 description을 작성하는 것도 중요해요. 모든 페이지에 똑같은 설명을 쓰면 구글이 description을 무시하는 경향이 있어요.
OG 태그를 추가했는데도 카카오톡에서 미리보기가 안 뜨는 경우, 가장 흔한 원인은 카카오 캐시예요. 카카오톡은 링크 미리보기를 한 번 캐시하면 오랫동안 저장해둬요.
카카오 개발자 도구의 OG 캐시 초기화 도구에서 URL을 입력하면 캐시를 지울 수 있어요. 그 후 다시 링크를 공유해보세요.
og:image에 반드시 https://로 시작하는 절대 경로를 써야 해요. 상대 경로(/images/og.png)는 작동하지 않아요. 또한 이미지 파일이 실제로 그 URL에 존재하는지 브라우저에서 직접 열어서 확인해보세요.
이미지 크기도 확인해야 해요. 너무 작거나 비율이 맞지 않으면 카카오톡이 표시를 거부해요. 권장 크기는 1200×630px(2:1 비율)이에요.
꼭 같을 필요는 없어요. 용도가 다르기 때문이에요. <title>은 구글 검색 결과와 브라우저 탭에 표시되고, og:title은 소셜 공유 미리보기에만 표시돼요.
보통은 <title>에 "브랜드명 | 페이지 제목" 형식을 쓰고, og:title에는 브랜드명 없이 페이지 제목만 써서 더 임팩트 있게 만드는 방법을 많이 사용해요.
둘을 동일하게 써도 전혀 문제 없어요. 처음에는 그냥 같은 값으로 시작하고, 사이트가 성장하면서 A/B 테스트로 최적화해나가는 방법을 추천해요.
charset, viewport는 모든 페이지에 필수예요. 이 두 태그는 페이지가 제대로 동작하기 위한 기본 설정이에요.
title, description은 검색 결과에 노출될 페이지라면 모두 넣는 게 좋아요. 특히 각 페이지마다 고유한 title과 description을 써야 SEO 효과가 있어요. 모든 페이지가 같은 설명이면 구글이 중복 콘텐츠로 판단할 수 있어요.
OG 태그는 외부에 공유될 가능성이 있는 페이지에 우선 적용하세요. 메인 페이지, 블로그 글, 도구 페이지 등이 우선순위예요. 감사 페이지나 에러 페이지는 우선순위가 낮아요.
<meta name="keywords">는 2009년 이후 구글이 완전히 무시하고 있어요. 예전엔 여기에 키워드를 넣으면 검색 순위에 영향을 줬지만, 스팸 남용 때문에 구글이 폐기했어요.
Naver(네이버)도 keywords 태그를 더 이상 순위 결정 요소로 쓰지 않아요. 넣어도 해가 되진 않지만 SEO 효과도 없어요. 코드를 깔끔하게 유지하고 싶다면 넣지 않는 것을 권장해요.
대신 실제 콘텐츠 안에 키워드를 자연스럽게 포함하는 게 훨씬 효과적이에요. 제목(h1, h2), 본문, 이미지 alt 속성에 핵심 키워드를 적절히 배치하세요.
메타태그를 마스터했다면 이 도구들도 도전해보세요