이미지 SEO: 9가지 핵심 요소

1. 이미지 SEO 일반 고려사항

우리는 종종 SERP에서 SEO 가치가 있는 URL의 순위를 매기는 데 모든 노력을 기울입니다. 그러나 앞서 언급했듯이 이미지를 최적화하는 것은 Google 이미지 검색 결과에서 더 높은 순위를 차지하고 이를 통해 유기적 트래픽을 유치할 가능성을 높이는 데 중요합니다.

Google 봇은 이미지를 "읽을" 수 없습니다. 봇은 웹사이트의 코드를 읽도록 만들어졌으며, 특정 애니메이션이나 사진을 읽는 것이 아닙니다. 이러한 이유로 우리는 간단한 SEO 가이드라인 세트를 따라 이러한 정보를 봇에게 제공해야 합니다. 이는 봇이 우리가 보여주려는 정보를 해석하고 이미지를 평가하며 Google 이미지 섹션에서 더 높은 순위를 매길 수 있는지 결정합니다.

2. 이미지 크기와 무게

이미지를 최적화할 때 고려해야 할 두 가지 주요 요소는 무게와 크기입니다.

무게:

웹사이트에 무거운 이미지를 사용하면 해당 이미지가 구현된 URL의 로딩 시간이 늘어나고 결과적으로 전체 사이트가 느려질 수 있습니다. 로딩 시간은 데스크톱과 모바일 유기적 순위에 영향을 미치는 요소 중 하나이므로 이미지 최적화는 필수입니다.

이미지 무게를 줄이는 도구:

이미지 무게를 줄이는 데 사용할 수 있는 많은 도구가 있습니다. Photoshop이나 Illustrator와 같은 전문 이미지 편집 소프트웨어가 없더라도 다음과 같은 온라인 플랫폼을 사용할 수 있습니다:

• ›

  ImageOptim 또는 TinyJPG, 품질에 영향을 주지 않고 이미지 무게를 줄여줍니다.

• ›

  Website Speed Test Image Analysis Tool을 사용하면 새 이미지 형식을 쉽게 다운로드할 수 있습니다.

크기:

또한 각 사이트에 여러 이미지 크기를 구현하여 보고 있는 디바이스에 따라 가장 적절한 이미지를 표시하는 것도 중요합니다. 이미지 크기를 조정하는 플러그인이 있더라도 실제로는 이 옵션이 최선이 아닐 수 있습니다. 예를 들어 1000px 사진을 400px로 축소하여 시각적 크기를 줄일 수 있지만, 사진은 여전히 1000px 이미지만큼 무거울 것이며 이는 웹의 성능과 속도에 영향을 미칩니다.

도구:

이미지를 선택할 때 가장 중요한 요소는 우리가 작업할 플랫폼을 아는 것입니다. 예를 들어 WordPress에서 작업한다면 SmushIt을 사용할 수 있습니다. 이는 이미지를 서버에 크기 조정, 압축, 업로드하기 전에 최대 너비와 높이를 정의할 수 있는 플러그인입니다.

반대로 자체 코드 플랫폼에서 작업한다면, 서버에 업로드하기 전에 이미지를 최적화할 수 있는 수동 또는 자동 프로세스를 만들어야 합니다.

3. SEO 친화적인 이미지 형식

현재 웹 이미지를 저장하는 가장 최적의 방법은 다음 네 가지 형식 중 하나를 사용하는 것입니다:

• ›

  WebP: 이미지의 원래 무게를 25-35% 줄일 수 있습니다. 현재 가장 권장되는 형식 중 하나이며, 일부 브라우저 버전에서는 아직 읽을 수 없지만 이미지 품질에 영향을 주지 않고 더 많은 압축을 허용하는 형식 중 하나입니다.

• ›

  PNG: 색상이 적고 투명한 배경이 있는 사진에 가장 적합한 선택입니다. 로고에 널리 사용됩니다.

• ›

  JPG: 사진이나 일반적인 이미지에 사용해야 하는 형식입니다. 압축할 때 약간의 품질이 손실되지만 색상과 톤은 동일하게 유지됩니다.

• ›

  GIF: 애니메이션과 움직이는 사진에 사용됩니다.

권장사항:

• ›

  무게와 호환성 측면에서 항상 가장 적합한 이미지 형식을 사용하세요.

• ›

  수동으로든 자동 처리 도구를 통해서든 항상 이미지를 압축하세요.

