Google 이미지 검색엔진 최적화 권장사항

Google에서는 텍스트 검색 결과 이미지, Google 디스커버, Google 이미지와 같이 사용자가 웹에서 시각적으로 정보를 찾도록 도움을 주는 여러 Google 검색 기능과 제품을 제공합니다. 각 기능 및 제품은 서로 다르게 보이지만, 해당 항목에 이미지를 표시하기 위한 일반적인 권장사항은 동일합니다.

Google 검색결과, 이미지 탭, 디스커버의 이미지를 보여주는 그림

다음 권장사항에 따라 Google 검색 결과에 표시되는 이미지를 최적화할 수 있습니다.

  1. Google의 이미지 탐색 및 색인 생성 돕기
  2. 이미지 방문 페이지 최적화하기

Google의 이미지 탐색 및 색인 생성 돕기

Google 검색 결과에 콘텐츠를 표시하기 위한 기술 요구사항은 이미지에도 적용됩니다. 이미지는 HTML과 상당히 다른 형식이므로 이미지의 색인을 생성하려면 추가 요구사항이 있습니다. 예를 들어 사이트에서 이미지를 찾는 것이 다르고, 이미지 표시도 이미지의 색인 생성 여부와 알맞은 키워드에 영향을 줍니다.

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

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

맞는 예:

<img src="puppy.jpg" alt="골든 리트리버 강아지" />

나쁜 예:

<div style="background-image:url(puppy.jpg)">골든 리트리버 강아지</div>

이미지 사이트맵 사용하기

이미지 사이트맵을 제출하여 Google이 다른 방법으로는 발견하지 못할 수도 있는 이미지의 URL을 제공하세요.

일반 사이트맵과 달리 이미지 사이트맵의 <image:loc> 요소에 다른 도메인의 URL을 포함할 수 있습니다. 따라서 콘텐츠 전송 네트워크(CDN)를 사용하여 이미지를 호스팅할 수 있습니다. CDN을 사용하는 경우 Google에서 알려 드릴 수 있도록 Search Console에서 CDN 도메인 이름의 소유자를 확인하세요.

반응형 이미지

반응형 웹페이지를 설계하면 사용자가 다양한 기기 유형에서 웹페이지에 액세스할 수 있으므로 더 나은 사용자 환경을 제공합니다. 웹사이트에서 이미지를 처리하기 위한 권장사항은 반응형 이미지 가이드에서 확인하세요.

웹페이지는 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">

<picture> 요소는 같은 이미지의 서로 다른 <source> 버전을 그룹화하는 데 사용되는 컨테이너입니다. 이 요소는 대체 접근방식을 지원하므로 브라우저에서 픽셀 밀도, 화면 크기 등 기기 기능에 따라 적절한 이미지를 선택할 수 있습니다. picture 요소는 아직 새 형식을 지원하지 않을 수 있는 클라이언트를 위한 단계적 성능 저하 기능이 내장된 새 이미지 형식을 사용할 때도 유용합니다.

HTML 표준의 섹션 4.8.1에 따라 다음 형식을 사용하여 picture 요소를 사용할 때 대체용으로 img 요소를 src 속성과 함께 제공해야 합니다.

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="An 1800s oil painting of The Great Pyramid">
</picture>

지원되는 이미지 형식 사용

Google 검색은 BMP, GIF, JPEG, PNG, WebP, SVG 형식의 이미지를 지원합니다. 파일 이름 확장자를 파일 형식과 일치시키는 것도 좋습니다.

이미지를 데이터 URI의 형식으로 인라인으로 삽입할 수도 있습니다. 데이터 URI를 사용하면 이미지와 같은 파일을 인라인으로 삽입할 수 있습니다. 다음 형식을 사용해 img 요소의 src 속성을 Base64로 인코딩된 문자열로 설정하세요.

<img src="data:image/svg+xml;base64,[data]">

