DMCU의 매거진

SEO를 위한 이미지 최적화 9가지 방법

DMCU

2019.04.16 02:31
  • 7807
  • 콘텐츠에 ‘좋아’해줘서 고마워요 -
    0
  • 7

이 글은 9 Steps to Optimize Images for SEO를 번역한 글입니다. 

-

 

콘텐츠를 보다 풍성하고 매력적이게 만드는 요소로 이미지를 빼놓을 순 없죠. 하지만 SEO 측면에서도 매우 중요합니다.

첫째, 이미지는 검색엔진에 중요한 문맥 정보를 제공합니다. 둘째, 최적화된 이미지는 페이지 로딩 속도를 높여 사용자 참여도와 검색 엔진 순위를 높입니다. 

성공적인 SEO를 위해서는 이미지 최적화의 기본에 대해서 알아야 합니다. 

이미지 최적화는 이상적인 포맷과 사이즈, 그리고 해상도로 고품질의 이미지를 만들어 사용자 참여를 향상시키는 프로세스입니다. 또한 검색 엔진 크롤러가 이미지를 읽고 페이지의 문맥(Context)을 파악할 수 있게 이미지에 정확하게 라벨링을 하는 작업도 포함됩니다.

 

HTTP 아카이브에 따르면 이미지는 2018년 11월 기준으로 전체 웹페이지 내에서 평균적으로 21% 가량 비중을 차지합니다. 이미지는 웹사이트의 다른 요소보다 많은 용량을 차지하기 때문에 크기와 복잡성이 사이트에 크게 영향을 줍니다. 

 

품질을 떨어뜨리고 이미지 크기를 줄이면 페이지 로드 시간이 향상되고 이후 웹사이트 방문자의 경험도 향상됩니다. 에버딘 그룹의 연구는 페이지 로딩 시간이 1초 지연될 때마다 전환이 7% 감소된다는 사실을 확인했습니다. 또한 페이지 로딩 시간이 3초 지연될 때마다 웹사이트 방문자의 40%가 이탈한다는 것도 확인했습니다. 

 

사용자 환경의 향상과 사이트와의 인터렉션은 검색 엔진 순위에 긍정적인 영향을 미치므로 고객 참여, 전환, 그리고 고객 재구매율이 향상됩니다.

또한 최적화된 이미지와 서버의 저장 공간을 덜 차지하면 사이트 백업이 더 빨리 완료됩니다. 

이제 이미지를 최적화하는 방법에 대해서 소개합니다. 

 


1. 이미지 크기 조정(Resize your images)

이미지 크기와 파일 크기는 같은 것이 아닙니다. 이미지 크기는 정말 이미지의 면적을 의미하죠(예를 들면, 1024 x 680 픽셀). 파일 크기는 파일이 서버에 저장되는 공간이겠지요(예를 들면, 350 킬로바이트)

 

해상도가 높고 용량이 큰 이미지(전문 카메라로 촬영하는 경우가 많음)를 사용하면 페이지 로딩이 상당히 느려집니다. 인쇄물 제작에는 최적화되었지만 웹에서 잘 작동하기 위해서는 품질 저하를 최소화하면서 크기를 줄여야 합니다. 

 

적합한 파일 포맷 선택

PNG, JPEG와 GIF 모두 인기가 높은 파일 포맷들입니다. 각각의 장점이 있죠. 많은 색상이 있는 이미지의 경우에는 JPEG 포맷을, 간단한 이미지는 PNG 포맷을 사용하는 것이 좋습니다. 

 


 

 

적절한 압축률 선택

 

이미지를 너무 많이 압축하면 파일 크기는 작아지지만 그만큼 품질은 떨어지겠죠. 반면에 너무 낮은 압축률은 이미지 품질은 높게 유지할 수 있지만 파일 크기는 커집니다.

 

가장 이상적인 파일 포맷과 압축률을 테스트하여 각 이미지에 어떤 것이 적합한지 확인해야 합니다. Adobe Photoshop를 비롯한 많은 이미지 편집 도구에는 이미지 품질을 최적화하면서 동시에 파일 크기는 자동으로 최소화 해주는 ‘웹용 저장’ 옵션이 있습니다. 

 

