매력적인 SEO 콘텐츠를 제작하는 것은 다양한 요소를 고려해야 하는 작업입니다. 특히, 흥미로운 내용과 동시에 콘텐츠의 완성도나 비주얼리티를 높이기 위한 다양한 방법들이 필요합니다. 그 중에서도 이미지 최적화를 하는 것은 매주 중요한 방법 중 하나라는 것을 아시나요?

이미지 최적화는 콘텐츠를 만들고 있는 마케터나 제작자분들이 반드시 주의 깊게 고려해야 할 중요한 SEO 요소 중 하나입니다. 그래서 오늘은 이미지 최적화 작업을 어떻게 수행해야 하는지, 쉽고 효과적인 팁과 이미지 최적화를 도와주는 사이트를 소개하겠습니다.

이미지 최적화

이미지는 사용자들에게 텍스트만으로는 전달하기 힘든 시각적인 정보와 더불어 직관적인 이해를 돕습니다. 이미지 최적화는 웹페이지의 SEO를 향상시켜 검색 결과에서 더 높은 순위를 얻을 수 있게 도와줍니다. 이렇게 되면, 타겟 사용자들에게 더 쉽게 노출되어 양질의 트래픽을 사이트로 유도할 수 있게 되는 것이죠.

그렇다면 SEO 이미지 최적화를 위해 어떤 요소들을 살펴봐야 할까요?

이미지 최적화를 위해 고려해야 할 포인트

1) SEO 친화적인 이미지 파일 이름 설정

이미지를 업로드할 때, 파일의 이름이 SEO에 중요한 역할을 합니다.

파일 이름에는 이미지의 내용과 관련된 키워드를 포함 시켜, 검색 엔진이 이미지의 내용을 쉽게 파악하게 도와줍니다. 무엇보다도 구글에서는 캡션 및 이미지 제목을 비롯한 페이지 콘텐츠에서 이미지 주제에 관한 정보를 추출합니다. 가능하다면 이미지를 관련 텍스트 근처와 이미지 주제와 관련 있는 페이지에 배치하는 것이 좋다는 점 참고해주세요!

2) 이미지 확장자 형식 확인

이미지 형식은 웹사이트의 로딩 시간과 전체적인 사용자 경험에 큰 영향을 미칩니다. 주로 일반적으로 JPEG, PNG, GIF 중 적절한 형식을 선택하여 사용하는데요. 구글 검색 BMP, GIF, JPEG, PNG, WebP, SVG 형식의 이미지를 지원하고 있따는 점을 참고해주세요! 파일 이름 확장자를 파일 형식과 일치 시키는 것도 좋습니다.

3) HTML 이미지 요소를 사용하여 이미지 삽입하기

표준 HTML 이미지 요소를 사용하면 크롤러가 이미지를 찾고 처리할 수 있습니다. 구글에서는 HTML <img> 요소(<picture> 요소와 같은 다른 요소에 포함된 경우에도)를 파싱하여 이미지의 색인을 생성하지만 CSS 이미지의 색인을 생성하지는 않습니다.

✅ 좋은 예
<img src = “pizza.jpg” alt = “포테이토 피자” />

❎ 나쁜 예
<div stlye = “background-image:url(pizza.jpg)”> 포테이토 피자 </div>

4) 반응형 이미지로 최적화 하기

반응형 웹페이지를 설계하면 사용자가 다양한 기기 유형에서 웹페이지에 액세스할 수 있으므로 더 나은 사용자 환경을 제공합니다. 이미지 또한 모든 종류의 장치 화면에 맞게 자동으로 크기를 조절하는 반응형에 맞춰 최적화를 한다면 더 좋겠죠?

웹페이지는 img 요소의 <picture> 요소 또는 srcset 속성을 사용하여 반응형 이미지를 지정합니다. 그러나 일부 브라우저와 크롤러는 이러한 속성을 인식하지 못합니다. 항상 src 속성을 사용해 대체 URL을 지정하는 것이 좋습니다.

srcset 속성을 사용하면 화면 크기별로 같은 이미지의 서로 다른 버전을 지정할 수 있습니다.

<img
  srcset="maine-coon-nap-320w.jpg 320w, maine-coon-nap-480w.jpg 480w, maine-coon-nap-800w.jpg 800w"
  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
  src="maine-coon-nap-800w.jpg"
  alt="A watercolor illustration of a maine coon napping leisurely in front of a fireplace">

5) 이미지 사이트맵 사용하기

이미지 사이트맵은 웹사이트에 있는 이미지의 URL 목록을 포함하는 XML 파일입니다.

이 파일은 검색 엔진에게 웹사이트의 구조와 내용을 더 잘 이해하게 도와줍니다. 이미지 사이트맵을 제출함으로써, 검색 엔진은 웹사이트의 이미지를 더 빠르고 효과적으로 크롤링하고 인덱싱할 수 있습니다. 이로써 이미지 검색 결과에서 더 좋은 성과를 얻을 수 있답니다.