이미지를 인라인으로 삽입하면 HTTP 요청이 줄어들 수 있지만 페이지의 크기가 상당히 늘어날 수 있으므로 이를 신중하게 판단하여 사용합니다. 자세한 정보는 web.dev 페이지에서 인라인 이미지의 장점과 단점을 확인하세요.

속도 및 품질 최적화하기

고화질 사진은 흐리고 선명하지 않은 이미지보다 사용자에게 매력적으로 다가갑니다. 또한 선명한 이미지는 검색 결과 썸네일 이미지에서 사용자에게 더 매력적으로 보이므로 사용자의 트래픽을 유도할 가능성이 높아질 수 있습니다. 즉, 이미지는 전체 페이지 크기를 결정하는 가장 큰 요인으로, 이미지로 인해 페이지가 느려지고 로드 비용이 높아질 수 있습니다. 속도가 빠른 양질의 사용자 환경을 제공하려면 최신 이미지 최적화반응형 이미지 기술을 사용하세요.

PageSpeed Insights로 사이트 속도를 분석하고 속도가 중요한 이유를 방문하여 웹사이트 성능을 향상하기 위한 권장사항과 기술을 알아보세요.

이미지 방문 페이지 최적화하기

즉시 명확해지는 것은 아니지만 이미지가 포함된 페이지의 콘텐츠와 메타데이터는 이미지가 Google 검색 결과에 표시되는 방법과 위치에 큰 영향을 미칠 수 있습니다.

페이지 제목 및 설명 확인하기

Google 검색은 각 검색 결과를 가장 효과적으로 설명하고 사용자 검색어와 검색 결과의 연관성을 보여 주는 제목 링크와 스니펫을 자동 생성합니다. 이렇게 하면 사용자가 검색결과를 클릭할지 결정하는 데 도움이 됩니다. 다음은 Google 검색결과 페이지에서 제목 링크와 스니펫이 어떻게 표시되는지 보여주는 예입니다.

이미지 검색결과의 제목과 설명을 보여주는 그림

Google에서는 각 페이지의 titlemeta 태그에 포함된 정보 등의 다양한 소스를 사용하여 이러한 정보를 생성합니다.

Google의 제목스니펫 가이드라인을 따르면 페이지를 설명하는 제목 링크 및 스니펫의 품질을 향상시킬 수 있습니다.

구조화된 데이터 추가하기

구조화된 데이터를 추가하면 Google에서 이미지를 Google 이미지의 눈에 잘 띄는 배지와 같은 리치 결과로 표시할 수 있습니다. 이렇게 하면 사용자에게 페이지에 관해 유용한 정보를 제공하고, 더욱 효과적으로 타겟팅된 트래픽을 사이트로 유도할 수 있습니다.

구조화된 데이터에 관한 일반적인 가이드라인 및 사용 중인 구조화된 데이터에 해당하는 가이드라인을 준수하세요. 그러지 않으면 구조화된 데이터가 Google 이미지에 리치 결과로 표시되지 못할 수도 있습니다. Google 이미지에서 배지 및 리치 결과를 표시하려면 각 구조화된 데이터 유형에 이미지 속성이 있어야 합니다. 다음은 Google 이미지에서 리치 결과가 표시되는 방식을 보여주는 두 가지 예입니다.

리치 결과가 Google 이미지에 어떻게 표시되는지 보여주는 그림

구체적인 파일 이름, 제목, 대체 텍스트 사용

Google에서는 캡션 및 이미지 제목을 비롯한 페이지 콘텐츠에서 이미지 주제에 관한 정보를 추출합니다. 가능한 경우 이미지를 관련 텍스트 근처와 이미지 주제와 관련 있는 페이지에 배치하세요.

