마크업 · 사이트 구조

공통헤더란?

모든 페이지 상단에 공통으로 들어가는 영역(로고, 메뉴, 검색창 등)입니다. 사이트 전체에 걸리는 내부링크라서, 어떤 페이지를 메뉴에 넣느냐가 사이트 구조와 크롤링 우선순위에 영향을 줍니다.

공통헤더 메뉴가 SEO에 중요한 이유

공통헤더의 링크는 사이트의 모든 페이지에 들어가므로, 메뉴에 있는 페이지는 어느 페이지에서든 한 번의 클릭으로 닿을 수 있습니다. 사이트 전체가 가리키는 페이지라서 중요하게 다뤄질 가능성이 높고 크롤러도 자주 방문합니다. 반대로 메뉴에서 빠진 페이지는 내부링크가 부족해 발견과 평가가 늦어질 수 있습니다.

그래서 메뉴 구성은 디자인의 문제가 아니라 사이트 구조 설계의 문제입니다. 검색 수요가 있는 핵심 카테고리와 서비스 페이지를 메뉴에 두고, 덜 중요한 페이지는 하위 단계로 내립니다.

공통헤더 구현 시 확인할 것

  • 메뉴 링크가 일반 <a href> 태그로 작성되어 있는지 확인합니다. 클릭 이벤트로만 이동하는 메뉴는 크롤러가 따라가지 못합니다.
  • 마우스를 올려야 펼쳐지는 메가메뉴도 링크가 처음부터 HTML에 들어 있어야 합니다. 자바스크립트로 나중에 넣으면 렌더링 이후에야 링크가 보입니다.
  • <header>와 <nav> 같은 시맨틱 태그로 감싸 본문과 구분합니다.
  • 메뉴 링크가 지나치게 많으면 각 링크의 의미가 흐려지므로, 사용자가 실제로 찾는 항목 위주로 정리합니다.

관련 용어

링크

내부링크

같은 사이트 안의 페이지끼리 연결한 링크입니다. 크롤러가 페이지를 발견하는 경로이자, 어떤 페이지가 중요한지 검색엔진에 알려주는 신호입니다. 메뉴, 브레드크럼, 본문 링크로 구성합니다.

마크업 · 사이트 구조

Boiler Plate

여러 페이지에 반복해서 들어가는 정형화된 영역이나 문구(헤더, 푸터, 사이드바, 고지문 등)입니다. 검색엔진은 반복 영역과 본문을 구분해 평가하므로, 페이지마다 고유한 본문이 충분해야 합니다.

마크업 · 사이트 구조

시맨틱 태그

<header>, <nav>, <main>, <article>, <footer>처럼 의미를 담은 HTML 태그입니다. 모양만을 위한 <div> 대신 쓰면 검색엔진과 보조기기가 페이지 구조와 각 영역의 역할을 정확히 이해합니다.

크롤링 · 색인

크롤러빌리티

크롤러가 사이트의 페이지를 얼마나 쉽게 찾아 수집할 수 있는지를 나타내는 정도입니다. 내부링크 구조, robots.txt, 서버 응답, 렌더링 방식이 영향을 줍니다. 크롤러빌리티가 낮으면 좋은 콘텐츠도 색인되지 않습니다.

관련 서비스 → SEO/GEO 교육