같은 HTML을 세 관점에서 검사하기

H1/H2 구조, 이미지 alt, canonical을 확인하는 도구를 추가했을 때는 각각의 기능을 소개했다. 이번에는 일부러 문제가 섞인 작은 HTML을 사용해, 자동 검사 결과에서 무엇을 고치고 무엇을 사람이 판단해야 하는지 설명한다.

세 도구는 입력한 HTML을 분석한다. 주소를 넣었다고 해당 웹사이트를 방문하는 기능으로 해석하면 안 된다. 분석할 페이지의 소스를 복사하되 관리 화면의 토큰이나 비공개 데이터를 섞지 않고 필요한 마크업만 사용한다.

연습용 입력

다음은 실제 운영 페이지가 아닌 합성 예제다. 이미지 파일도 가상의 이름이므로 브라우저에서 실제 이미지가 표시된다는 뜻은 아니다.

<html>
<head>
  <link rel="canonical" href="https://example.com/guide/">
  <link rel="canonical" href="https://example.com/old-guide/">
</head>
<body>
  <h1>이미지 압축 기록</h1>
  <h3>PNG 결과</h3>
  <img src="result.png">
  <img src="divider.png" alt="">
  <img src="chart.png" alt="압축 전 800KB, 후 420KB 비교">
</body>
</html>

제목 구조: H3가 나온 이유를 읽는다

H1/H2 구조 검사기로 예제를 보면 H1 다음에 H3가 나온다. ‘PNG 결과’가 글의 첫 큰 절이라면 H2로 고치는 것이 구조상 자연스럽다. 반대로 상위 절의 일부만 복사한 입력이라면 빠진 H2를 먼저 확인해야 한다. 부분 HTML에서 나온 경고를 전체 문서의 결함으로 바로 확정하지 않는다.

글자 크기를 줄이기 위해 H2를 H3로 바꾸기보다 제목 계층은 내용 구조에 맞추고 크기는 CSS로 조절한다. 이 사이트의 게시글 템플릿은 글 제목을 H1으로 출력하므로 본문 수정안은 H2부터 시작한다. 본문 첫 줄에 같은 제목을 H1으로 다시 넣지 않는 이유다. 제목은 읽는 사람에게 구조를 알려줘야 한다. W3C 제목 구조 안내

alt: 누락과 빈 문자열은 다르다

이미지 alt 검사기에 같은 예제를 넣으면 이미지 세 개를 비교할 수 있다. result.png는 속성 자체가 없고, divider.png는 빈 값이며, chart.png는 설명 문자열이 있다. 자동 검사는 이 차이를 찾는 출발점이다.

이미지의 역할 사람이 판단할 내용 처리 예시
압축 결과 화면 파일명만으로 전달되지 않는 결과가 있는가 필요한 결과·설정 설명 추가
장식용 구분선 없어져도 본문 정보가 유지되는가 장식 목적이면 alt="" 유지
수치 비교 그래프 시각적 정보가 설명과 일치하는가 핵심 수치를 텍스트로도 제공

빈 alt가 항상 오류인 것은 아니다. W3C는 장식 이미지에 빈 대체 텍스트를 사용하는 방식을 안내한다. 반대로 alt에 글자가 있다는 것만으로 설명이 충분한 것도 아니다. ‘이미지’, ‘사진’처럼 기능을 설명하지 못하는 문구는 사람이 검토해야 한다. W3C 장식 이미지 안내

canonical: 형식 다음에는 대상의 의미를 확인한다

Canonical URL 검사기에서는 서로 다른 canonical 두 개를 발견할 수 있다. 의도한 대표 페이지를 정하고 템플릿에서 한 곳이 생성하도록 정리한다. 예제에서 /guide/를 대표로 택했다면 /old-guide/를 가리키는 태그를 제거하는 식이다.

그 후에도 확인은 남는다. 대상이 404인지, 로그인으로 이동하는지, 다른 내용의 글인지, sitemap과 내부 링크가 같은 URL을 사용하는지는 붙여넣은 태그만으로 판단할 수 없다. canonical은 검색엔진에 대표 URL을 제안하는 신호이며 최종 선택 결과는 검색엔진 도구에서 확인한다. Google canonical 안내

쿼리 문자열이 있다는 이유만으로 무조건 제거하지도 않는다. ?page=2처럼 다른 내용을 구분하는 값인지, 단순 추적 값인지부터 확인해야 한다. 검사기가 표시한 경고 수를 줄이는 것이 목적이 아니라 실제 문서의 대표 주소를 일관되게 제시하는 것이 목적이다.

검사 완료를 기록하는 방식

수정 후에는 편집기의 HTML을 다시 넣는 것에 그치지 않고 배포된 소스와 비교한다. ‘H1 한 개’만 기록하기보다 ‘템플릿 H1, 본문 H2·H3 계층 확인’처럼 검사 범위를 남긴다. alt는 누락 수와 장식용 빈 값의 예외를 함께 적고, canonical은 개수·실제 주소·대상 응답을 적는다.

세 도구는 문서 작성 보조 수단이다. 모든 경고가 사라져도 내용의 정확성이나 검색 결과 노출이 자동으로 확인되지는 않는다. 제목·단어 통계는 SEO 수치 해석 예제와 함께 읽으면 판단 범위를 나누는 데 도움이 된다.