HTML

HTML이 쇼핑몰에서 중요한 이유

방문자에게는 예쁜 화면이 보이지만 검색엔진과 크롤러에게는 그 화면을 만든 HTML 태그가 보여요. 태그를 어떻게 쓰느냐에 따라 같은 콘텐츠라도 검색엔진이 얼마나 정확하게 이해하는지가 달라져요. 페이지 노출에 영향을 주는 주요 HTML 태그는 아래와 같아요.

• 제목 태그의 계층 구조: 한 페이지에 h1은 하나만 쓰고 h2부터 h6까지 순서를 지켜야 검색엔진이 어떤 내용이 더 중요한지 파악할 수 있어요.
• 이미지 대체 텍스트: 이미지에 alt 속성으로 설명을 넣으면 검색엔진이 이미지 내용을 함께 이해할 수 있어요.
• 의미 있는 태그 사용: 모든 걸 div로만 감싸는 대신 article이나 section이나 nav처럼 역할이 담긴 태그를 쓰면 페이지 구조가 더 명확해져요.
• 메타 태그: title과 description 태그는 검색 결과에 노출되는 제목과 설명 문구를 결정해요.

AI 때문에 HTML이 다시 중요해요

AI가 생활에 밀접해 지면서, HTML이 다시 중요해졌어요. 챗GPT나 클로드 같은 AI 서비스가 콘텐츠를 수집할 때 쓰는 AI 크롤러가 웹을 결국 HTML로 읽기 때문이에요. 자바스크립트 등으로 렌더링되는 홈페이지를 접근하더라도 자바스크립트를 실행하지 않으면 사람 눈에는 멀쩡하고 이쁜 페이지가 AI 크롤러 눈에는 텅 빈 페이지로 보여요. 그래서 HTML 구조를 알아두면 이런 문제가 생겼을 때 원인을 짐작하고 개발자에게 정확히 요청할 수 있어요.

여기에 AI에게 페이지나 콘텐츠를 만들어달라고 요청했을 때 나오는 결과물의 기본 단위도 HTML이에요. 생성형 AI를 유용하게 활용하기 위해서라도, 개발자가 아닌 쇼핑몰 담당자가 HTML의 기본 구조 정도는 알아두는 게 좋아요.

예시로 보는 HTML

예시 1: 한 쇼핑몰이 상품 상세페이지 제목을 h1이 아닌 일반 텍스트로만 표시하고 있었어요. 글자 크기를 키워서 눈에는 제목처럼 보였지만, 이는 CSS로 만든 시각적 효과일 뿐이라 검색엔진은 이 텍스트를 페이지의 핵심 제목으로 인식하지 못했어요. h1 태그로 바꾼 뒤 검색엔진이 페이지 핵심 내용을 더 정확히 인식하기 시작했어요.

예시 2: 한 쇼핑몰이 상세페이지 내용을 텍스트가 아니라 하나의 이미지 파일로 통째로 제작해 올리고 있었어요. 사람 눈에는 상품 설명이 다 보이지만, 검색엔진과 AI는 이미지 안의 글자를 읽지 못해서 이 페이지에 어떤 정보가 담겨 있는지 전혀 알 수 없었어요. 핵심 내용을 텍스트로도 함께 넣은 뒤 이미지 검색과 AI 답변 노출이 함께 늘었어요.

예시 3: 한 패션 쇼핑몰이 자바스크립트로 상품 정보를 나중에 불러오는 구조로 페이지를 만들었어요. AI 검색 서비스에서 상품 정보가 제대로 인용되지 않는다는 걸 발견하고, 서버 렌더링 방식으로 바꾼 뒤 AI 답변에 상품 정보가 정확히 노출되기 시작했어요.

알파앱스에서는

쇼핑몰을 운영하다 보면 크고 작은 어려움이 계속 생겨요. 알파앱스는 리뷰 관리부터 프로모션 운영, 메시지 발송, 홈페이지 제작까지 쇼핑몰을 운영하며 생길 수 있는 모든 어려움을 해결하고 있어요.