박 세용 
웹문서에서 다루는 내용이 복잡한 내용이라면 텍스트만 사용하기 보다는 적절히 이미지를 사용하면 콘텐츠 이용자들의 이해를 도울 수 있을 뿐만 아니라 노출 개선 및 랭킹 개선 등 검색엔진최적화 측면에서도 도움이 된다. SEO의 관점에서 웹문서 내의 이미지를 적절히 사용하기 위해서는 무엇을 고려해야할까?
우선 이미지와 관련해서 가장 중요한 원칙은 이미지와 관련해서 설정해야하는 텍스트를 활용해서 이미지를 표현해야한다는 점이다. 아무리 구글의 기술이 발전했다고는 하지만, 이미지의 내용을 인간처럼 해석해내는 능력은 아직 부족하기 때문이다. 텍스트로 정의할 수 있는 이미지 관련 설정에는 이미지 파일명과 이미지 대체 텍스트 등이 있는데 이에 대해 하나씩 알아보자.
이미지 파일명의 설정에 대해서
이미지 파일 확장자에는 png나 jpg 등이 있기 때문에 만약 사과를 찍은 이미지 파일의 파일명을 정하는 상황이라면 대게 [apple.jpg]와 같은 형식의 파일명을 부여하게 된다. 하지만 검색엔진최적화의 관점에서라면 이보다는 [well-rounded-red-apple.jpg] 혹은 [mcIntosh-red-apple.jpg] 같이 자세한 설명이 들어간 파일명이 이상적이다. 즉 일반명사만 사용하는 파일명 보다는 이미지를 보다 구체적으로 설명하는 파일명이 좋다는 이야기다.
이미지 파일명 작성 예시
- 대상 제품 : 스마트폰 스크린 보호용 필름
- 이미지 설명: 2020년 봄에 출시된 스마트폰 스크린 보호용 필름의 제품 사진
- 이미지 파일 확장자 : jpg
- 이미지 파일명 : 2020-spring-6-inch-smartphone-protect-film.jpg
이미지 파일을 위한 alt속성 설정에 대해서
alt속성이라는 것은 원래 시각 장애를 가진 분들이 사용하는 음성 브라우저로 웹문서를 읽을 때 이미지를 텍스트로 표현할 수 있도록 입력하는 대체 텍스트를 말하는 것으로서 웹접근성을 위해서 정의되는 속성이지만 검색엔진최적화를 위해서도 중요한 요소다. 이미지 alt속성의 작성을 할 때에는 아래의 예시처럼 이미지의 내용을 최대한 충실하게 설명하는 것이 중요하다. 좋지 못한 예에서 처럼 일반적인 표현으로 alt 속성을 정의하는 것은 좋지 못하다.
이미지 alt속성 작성 예시
< img src=“2020-spring-6-inch-smartphone-protect-film.jpg” alt=“2020년 봄에 출시된 6인치 스마트폰 보호 필름 제품 사진” >
좋지 못한 alt 속성 작성 예시
< img src=“2020-spring-6-inch-smartphone-protect-film.jpg” alt=“스마트폰 필름” >
alt 속성을 정의할 때 주의해야할 것이 하나 있는데 바로 페이지에 있는 모든 이미지에 대해 alt 속성을 정의할 필요는 없다는 점이다. 웹접근성 측면에서도 그런데 웹 페이지에는 여러가지 목적의 이미지들이 들어가 있다. 예를 들어서 페이지 내의 UI/UX 적인 목적으로 내용을 구분하기 위한 선 이미지나 페이지의 미적 완성도를 높이기 위해 넣은 점 이미지도 있을 수 있다. 검색엔진최적화 측면에서도 그리고 웹 접근성 측면에서도 이런 이미지에 대해서까지는 alt속성을 지정할 필요가 없다는 것을 기억해야한다.
이미지 캡션에 대해서
이미지가 웹페이지 안에서 표시될 때 이미지 주변에 이미지를 설명하는 내용을 텍스트로 보여지게 지정할 수 있는데, 이 때 사용하는 태그가 캡션 태그( figcaption )이다. alt텍스트와 마찬가지로 캡션 역시도 검색엔진에게 이미지의 내용을 이해시키는데 도움을 줄 수 있다.
이미지 캡션 태그 작성 예시
<figure>
< img src=“2020-spring-6-inch-smartphone-protect-film.jpg” alt=“2020년 봄에 출시된 6인치 스마트폰 보호 필름 제품 사진” >
<figcaption>2020년 봄에 출시된 6인치 사이즈의 스마트폰용 보호 필름 제품의 사진</figcaption>
</figure>
이미지 사이즈 최적화에 대해서
이미지를 삽입할 때 이미지 태그 안에 이미지의 가로 세로 크기를 아래와 같이 기술하면 된다.
이미지 사이즈 선언 예시
< img src=“2020-spring-6-inch-smartphone-protect-film.jpg” alt=“2020년 봄에 출시된 6인치 스마트폰 보호 필름 제품 사진” width=“300” height=“200”>
이렇게 함으로서 브라우저가 이미지를 읽는 속도를 작게나마 개선할 수 있다. 하지만, 큰 이미지는 웹 페이지를 느리게하여 사용자 경험에 좋지 않은 영향을 미친다. 이미지 사이즈 최적화는 플러그인 또는 스크립트를 사용해서 이미지 파일 크기를 줄이는 과정으로, 페이지로드 시간을 줄여준다. 이를 위해 이미지 파일의 크기를 줄이는 방법에는 손실 및 무손실 압축이 있다.
손실 압축은 이미지의 일부 데이터를 제거하는 필터를 사용하는 방식이다. 아도비 포토샵(Adobe Photoshop), 이나 어피니티 포토(Affinity Photo) 또는 기타 이미지 편집기 같은 도구를 사용하여 손실 압축 이미지를 만들 수 있다.
무손실 압축은 데이터를 있는 그대로 압축하는 필터를 사용하는 방식이다. 품질을 저하시키지 않지만 이미지를 렌더링하기 전에 압축을 풀어야한다. 아도비 포토샵(Adobe Photoshop), 파일오티마이저(FileOptimizer) 또는 이미지옵팀( ImageOptim)으로 무손실 압축 이미지를 만들 수 있다.
이미지의 압축과 관련해서는 예전에는 크기를 조정한 여러개의 이미지를 업로드하고, CSS가 크기를 맘대로 조정하지 않도록 관리하는 것등이 중요했다. 하지만, 최근의 CMS들은 예를 들어 워드프레스 최신 버전들은 다양한 이미지 플러그인을 통해 반응 형 이미지를 지원하여 CSS 등에 대한 고려가 필요없게 되었다. 기본적으로 WordPress는 미디어 라이브러리에 업로드 된 각 이미지의 여러 크기를 자동으로 생성한다. 사용 가능한 이미지 크기를 srcset 속성에 포함하여 브라우저는 이제 가장 적절한 크기를 다운로드하고 나머지는 무시하도록 선택한다.
중요한 이미지를 위한 이미지 사이트맵 활용하기
이미지 서치나 검색 결과에서 이미지 캐로셀 등에 운영 중인 웹사이트의 주요 이미지들이 노출되게 하고 싶다면 앞서서 이야기했던 것들을 충실하게 지킬 필요가 있다. 이들 시책과 함께 꼭 신경써야하는 것이 바로 사이트맵(sitemap.xml)에 이미지 정보를 등록하는 것이다.
sitemap.xml에 이미지 등록 예시
< image: image>
< image: loc> https://www.ascentkorea.com/img/2020-spring-6-inch-smartphone-protect-film.jpg </image:loc>
</image:image>
위의 예시 처럼 sitemap.xml파일 안에 이미지를 등록한 이후에 구글 서치 콘솔 내에 사이트 맵 등록한다.
이미지는 웹페이지의 콘텐츠 품질에 큰 영향을 미치는 요소로 평가받고 있다. 하지만 이런 이미지의 삽입은 웹 콘텐츠를 읽는 고객을 위한 것이어야지, 단순히 검색엔지최적화를 위한 것이어서는 안된다. 높은 순위를 획득하기 위해 한 페이지 안에 유입 키워드를 최대한 많이 넣을 수 있는 기회를 만들기 위해 불필요한 이미지를 넣거나 굳이 alt를 설정할 필요도 없는 이미지에 모두 alt에 키워드를 넣거나 alt에 너무 많은 키워드 설정을 하는 것들은 해서는 안될 일들이며 실제로 효과도 거의 없다는 것을 꼭 기억하길 바란다.
