예쁜 사이트와 검색에 보이는 사이트는 다릅니다
아임웹으로 만든 사이트의 HTML 소스를 브라우저에서 직접 열면, 디자인과 전혀 다른 문서가 나옵니다. 구글 크롤러는 이 원본 코드만 읽습니다. 렌더링된 화면은 보지 않습니다.
빌더 HTML vs 커스텀 코드 비교
아임웹의 실제 출력 코드 일부입니다.
<div class="K4Rd2 tzD0l">
<div class="N3VHn">
<div class="K1JBG">
<div class="content-wrapper-123">
<div class="text-block-abc">서비스 소개</div>
</div>
</div>
</div>
</div>
같은 내용을 커스텀 코드로 작성하면 이렇습니다.
<section>
<h2>서비스 소개</h2>
</section>
크롤러 입장에서 첫 번째 코드는 "무언가가 있다"는 신호만 줍니다. 두 번째 코드는 "여기는 섹션이고, 제목은 서비스 소개다"라는 완전한 정보를 줍니다.
크롤러가 놓치는 것들
텍스트 의미 손실. 빌더가 생성한 클래스명(K4Rd2, tzD0l)은 사람도, 크롤러도 해석할 수 없습니다. 시맨틱 태그(article, nav, main)가 없으면 크롤러는 페이지 구조를 추론할 수 없습니다.
제목 계층 파괴. h1 → h2 → h3 순서가 지켜지지 않으면 크롤러는 콘텐츠 계층을 이해하지 못합니다. 아임웹에서는 텍스트 크기를 크게 만들어도 h2 태그가 아닌 div로 출력되는 경우가 많습니다.
FAQ 내용 불인식. 아코디언 방식 FAQ의 답변은 display: none 처리됩니다. 사용자가 클릭하면 펼쳐지지만, 크롤러는 그 안의 텍스트를 페이지 콘텐츠로 인식하지 않습니다.
코드 품질이 SEO 성적을 결정합니다
구글은 2024년부터 HTML 코드 품질을 직접 순위 신호로 사용합니다. "보이는 것"과 "코드에 있는 것"이 일치하는 사이트가 더 높이 올라갑니다.
치로가 제작하는 사이트는 시맨틱 HTML을 기본으로 사용합니다. 모든 텍스트 요소에 올바른 태그가 붙고, 구조화 데이터가 코드 수준에서 직접 삽입됩니다. 치로웹디자인의 SEO 서비스와 홈페이지 제작 서비스는 이 기준을 기본값으로 합니다.
자주 묻는 질문
빌더 사이트도 구글 상위에 오른 사례가 있지 않나요? 경쟁이 없는 키워드에서는 가능합니다. 경쟁자가 조금이라도 있으면 코드 품질 차이가 결과로 나타납니다.
아임웹의 SEO 기능 업데이트로 이 문제가 해결되지 않나요? 메타 태그, 제목 설정 같은 표면적 기능은 개선되고 있습니다. 그러나 렌더링 방식, div 중첩, 시맨틱 구조는 플랫폼 엔진 수준의 문제라 빠른 개선을 기대하기 어렵습니다.