minstudio

시맨틱 마크업(Semantic Markup): 검색 봇이 이해하는 HTML

검색 봇은 화면의 예쁜 디자인을 눈으로 보지 못하고 오직 코드만 읽습니다. <header>, <main>, <article>과 같은 시맨틱 태그를 사용하면 봇이 문서의 핵심 콘텐츠가 어디에 있는지 정확하고 빠르게 파악하여 가산점을 줍니다.

맹인 안내용 점자 블록 (시맨틱 마크업)

의미 없는 div 떡칠

"여기가 메뉴인지 바닥인지 구분이 안 가요! 감점!"

Best
<main> 점자 블록 발견

"아하! 여기가 핵심 본문이군요! 가산점 팍팍!"

<!-- ❌ 안 좋은 예 (의미 없는 div 떡칠) -->
<div class="header">로고 및 메뉴</div>
<div class="title">SEO란 무엇인가</div>
<div class="footer">저작권 정보</div>

<!-- ✅ 좋은 예 (시맨틱 마크업) -->
<header>
    <h1>로고 및 메뉴</h1>
</header>
<main>
    <article>
        <h2>SEO란 무엇인가</h2>
    </article>
</main>
<footer>
    <p>저작권 정보</p>
</footer>
시맨틱 마크업(Semantic Markup): 검색 봇이 이해하는 HTML | Minstudio