파일 이름도 마찬가지로 Google에서 이미지 주제를 간단하게 파악하는 데 도움이 됩니다. 가능한 경우 짧지만 충분한 설명이 담긴 파일 이름을 사용하세요. 예를 들어 my-new-black-kitten.jpgIMG00023.JPG보다 더 좋습니다. 가능한 경우 image1.jpg, pic.gif, 1.jpg와 같은 일반적인 파일 이름은 사용하지 마세요. 사이트에 수천 개의 이미지가 있으면 이미지의 이름을 자동 지정하는 것이 좋습니다. 이미지를 현지화하는 경우 파일 이름도 번역해야 합니다. 라틴어 이외의 문자 또는 특수문자를 사용하는 경우 URL 인코딩 가이드라인을 준수하세요.

이미지에 더 많은 메타데이터를 제공할 때 가장 중요한 속성은 대체 텍스트(이미지를 설명하는 텍스트)로 스크린 리더를 사용하거나 낮은 대역폭 연결을 사용하는 사용자를 비롯하여 웹페이지에서 이미지를 볼 수 없는 사람들의 접근성도 향상합니다.

Google은 대체 텍스트와 함께 컴퓨터 비전 알고리즘과 페이지 콘텐츠를 사용하여 이미지의 주제를 파악합니다. 또한 이미지의 대체 텍스트는 이미지를 링크로 사용할 때 앵커 텍스트로 활용할 수 있습니다.

대체 텍스트를 작성할 때는 키워드를 적절히 사용하고 페이지 콘텐츠의 맥락에 맞는 유용하고 정보가 풍부한 콘텐츠를 만드는 데 중점을 두세요. alt 속성을 키워드로 채우는 것(유인 키워드 반복)은 좋지 않습니다. 사용자 환경에 악영향을 미치고 스팸 사이트로 간주될 수 있기 때문입니다.

나쁜 예(대체 텍스트 누락됨):

<img src="puppy.jpg"/>

나쁜 예(유인 키워드 반복):

<img src="puppy.jpg" alt="강아지 개 아기 강아지 멍멍이 애완견 새끼 강아지 리트리버 래브라도 울프하운드 세터 포인터 강아지 잭 러셀 테리어 강아지 개 사료 저렴한 개 사료 강아지 먹이"/>

좋은 예:

<img src="puppy.jpg" alt="강아지"/>

가장 좋은 예:

<img src="puppy.jpg" alt="가져오기 놀이를 하는 새끼 달마시안"/>

또한 W3 가이드라인에 따라 대체 텍스트의 접근성을 고려합니다. <img> 요소의 경우 요소의 alt 속성을 추가할 수 있고 인라인 <svg> 요소에는 <title> 요소를 사용할 수 있습니다. 예를 들면 다음과 같습니다.

<svg aria-labelledby="svgtitle1">
  <title id="svgtitle1">Googlebot wearing an apron and chef hat, struggling to make pancakes on the stovetop</title>
</svg>

접근성을 검사하고 느린 네트워크 연결 에뮬레이터를 사용하여 콘텐츠를 테스트하는 것이 좋습니다.

Google 이미지 인라인 연결 선택 해제

원하는 경우 Google 이미지 검색결과에서 인라인 연결을 선택 해제하여 검색결과 페이지에 원본 크기의 이미지가 표시되지 않게 할 수 있습니다. 인라인 연결을 선택 해제하려면 다음 단계를 따르세요.

  1. 이미지가 요청되면 요청의 HTTP 리퍼러 헤더를 검사합니다.
  2. Google 도메인에서 받은 요청이 있으면 내용 없이 200 HTTP 상태 코드 또는 204 HTTP 상태 코드를 포함하여 응답합니다.

Google에서는 여전히 페이지를 크롤링하고 이미지를 확인할 수 있지만 크롤링 시 검색결과에 생성된 미리보기 이미지를 표시합니다. 이 설정은 언제든지 선택 해제할 수 있으며 웹사이트 이미지를 다시 처리하지 않아도 됩니다. 이 동작은 이미지 클로킹으로 간주되지 않으며 직접 조치로 이어지지 않습니다.

이미지가 검색 결과에 완전히 표시되지 않도록 차단할 수도 있습니다.

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