이미지 속 텍스트 SEO, HTML로 옮길 정보 판단 기준

상세페이지를 통이미지 한 장으로, 행사 안내를 포스터 한 장으로 올리는 사이트가 많습니다. 사람 눈에는 글자가 다 보입니다.

검색엔진이 읽는 것은 HTML 텍스트입니다. 이미지 속 글자와 CSS 배경으로 깐 이미지는 공식 문서가 따로 다루는 자리여서, 무엇을 글로 옮길지 정해 두어야 합니다.

두 엔진의 문장을 합치면 기준이 하나로 모입니다. 이미지는 무엇의 사진인지 알려 주는 자리이고, 검색어가 될 정보는 글자로 둡니다.

CSS 배경 이미지는 글자 문제가 아니라 이미지 자체가 색인 대상에서 빠지는 문제입니다(원문: Google can find images in src attribute of <img> element (even when it's a child of other elements, such as the <picture> element).) 원인과 확인 순서는 「이미지 SEO, 구글 이미지에 안 나오는 이유와 확인 순서」 편에 자세히 적었습니다.

alt 는 옮기지 못한 글자를 받치는 자리입니다. 네이버도 지나치게 긴 글자열은 스팸으로 오인될 수 있다고 적었으니, alt 에는 핵심 한 줄만 넣고 상세 설명은 본문으로 옮깁니다.

옮긴 글은 이미지 바로 옆이나 아래에 둡니다. 구글은 이미지 가까운 글로 이미지의 뜻을 파악합니다. alt 쓰는 법은 「alt 태그 작성법, 장식 이미지 빈 alt 판단 기준」 편에 자세히 적었습니다.

예시 ① 사양표를 이미지로 올린 산업용 장비 제조사(B2B)

제품 페이지마다 사양표가 캡처 이미지 한 장입니다. 구매 담당자는 모델명과 출력, 규격으로 검색하는데 그 글자가 모두 이미지 안에 있습니다.

사양표를 HTML 표로 다시 만들고, 이미지는 제품 사진만 남깁니다. 모델명은 페이지 제목과 첫 문단에도 씁니다.

예시 ② 상세페이지가 통이미지인 의류 쇼핑몰(B2C)

상품 설명이 세로로 긴 이미지 한 장이고, 소재와 사이즈, 세탁법이 그 안에 있습니다. HTML 본문에는 상품명과 가격만 있습니다.

소재·사이즈·세탁법을 본문 표로 옮기고, 디자인 이미지는 그대로 둡니다. 화면은 같고 검색엔진이 읽는 글만 늘어납니다.

예시 ③ 행사 공지를 포스터로만 올린 공공기관 누리집(B2G)

공지 글 본문이 포스터 이미지 한 장입니다. 시민은 행사 이름과 신청 기간으로 검색하는데, 본문에는 「첨부 이미지 참고」 한 줄뿐입니다.

일시·장소·신청 방법·문의처를 본문에 글로 적고 포스터는 그 아래에 둡니다. 화면 낭독 프로그램 사용자도 같은 정보를 읽게 됩니다.