대부분의 웹 콘텐츠는 가독성을 높이기 위해 많은 이미지 자료가 포함되어 있습니다. 경우에 따라 이미지 자료가 콘텐츠의 50% 이상을 차지하는 경우도 많습니다. 이 이미지들을 웹에서 검색되게 하여 더 많은 사용자들이 자신의 웹사이트로 유입될 수 있도록 하는 이미지 최적화 HTML 작성법과 SEO에 대해 알아보겠습니다.
- HTML alt 속성
- 이미지 파일의 용량과 포맷
- 적절한 해상도 선택
- 이미지 특성에 맞는 포맷과 webP
HTML alt 속성 설정 : 이미지에 이름을 부여
<img src="IMG3221.jpg">HTML에 이미지를 불러오는 기본적인 <img> 태그는 상단의 코드와 같습니다. <img> 태그를 명시한 후 src 속성에 파일 경로를 입력하여 이미지를 불러와 웹 페이지에 표출하는 개념입니다. 코드가 간단하여 아무 문제가 없어 보이지만 SEO (검색엔진최적화) 관점에서 내 사이트의 자료들을 외부에 검색시키기 위해서는 잘못된 방법입니다.
사람의 경우 웹 페이지를 읽으면서 해당 이미지가 내포하는 내용이나 주제들을 파악할 수 있지만 대부분의 검색엔진 크롤러의 경우 해당 코드가 이미지라는 것만 알 수 있고 어떤 내용을 가진 이미지인지 파악하지 못합니다. 따라서 게시자가 업로드한 이미지는 검색 결과에 반영되지 않을 확률이 높습니다.
<img src="ballpen.jpg" alt="볼펜">위의 문제점을 해결하기 위해 <img> 태그 내부에는 이미지에 이름을 부여하는 alt 속성, 즉 대체 텍스트가 존재합니다. 위 코드는 alt 속성을 추가한 경우 입니다. 이미지 alt 속성에 이름을 부여하면 크롤러가 해당 속성값을 참고하여 키워드가 비슷한 검색 결과에 사진을 뿌려줄 확률이 상승합니다.
추가로 src 속성이 가르키는 이미지 파일 또한 크롤러가 참고하기 때문에 이미지 파일명을 게시글의 주제나 제목 형태로 수정하는 것을 추천합니다. 아래 구글 계발자 자료를 참조하면 해당 정보를 읽을 수 있습니다.
실제로 운영하는 서버의 요청 로그를 분석하면 크롤러로 추정되는 요청이 정적자료들을 수집하는 경우가 존재합니다. 만약 요청을 보낸 주최가 검색 엔진의 크롤러일 경우 이미지를 분류하여 검색결과에 반영시킬 수 있기 때문에 이미지 파일 이름 또한 사진 내용과 비슷하게 설정합시다.
이미지 파일의 용량과 포맷 : 로딩 속도에 대한 검색결과 반영
구글, 네이버와 같이 대형 포털의 검색엔진은 페이지의 로딩 속도가 빠를수록 검색 결과 상단에 사이트를 반영시켜 줍니다. 기본적으로 로딩 속도가 발생하는 이유는 사이트를 제공하는 서버에서 클라이언트 PC로 데이터를 전달하기 때문입니다. 해당 데이터에는 이미지, 폰트, HTML, CSS 등 내포되어 있는데 가장 큰 용량을 차지하는 것이 이미지 파일입니다. 따라서 이미지 파일의 용량을 줄일수록 로딩 속도가 줄어들고 결론적으로 내 웹사이트가 검색결과 상단에 노출될 확률이 높아집니다.
이미지 파일의 용량을 줄이는 방법은 크게 두가지가 있습니다.
1. 적절한 해상도의 선택 :
이미지는 해상도가 작을수록 용량이 줄어들지만 화질이 흐려진다는 단점이 존재합니다. 따라서 기기 따른 적정 수준까지만 해상도를 줄여야 합니다. 모바일의 경우 아이폰 맥스 모델의 뷰포트가 428px로 대략 420px의 사진을 제공하면 되고, PC의 경우 웹사이트의 바디가 1280px 정도로 제작되기 때문에 약 1280px 크기의 사진을 제공하면 용량과 화질이 최적화 됩니다.
여러 사이즈의 파일을 서버에서 제공하기 어렵기 때문에 1280px의 사진을 업로드하고 <img>태그에 width 속성을 추가하여 각 뷰 포트에 알맞게 출력되게 설정하면 됩니다.
<img src="이미지경로.jpg" alt="이미지이름" width="100%" height="auto">
<img src="이미지경로.jpg" alt="이미지이름" width="480px" height="auto">이미지 태그에 width 속성은 px 단위와 % 단위 모두 가능하기 때문에 사용자의 사이트가 반응형으로 css 파일에 미디어 쿼리가 적용되어 있으면 100%를 이용하면 됩니다. 높이 속성의 경우 auto를 사용하면 width 비율에 맞춰서 확대 축소됩니다.
2. 이미지 특성에 맞는 포맷과 webP :
이미지의 포맷은 jpg, png, jpeg, gif와 같이 다양합니다. 기본적으로 직접 촬영한 사진은 jpg, 컴퓨터를 이용해 디자인한 이미지는 png 포맷이 작은 저장 공간을 가집니다. 현재 웹에서는 구글이 개발한 webP 규격이 자주 사용됩니다. webP는 앞에서 언급한 포맷들을 다 대체하며 용량 또한 약 30% 작습니다.
웹사이트의 이미지들을 더 높은 확률로 검색에 노출시킬 수 있도록 하는 방법에 대해서 알아보았습니다. 개인의 사업 홈페이지에 있는 사진들을 조금 더 많은 곳에 노출되기 원하시는 분들은 하단에 “문의하기”를 통해 당사에 문의 주시면 감사하겠습니다!
TBWA DataLab에서 활동하고 있는 김지훈입니다. SEO 서비스에 대한 많은 정보를 제공하겠습니다.
핑백: 웹 페이지 로딩 속도 개선 방법과 SEO | TBWA 데이터랩
핑백: 검색엔진최적화(SEO) 네이버, 구글 가이드 총정리 2022 - TBWA 데이터랩