Photoshop이 없다면 다음과 같은 몇 가지 인기있는 도구가 있습니다. 

 

이미지 최적화 도구

-Affinity Photo

-Pixlr (JPEG 최적화)

-ImageOptim (Mac 전용)

-Kraken (대량 압축)

-Gimp

-Paint.NET

-JPEG Mini

-OptiPNG

-FileOptimizer

-Trimage

 

이미지 최적화를 위한 워드프레스 플러그인

-Yoast SEO

-ShortPixel

-EWWW Image Optimizer

-WP Smush

-TinyPNG

-ImageRecycle

-Optimus Image Optimizer

 

속도 테스트 최적화

이미지를 최적화한 후에 웹사이트 페이지 로딩 시간이 빨라졌다는 것을 어떻게 알 수 있을까요? 다음 도구 중 하나를 사용하여 속도를 테스트하세요.

-WebPageTest

-Pingdom

-GTmetrix

-WebWait

-Google PageSpeed Insights

 

웹사이트 및 콘텐츠가 자주 변경되면 시간 경과에 따라 통계를 계속 확인하는 것이 좋습니다. 

 

2. 이미지 파일 이름 최적화(Optimize image file names)

적합한 파일 이름을 지정하는 것은 페이지 SEO와 이미지 검색 결과 순위에 있어서 매우 중요합니다. 이미지를 업로드하기 전에 관련성이 높고 설명이 포함된 키워드로 파일의 이름을 지정하여 가장 많은 SEO 힘을 얻으세요.

 

처음에는 타깃 키워드를 포함시키고 하이픈으로 구분하십시오. 검색 엔진이 단어를 인식 못 하고 단어를 개별적으로 “볼 수 없기” 때문에 밑줄은 사용하지 마세요.

 

파일 이름은 검색 엔진과 사람 모두에게 의미가 있어야 합니다. 예를 들어, 헤어 살롱 사이트에 있는 여성 이미지의 원래 이름은 “salon234.jpg” 라고 가정한다면 이는 “woman-having-a-haircut-in-a-salon.jpg”와 같이 조금 더 명확하고 자세한 설명이 포함된 제목으로 파일명을 수정해야 합니다. 

 

 

3. alt 태그 사용(Use alt tags)

방문자들은 이미지만 봐도 어떤 내용인지 이해할 수 있지만, 검색 엔진 스파이더는 여전히 구체적인 단서를 필요로 합니다. 대체 텍스트가 없다면 검색 엔진에서 이미지 컨텐츠의 색인을 정확히 할 수가 없습니다. 좋은 alt 태그는 문맥을 제공할 뿐만 아니라 시각 장애인에게도 도움을 줍니다. 작은 결함으로 인해 이미지가 로드되지 않는 경우에도 검색 엔진은 대체 텍스트를 읽고 페이지의 순위를 매길 수 있습니다. 검색 엔진에서의 순위를 높이기 위해 여기에 브랜드 관련 키워드를 포함시킬 수 있습니다. 

 

파일 이름에 포함되는 것보다 더 세부 사항을 제공하세요. 이상적인 단어의 숫자는 없지만 10-15 글자 사이로 이미지에 대해 설명해야 할 것입니다. 

 

 

4. 이미지 제목 최적화(Optimize the image title)

워드프레스를 사용하는 경우, 일반적으로 이미지 제목은 파일 이름에서 그대로 가져오기 때문에 특별히 더 작업할 필요없이 그냥 둘 수 있습니다. 워드프레스를 사용하지 않거나 이미지 제목에 이미지에 대한 설명이 없다면 파일 이름과 같은 방식으로 해당 키워드로 이름을 바꿉니다. 

 