• ›

  웹에 여러 아이콘이 포함된 경우 CSS Sprites를 통해 단일 이미지로 그룹화하여 서버 요청 수를 줄이고 웹 성능을 개선하세요.

4. 이미지 SEO 필드

모든 이미지에는 검색 엔진 로봇(물론 사용자에게도)에 향상된 접근성을 제공하기 위한 관련 필드 세트가 함께 제공됩니다.

이미지 이름

이미지 이름은 파일의 이름을 가리킵니다. 이미지의 제목으로, 단어 사이에 하이픈과 밑줄을 사용합니다. 이미지의 순위를 매기고 싶은 키워드를 포함하고 비정상적인 문자(예: "ñ", "?" 또는 강세가 있는 글자 "á" 등)를 피하는 것이 좋습니다.

또한 URL을 단축하고 가능한 한 SEO 친화적으로 만들기 위해 이미지 이름에서 전치사나 기타 비필수 문자를 생략하는 것이 좋습니다.

Title

이미지 위에 커서를 올렸을 때 나타나는 텍스트입니다. 이미지에 의미적인 제목을 추가하기 위해 이를 입력하는 것을 권장하며, 더 높은 순위를 매기고 싶은 키워드를 포함합니다.

이는 alt 텍스트와 동일할 수 있지만, 약간의 수정으로 이 속성을 다시 작성하는 데는 오래 걸리지 않습니다.

"Alt" 속성

이는 가장 중요한 요소이며, Google이 읽는 요소이기 때문입니다. URL의 순위를 매기고 싶은 메인 키워드를 포함해야 하며 짧은 설명을 담아야 합니다.

문법은 다음과 같습니다:

<img src=”IMAGE LINK” alt=”IMAGE ALT DESCRIPTION” />

최적화된 이미지 예시:

월간 검색 평균이 90(스페인 기준)인 타깃 키워드 "ciberseguridad pymes"를 기준으로 이 이미지에 대해 각 필드를 어떻게 최적화할 수 있는지 살펴보겠습니다:

파일 이름:

• ›

  잘못된 예: 04745892595295.jpg

• ›

  올바른 예: ciberseguridad-pymes.jpg

Title: Consejos de ciberseguridad para empresarios y pymes. (기업과 중소기업을 위한 사이버 보안 조언.)

Alt 텍스트: Ciberseguridad para pymes y empresarios: consejos. (중소기업과 기업을 위한 사이버 보안: 팁.)

이렇게 하면 모든 필드를 최적화하고 상위 위치를 위해 경쟁할 준비가 된 이미지를 얻게 됩니다. 물론 이미지를 최적화한다고 해서 처음에 나타나는 것이 보장되지는 않지만, 이를 달성하기 위한 첫 번째 단계입니다 :)

5. 의미론적 맥락

Google은 가장 관련성이 높은 이미지가 주변 콘텐츠와 일치하는 이미지라고 간주합니다. 따라서 관련 텍스트를 포함하는 것이 권장됩니다. 이렇게 하면 URL의 전체 의미론적 맥락이 확장됩니다.

6. 이미지 전용 사이트맵

Google 봇이 이미지를 더 효율적으로 추적할 수 있도록 이런 종류의 파일에 전용 sitemap.xml을 만드는 것이 필요합니다. WordPress에서는 Yoast 또는 RankMath와 같은 도구(플러그인)로 자동 생성할 수 있습니다. WordPress에서 작업하지 않는다면 대체 도구나 수동 프로그래밍 도구(URL 추적)를 사용할 수 있습니다.

다음으로 글 안에 두 개의 이미지가 있는 사이트맵 예시를 보겠습니다:

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"> <url> <loc>http://example.com/sample.html&lt;/loc> <image:image> <image:loc>http://example.com/image.jpg&lt;/image:loc> </image:image> <image:image> <image:loc>http://example.com/photo.jpg&lt;/image:loc> </image:image> </url> </urlset>

이미지 사이트맵을 만들 때 가장 일반적으로 사용되는 태그 중 일부는 다음과 같습니다:

→ 이미지 제목

→ 파일이 저장된 URL 또는 경로

→ 각주

→ 라이선스 유형

→ 지리적 위치 정보

• ›문서: 이미지 사이트맵에 대한 예시, 구현 튜토리얼 등에 대한 많은 정보를 Google 블로그에서 찾을 수 있습니다.

