마크업 · 사이트 구조 용어

검색엔진이 페이지의 구조와 의미를 이해하도록 돕는 HTML 마크업, 구조화 데이터, 사이트 탐색 구조에 관한 용어입니다.

마크업

HTML처럼 태그로 문서의 구조와 의미를 표시하는 것, 또는 그렇게 작성한 코드입니다. 검색엔진은 마크업을 읽고 제목·본문·링크·이미지를 구분합니다.

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

<h1>~<h6> 태그로 표시하는 제목과 소제목입니다. 문서의 계층 구조를 나타내며, h1은 페이지 주제를 드러내는 제목으로 페이지당 하나를 쓰는 것이 일반적입니다. 글자를 키우려는 용도로 쓰지 않습니다.

<head> 안에 작성해 페이지 정보를 검색엔진과 브라우저에 전달하는 데이터입니다. 타이틀 태그, 메타 디스크립션, 메타 로봇, 뷰포트, OG 태그 등이 있으며, 타이틀과 디스크립션은 검색 결과의 제목·설명으로 쓰일 수 있습니다.

이미지 내용을 텍스트로 설명하는 alt 속성입니다(정확히는 태그가 아니라 <img>의 속성). 이미지를 볼 수 없는 사용자와 검색엔진이 이미지를 이해하는 근거가 되며, 이미지 검색 노출에도 영향을 줍니다.

브라우저 탭과 즐겨찾기, 검색 결과의 사이트 이름 옆에 표시되는 작은 아이콘입니다. 구글 검색 결과에 표시되려면 정사각형(1:1) 비율이어야 하며, 구글은 48×48px보다 큰 이미지를 권장합니다.

페이지 정보를 검색엔진이 정확히 해석할 수 있도록 정해진 형식으로 표기한 데이터입니다. schema.org 어휘와 JSON-LD 형식이 표준이며, 리치 결과 노출과 엔티티 이해에 쓰입니다. 화면에 보이는 내용과 일치해야 합니다.

schema.org 어휘로 페이지 내용(회사, 상품, FAQ, 아티클 등)을 표시한 구조화 데이터 코드입니다. 보통 JSON-LD로 작성하며, 조건을 충족하면 검색 결과에 리치 결과로 노출될 수 있습니다.

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

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

"홈 > 카테고리 > 현재 페이지"처럼 현재 위치를 계층으로 보여주는 탐색 경로입니다. 사용자와 검색엔진에 사이트 구조를 알려주며, BreadcrumbList 구조화 데이터를 함께 쓰면 검색 결과의 URL 표시에 반영될 수 있습니다.

목록을 1, 2, 3… 페이지로 나누는 방식입니다. 페이지마다 고유 URL을 주고 일반 <a> 링크로 연결해야 크롤러가 뒤쪽 페이지의 항목까지 발견할 수 있습니다.

쇼핑몰 목록의 색상·사이즈·가격 같은 다중 조건 필터입니다. 조합마다 URL이 생기면 크롤링할 URL이 기하급수적으로 늘어나므로, 검색 수요가 있는 조합만 색인하고 나머지는 크롤링·색인을 제한합니다.

페이지 하단에 닿으면 다음 콘텐츠를 자동으로 불러오는 방식입니다. 크롤러는 스크롤하지 않으므로 추가로 불러온 콘텐츠를 발견하지 못할 수 있어, 페이지별 고유 URL(페이지네이션)을 함께 제공해야 합니다.

모바일에서 페이지를 빠르게 표시하려고 구글 주도로 만든 경량 HTML 프레임워크입니다. 2021년 구글 "주요 뉴스" 노출 조건에서 AMP가 빠지면서 새로 도입할 이유는 크게 줄었습니다.