이미지 제목은 파일 이름과 비교해 SEO에는 덜 중요하지만 대체 텍스트에 추가적인 문맥을 제공할 수 있습니다. 또한 이미지 제목은 방문자 참여도 측면에서도 큰 도움이 됩니다. ‘지금 구매하기’ 혹은 ‘지금 다운로드받기’ 등 구체적인 행동을 요청하는 문구를 추가해보세요. 

 

 

5. 캡션 포함(Include captions)

이미지 캡션 – 이미지 바로 아래의 단어 – 은 SEO에 직접적인 영향을 끼치지 않지만, 파일 이름이나 대체 텍스트와는 달리 웹사이트 페이지에 캡션이 표시됩니다. 이러한 이유로 캡션은 더 나은 사용자 경험(User Experience)을 제공할 수 있습니다. 

 

대부분의 사람들은 이미지 캡션을 통해 전체 콘텐츠에 대한 느낌을 얻는데요, 만약 캡션이 없다면 이탈률이 높아질 수 있고 이는 결국 검색 엔진에 나쁜 영향을 줄 수 있습니다.

 

 

6. 자체 이미지 사용(Use unique images)

Stock 같은 이미지 사이트에서 다운 받은 이미지를 써도 상관은 없지만, 다른 웹사이트에서 종종 동일한 이미지를 사용하기 때문에 검색 엔진에는 늘 좋은 영향을 주기는 어렵습니다. 자체적으로 작성한 컨텐츠가 SEO에 좋은 것처럼, 가능한 한 이미지 또한 자체적으로 만든 고유한 이미지를 사용하는 것이 좋습니다. 

 

 

7. 텍스트가 이미지를 보완하는지 확인하세요(Ensure that your text complements the images)

페이지의 문구는 검색 엔진이 여기서 사용된 이미지의 관련성을 평가하는데 도움이 될 수 있습니다. 이미지를 설명하기에 충분한 정보가 포함되지 않았다면 관련된 텍스트를 추가하고 가능한 한 이미지에 대한 설명을 하시기 바랍니다.

 

 

8. 이미지 구조화된 데이터 추가(Add image structured data)

구조화된 데이터를 페이지에 추가하면 검색엔진에 페이지에 대한 확실한 단서를 제공하여 내용을 파악하는 데 도움을 줄 수 있습니다. 만약 요리법에 대한 사이트가 있다면 구조화된 데이터를 이미지에 추가하면 구글은 이미지에 배지를 추가하여 해당 이미지가 요리법에 속한다는 것을 보여줍니다. 

 

구글의 구조화된 데이터 가이드라인을 확인하고 구조화된 데이터를 검색 엔진의 매개변수를 페이지에서 추가하는 방법에 대해서 알아보세요. 

 

 

9. 사이트맵 사용(Use site maps)

구글에 따르면, 사이트맵은 ‘사이트의 웹페이지를 나열하여 구글이나 다른 검색 엔진에 사이트 콘텐츠 구성에 대해 알려줄 수 있는 파일’이라고 정의됩니다. 즉, 여러분의 사이트의 콘텐츠에 대한 맵을 포함하고 있는 파일이라고도 할 수 있습니다. 

 

사이트맵은 검색엔진에게 사이트의 모든 페이지에 대해 알려주기 때문에 SEO에서 매우 중요한 부분이라 할 수 있습니다. 검색 엔진 크롤러가 모든 이미지(인포그래픽, 사진, 영상 썸네일 등)를 확인할 수 있게 이들을 사이트맵에 포함시키기 바랍니다.

 

이러한 이미지 맵 항목에는 제목, 설명, URL, 캡션, 그리고 라이센스 정보 등이 포함됩니다. 영상의 경우에는 제목, 설명, URL, 미리보기 이미지 URL,  원소스 파일의 URL을 포함합니다. 

만약 워드프레스 기반의 웹사이트를 운영하고 있다면 Yoast SEO를 사용하면 시각적인 콘텐츠를 자동으로 사이트맵에 추가할 수 있습니다. 

 

*원본 출처 : Content marketing institute 

*번역본 출처 : DMCU 

  • #DMCU
  • #SEO