6) 세이프서치에 맞게 최적화하기

세이프서치는 구글 검색 결과에 선정적인 이미지, 동영상, 웹사이트를 표시, 흐리게 처리 또는 차단할지 지정하는 Google 사용자 계정 설정입니다. 구글에서 사이트의 특성을 파악하여 적절한 경우 사이트에 세이프서치 필터를 적용할 수 있도록 합니다.

이미지 대체 텍스트 설정도 중요해요!

이미지 대체 텍스트 – 이미지 Alt 태그 (Alt tag)

이미지 대체 텍스트는 이미지가 웹페이지에 표시되지 않을 때 대신 표시되는 텍스트입니다. 이 텍스트는 스크린 리더를 사용하는 사용자에게 이미지의 내용을 설명해주며, 검색 엔진 크롤러도 이 텍스트를 사용하여 이미지의 내용을 이해합니다.

콘텐츠 작성할 때 가장 쉽게 놓칠 수 있는 부분은 이미지를 삽입하고 이미지에 맞는 대체 텍스트 설정하는 것입니다. 구글은 대체 텍스트와 함께 컴퓨터 비전 알고리즘(computer vision algorithms), 페이지 콘텐츠를 활용하여 이미지의 주제를 파악합니다. 또한 이미지의 대체 텍스트는 이미지를 링크로 사용할 때 앵커 텍스트로 활용할 수 있기 때문에 중요해요.

이미지 대체 텍스트의 중요성

웹 접근성 향상: 스크린 리더를 사용하는 시각 장애인들이 이미지의 내용을 이해할 수 있게 도와줍니다.
SEO 개선: 검색 엔진은 텍스트를 기반으로 정보를 처리하므로, Alt Text는 이미지의 내용을 검색 엔진에 제공하여 웹페이지의 SEO를 개선하는데 도움이 됩니다.
이미지 로딩 문제 대응: 이미지가 로딩되지 않을 때 사용자에게 이미지의 정보를 제공할 수 있습니다.

효과적인 이미지 대체 텍스트 작성 팁

설명적이고 정확하게: 이미지의 내용과 의도를 정확하게 전달하는 텍스트를 작성해야 합니다.
키워드 사용: SEO를 개선하려면 관련 키워드를 적절하게 포함시켜야 합니다. 단, 반복적으로 키워드를 사용하는 키워드 스태핑은 피해야 합니다.
짧고 간결하게: 너무 길지 않게, 이미지를 간단하고 명확하게 설명하는 텍스트를 작성해야 합니다.

쉽고 빠르게! 효과적인 이미지 최적화 사이트

‘새로운 콘텐츠를 고민하고 기획하는 시간과 더불어 이미지 최적화 시간도 적지 않게 들텐데…’ 라고 걱정하는 분들을 위해 쉽고 간단하게 이미지를 최적화할 수 있도록 도와주는 사이트들을 소개합니다. 오늘 소개하는 사이트들을 활용한다면 그 고민을 덜어줄 수 있을 거예요.

1) 화질 저하 없이 이미지 용량 줄이기 – 이미지 용량 압축

이미지의 용량이 너무 크다면 사용된 페이지의 로딩 속도는 느려지게 됩니다. 이미지 용량을 압축하면 페이지의 로딩 속도를 높이고, 사용자의 브라우징 경험을 향상시킬 수 있습니다.

이때, 용량을 너무 작게 줄이면 이미지의 화질이 많이 저하될 수 있기 때문에 적절한 용량으로 압축하는 것이 중요합니다.

💡 이미지 용량 압축 사이트

· iLoveimg

· tinypng

· ImageOptim (Mac 전용)

2) 이미지 사이즈 조절하기

콘텐츠에 들어가야 할 이미지의 사이즈가 너무 크면, 페이지를 불러오는 로딩 시간이 오래 걸리게 됩니다. 따라서 너무 커서도, 너무 작아서도 안되고 적절한 사이즈의 이미지를 배치하는 것이 중요합니다.

💡 이미지 사이즈 조절 사이트

· Resizepixel

· Adobe Express

· onlinecovertfree.com

SEO 이미지 최적화는 우리 웹사이트의 높은 유입을 도와주는 중요한 요소 중 하나입니다. 이미지를 SEO에 최적화하기 위해 위에서 언급한 고려 요소들을 체크리스트로 활용하면 좋을 것 같습니다. 현재 우리 콘텐츠의 이미지 최적화 요소를 점검해보고, 체크리스트를 통해 개선한다면 더욱 더 매력적이고 완성도 높은 SEO 콘텐츠가 될 수 있을 것입니다😊

*출처