AI 에이전트가 페이지를 읽을 때 보는 것은 화면이 아니라 DOM 트리입니다. 여러 겹의 <div>로 만든 아름다운 레이아웃도 분석기에는 의미 없는 컨테이너 묶음일 뿐입니다. 같은 문단이라도 시맨틱 태그로 바꾸면 추출 정확도가 크게 달라집니다. 시맨틱 HTML은 접근성을 위한 부가 요소가 아닙니다. AI 엔진이 콘텐츠를 깔끔하게 인용하도록 만드는 가장 비용 효율적인 기반입니다.
AI 에이전트가 시맨틱 태그를 특히 잘 활용하는 이유
Google AI Overview, Perplexity 또는 ChatGPT가 URL을 크롤링할 때 그 이면에서는 HTML을 일반 텍스트로 변환하는 파이프라인이 작동합니다. 이 과정에서 스타일은 사라지지만 구조는 남습니다. <h1>은 페이지의 주제를 알리고, <article>은 본문 범위를 지정하며, <nav>와 <footer>는 반복 템플릿 영역으로 분류돼 제외됩니다. 올바른 태그를 선택하면 모델이 핵심 내용을 파악하는 데 직접적인 도움이 됩니다. 반대로 모든 태그가 div라면 모델은 글자 수와 위치, 때로는 운에 의존해 인용할 문단을 추측해야 합니다.
차이는 추출 결과에 대한 신뢰도에서 드러납니다. <main><article>로 감싸고 <h2> 계층을 일관되게 구성한 콘텐츠는 경계가 명확한 하나의 단위이므로 파서가 온전히 추출할 수 있습니다. 이를 <div class="content-wrapper-2">로 바꾸는 순간 같은 텍스트에서도 구조적 신호가 모두 사라집니다. 고객사의 GEO를 진단할 때 가장 자주 발견하는 브랜드 노출 문제도 콘텐츠 품질이 아닙니다. 좋은 콘텐츠가 의미 없는 중첩 div에 묻혀 AI 엔진이 인용 가능한 문단을 깔끔하게 분리하지 못하는 경우가 더 많습니다.
태그는 모양이 아니라 ‘의미’를 나타냅니다
시맨틱의 핵심은 하나입니다. 각 태그는 콘텐츠가 어떻게 보이는지가 아니라 어떤 ‘역할’을 하는지 선언합니다. <button>은 동작을 실행하는 요소, <a>는 다른 위치로 이동하는 요소, <ul>은 서로 연관된 항목의 집합을 뜻합니다. 이 의미는 브라우저와 스크린 리더, AI 분석기가 함께 읽습니다. 태그를 고를 때는 ‘어떻게 보이게 할까?’가 아니라 ‘이 콘텐츠의 본질은 무엇인가?’를 물어야 합니다.
- <main>: 페이지 전체에서 하나만 사용합니다. ‘이 페이지가 실제로 다루는 핵심 내용’을 표시해 파서가 헤더, 사이드바, 푸터를 바로 건너뛸 수 있게 합니다.
- <article>: 별도로 추출해도 의미가 완결되는 독립 콘텐츠 단위입니다. 게시글, FAQ, 제품 카드 등이 여기에 해당합니다.
- <h1>~<h6>: 페이지의 목차 역할을 합니다. 글자 크기를 맞추려고 단계를 건너뛰지 말고 계층을 연속적으로 구성해야 합니다.
- <nav>: 탐색 링크 영역입니다. 이 영역이 본문이 아니라 메뉴임을 엔진에 알려 줍니다.
- 제목이 있는 <section>: 하나의 주제를 다루는 문단 묶음이며, 일반적으로 제목과 함께 사용합니다.
- <table>, <thead>, <th>: 실제 표 데이터에는 표 태그를 사용하고, 레이아웃을 만들기 위해 div를 쓰지 않습니다. AI가 표로 추출할 수 있는 구조적 근거가 바로 이 태그들입니다.
- <time datetime>과 <address>: 날짜와 연락처 정보를 기계가 직접 읽을 수 있는 필드로 만듭니다.
간단한 자체 점검법이 있습니다. 태그 이름을 소리 내어 읽었을 때 콘텐츠의 본질을 설명하는지 확인해 보세요. 클릭하면 동작하는 요소에 <div>를 썼다면 그 이름은 그저 ‘컨테이너’일 뿐이므로 잘못된 선택입니다. 여기에는 <button>이 맞습니다. 모양은 CSS에 맡기고 태그는 의미만 명확히 해야 합니다. 두 역할을 분리해야 기계도 정확히 읽을 수 있습니다.
가장 흔한 함정: div 수프와 뒤엉킨 제목 계층
실무에서 반복되는 문제 유형은 몇 가지로 정해져 있습니다. 페이지 전체가 div와 span으로만 구성되고 시맨틱 태그가 하나도 없는 상태를 ‘div 수프’라고 합니다. 한 페이지에 <h1>이 여러 개 있거나, 글자 크기를 맞추려고 <h2> 대신 <h4>를 쓰면 제목 계층이 무너져 모델이 잘못된 개요를 생성합니다. <br> 줄바꿈으로 억지로 만든 ‘목록’이나 <div onclick>으로 흉내 낸 버튼도 흔합니다. 화면에서는 차이가 없어 보여도 DOM에는 아무런 의미가 남지 않습니다.
페이지를 시맨틱 구조로 전환하는 순서
웹사이트 전체를 한 번에 다시 만들 필요는 없습니다. 검색 노출에 가장 중요한 페이지 하나를 골라 아래 순서대로 수정하면 금방 감을 잡을 수 있습니다.
- 큰 골격부터 잡습니다. 페이지 전체에 <main>이 정확히 하나만 있는지 확인하고, 헤더와 탐색 영역, 푸터를 각각 <header>, <nav>, <footer>로 감쌉니다.
- 제목 계층을 바로잡습니다. 페이지마다 <h1>은 하나만 두고, <h3>은 반드시 <h2> 아래에 배치해 단계를 건너뛰지 않습니다. 브라우저 플러그인이나 명령어로 문서 개요를 출력해 점검합니다.
- 본문을 <article>로 감쌉니다. FAQ, 절차, 정의처럼 독립적으로 인용될 수 있는 각 콘텐츠 단위의 경계를 명확히 합니다.
- 가짜 컴포넌트를 교체합니다. <div onclick>은 <button>으로, 페이지 이동용 가짜 버튼은 <a href>로 바꿉니다.
- 데이터 구조를 맞춥니다. 표에는 <table>, 목록에는 <ul> 또는 <ol>, 날짜에는 <time>을 사용합니다.
- label과 alt를 추가합니다. 폼 컨트롤에는 <label for>, 이미지에는 alt를 적용해 기계와 스크린 리더가 같은 의미를 읽도록 합니다.
기계가 실제로 이해하는지 검증하는 방법
수정이 끝났다고 감에 의존해서는 안 됩니다. 가장 빠른 방법은 브라우저의 ‘읽기 모드’를 켜는 것입니다. Safari나 Firefox의 읽기 화면이 본문을 깔끔하게 추출하는지 확인하세요. 제대로 추출된다면 AI 분석기도 추출할 가능성이 높습니다. 두 번째는 명령줄에서 원본 HTML을 가져와 텍스트가 JavaScript로 나중에 생성되는 것은 아닌지 확인하는 방법입니다. 세 번째는 개발자 도구의 접근성 트리를 여는 것입니다. 이 트리는 기계가 바라보는 페이지 구조와 매우 유사합니다. 세 가지 검증을 모두 통과해야 비로소 기계가 읽을 수 있는 페이지라고 할 수 있습니다.
사이트 전체의 CSS를 꺼도 페이지를 읽을 수 있습니까? 콘텐츠 순서와 제목이 명확하고 목록이 여전히 목록으로 보인다면 AI 에이전트도 구조를 이해할 수 있습니다. 반대로 순서 없는 텍스트 덩어리가 된다면 기계 역시 이해하기 어렵습니다.
시맨틱 구조를 완성한 뒤 구조화 데이터를 더합니다
시맨틱 HTML은 출발점이지 완성점이 아닙니다. 이를 제대로 구성한 다음 Schema.org의 JSON-LD를 추가하고 Article, FAQPage, Product 같은 유형을 사용해 날짜, 작성자, 가격 등의 사실을 기계에 명확히 전달해야 합니다. 단, 순서를 바꾸면 안 됩니다. div 수프 위에 스키마를 붙이는 것은 겉치장에 불과합니다. 크롤러는 마크업한 정보와 실제 화면의 DOM 콘텐츠를 대조하며, 서로 일치하지 않으면 오히려 평가에 불리할 수 있습니다. 먼저 HTML의 의미 구조를 바로잡아야 스키마도 제 역할을 합니다. AI 분석기의 눈에 페이지가 어떻게 보이는지, 어느 부분이 부족한지 알고 싶다면 30분 GEO 진단을 예약하세요. 실제 추출 결과를 바탕으로 함께 점검해 드립니다.