구현이 완료된 후에는 Search Console에서 인덱싱 커버리지 상태를 확인할 수 있습니다.

7. 이미지 Lazy Loading(주문형 로드)

이미지는 웹사이트에서 가장 많이 사용되는 리소스 중 하나입니다. "사진 한 장이 천 마디 말의 가치가 있다"고들 하기 때문입니다. 그래서 모든 웹사이트의 시각적 측면은 이러한 멀티미디어 요소를 사용하여 신중하게 개발됩니다. 그러나 이를 최적화하지 않으면 사용자 경험과 웹의 로딩 시간에 부정적인 영향을 미칠 수 있습니다. 이러한 이유로 lazy loading이 권장됩니다.

lazy loading 덕분에 이미지는 화면에 표시될 때만 로드됩니다. 예를 들어 디바이스 화면에서 아직 보이지 않는 페이지의 하단에 있는 경우 사용자가 스크롤을 내리기 전까지는 로드되지 않습니다. 이는 HTTPS 요청 수를 크게 줄이고 로딩 시간을 단축하여 페이지가 Google에 더 호감을 주도록 만듭니다.

WordPress에서 Lazy loading을 구현하는 플러그인

이 소프트웨어 플랫폼에서 웹사이트를 관리한다면 lazy loading을 구현하여 이미지를 최적화하고 싶을 때 관심을 끌 만한 플러그인이 있습니다. 설치된 테마에 이 기능이 포함되어 있는지 확인하는 것을 잊지 마세요. 그렇지 않다면 흥미로운 몇 가지가 있습니다:

• ›

  BJ Lazy Load: 설치 및 설정이 쉽고 가장 인기 있는 도구 중 하나로 90,000회 이상의 설치 수를 자랑합니다. 이 보완 기능 덕분에 이미지를 다른 화면 크기에 맞게 조정할 수 있습니다.

• ›

  Lazy Load by WP Rocket: 설정이 간단하고 쉬우며(기본적으로 다른 옵션을 제공하지 않기 때문에), 이 플러그인의 장점은 jQuery와 같은 JavaScript 라이브러리를 사용하지 않는다는 것입니다.

8. 이미지에 CDN 사용

**CDN(Content Delivery Network)**은 요청자의 위치에 따라 캐시된 웹사이트의 콘텐츠를 제공하는 전 세계에 분산된 서버 세트입니다. 이 호스팅 네트워크 덕분에 요청자에 더 가까운 서버가 요청된 웹사이트의 사본을 제공합니다.

따라서 CDN을 사용하면 URL이 더 빠르게 다운로드되어 사이트의 로딩 시간이 단축되고 유기적 순위가 향상됩니다.

이미지를 표시하기 위해 CDN(예: Cloudflare)을 사용하면 이미지가 더 빠르게 다운로드되고 표시됩니다. 이러한 직관적인 흐름은 SEO를 직접적으로 개선합니다.

9. 기타 고려사항

SEO 가치가 있는 이미지, 즉 더 높은 순위를 매기고 싶은 이미지는 URL의 소스 코드에 포함되어야 합니다. CSS의 background 속성으로 구현된 이미지는 Google이 이러한 종류의 스타일 시트를 이해할 수 없기 때문에 보이지 않습니다.

또한 이미지를 최적화할 때 놓쳐서는 안 될 다른 세부 사항이 있습니다:

• ›

  Exif: 모든 이미지와 함께 사진을 찍은 날짜와 이 분야 전문가에게 관련된 기타 데이터와 같은 속성 세트가 저장됩니다. 그러나 이 정보는 SEO 가치가 없으며 공간만 차지합니다. 이 정보를 삭제하면 이미지를 최적화하고 무게를 줄이는 데 도움이 될 수 있습니다.

• ›

  "longdesc": 이 속성은 보통 잊혀지지만 이미지에 구현하면 흥미로울 수 있습니다. 이는 이미지에 대한 긴 설명입니다.

• ›

  링킹: 링크 빌딩은 페이지의 유기적 성장에서 근본적인 역할을 하지만 이미지에서도 마찬가지입니다. 이러한 이미지에도 링크를 걸 수 있고 따라서 검색 엔진에서 더 높은 인지도를 달성할 수 있습니다.

필수 팁을 놓치고 있나요? 여러분의 의견을 듣고 싶습니다. 아래에 댓글을 남겨주시고 자유롭게 지식을 공유해 주세요!