검색결과 이미지 카드를 코드 하나의 결과로 보기 전 검증할 것

자동 이미지 선택과 개별 설정의 관계

Google은 텍스트 검색 결과의 이미지와 디스커버, Google 이미지 등 여러 기능을 설명합니다. 각 기능은 서로 다르게 보이지만 이미지를 표시하기 위한 일반 권장사항은 같다고 안내합니다. 어떤 검색 서비스의 어떤 화면에서 본 이미지인지 구별해 같은 표시 형태를 비교할 대상입니다.

이 글에서 사용하는 공식 자료는 Google의 이미지 안내입니다. 네이버에서 관찰한 카드의 선택 규칙을 같은 자료로 설명하지 않습니다. 검색 서비스나 화면이 다른 사례는 별도 관측으로 구별하며 한 사이트의 코드가 다른 서비스의 이미지 노출까지 결정한다는 해석을 만들지 않습니다.

Google은 검색결과에 콘텐츠를 표시하기 위한 기술 요구사항이 이미지에도 적용되며 이미지의 탐색과 색인에는 추가 조건이 있다고 설명합니다. 페이지의 코드에 그림 주소가 있다는 상태와 검색엔진이 그 이미지를 찾고 처리할 수 있는 상태는 구별할 조건입니다. 실제로 어떤 요소에서 이미지를 제공하는지 조사할 수 있습니다.

이미지를 찾는 요소와 제공 주소

Google은 표준 HTML 이미지 요소를 사용하면 크롤러가 이미지를 찾고 처리할 수 있다고 안내합니다. picture 안에 포함됐더라도 img의 src 속성에서 이미지를 찾을 수 있으며 CSS 이미지의 색인은 생성하지 않는다고 설명합니다. 화면에 같은 그림이 보이더라도 코드에서 제공하는 방식이 같다고 판단하지 않습니다.

이미지 사이트맵은 다른 방식으로 찾지 못할 수 있는 이미지 URL을 제공하는 방법입니다. 사이트맵이 있다는 사실과 개별 페이지가 어떤 이미지 요소를 제공하는지는 별도 정보입니다. 카드가 있는 문서와 없는 문서에서 두 방식을 각각 읽어 탐색 경로의 차이가 있는지 비교할 수 있습니다.

일반 사이트맵과 달리 이미지 사이트맵에는 다른 도메인의 이미지 URL을 포함할 수 있어 CDN으로 이미지를 호스팅할 수 있다고 안내합니다. Google은 CDN 도메인의 소유자를 Search Console에서 확인하라고 권고합니다. 이미지가 페이지와 다른 출처에 있다는 사실만으로 잘못된 제공 방식이라고 단정하지 않는 조건입니다.

여러 페이지가 같은 이미지를 참조할 때에는 같은 URL로 일관되게 참조하도록 안내합니다. Google이 여러 번 요청하지 않고 이미지를 캐시하고 재사용할 수 있도록 하는 목적입니다. 코드의 메타데이터 외에도 실제 제공 주소와 참조 관계를 비교할 이유가 있습니다. 이를 방문자의 브라우저 속도를 실제로 측정한 결과와 혼동하지 않습니다.

방문 페이지가 설명하는 이미지의 주제

Google은 이미지의 캡션과 제목을 비롯한 페이지 콘텐츠에서 이미지 주제를 알아낸다고 설명합니다. 가능한 경우 관련 텍스트 근처와 주제에 맞는 페이지에 이미지를 배치하도록 안내합니다. 같은 파일을 여러 문서에 쓰더라도 주변에서 무엇을 설명하는지 읽어 방문 페이지의 맥락을 비교할 수 있습니다.

대체 텍스트는 이미지를 볼 수 없는 사람의 접근성을 높이고 Google이 페이지 콘텐츠와 컴퓨터 비전 알고리즘을 함께 사용해 주제를 파악할 때 참고하는 정보입니다. 병원 원고에서는 실제 그림이 설명하는 내용과 문서의 맥락에 맞는지 판단할 수 있습니다. 그림을 보지 않고 병원명이나 진료 주제만 반복해 대체 설명을 작성하지 않습니다.

공식 안내는 대체 텍스트를 키워드로 채우는 방식이 이용 경험에 악영향을 주고 스팸으로 간주될 수 있다고 설명합니다. 카드가 관찰된 사이트의 단어 나열을 같은 노출을 만드는 공식으로 복사하지 않습니다. 유용하고 정보가 충분한 설명을 페이지의 실제 맥락에 맞추는 권장사항과 특정 표시의 원인을 단정하는 주장은 구별합니다.

페이지 제목과 설명도 방문 페이지의 정보를 구성합니다. Google은 제목 링크와 스니펫을 여러 소스에서 자동 생성해 검색어와 결과의 관계를 설명한다고 안내합니다. 이미지가 있는 결과를 비교할 때 이미지 주소만 떼어 보기보다 그 이미지가 연결되는 문서를 어떤 제목과 설명이 나타내는지도 읽을 조건입니다.

파일 이름도 Google이 이미지 주제를 간단하게 이해하는 데 도움이 될 수 있다고 안내합니다. 짧지만 설명이 충분한 이름을 사용하고 image1처럼 일반적인 이름을 피하라는 권고입니다. 사이트에 수천 개의 이미지가 있으면 이름을 자동으로 지정할 수 있다는 조건도 있습니다. 이미지 카드의 사례를 비교할 때에는 이름을 직접 붙였는지보다 실제 이름이 해당 그림의 주제를 설명하는지 읽을 수 있습니다. 메타데이터의 코드와 파일 이름의 의미는 별도 공개 요소로 구별합니다.

선호 이미지로 제공할 메타데이터

Google은 메타데이터로 선호 이미지를 제공해 이미지 선택에 영향을 미칠 수 있다고 설명합니다. 방법에는 schema.org의 primaryImageOfPage 속성에 URL이나 ImageObject를 지정하는 방식이 있습니다. 페이지의 어떤 이미지를 선호하는지 알려 주는 정보이며 실제로 어떤 주소를 제공했는지 비교할 수 있습니다.

이미지 URL이나 ImageObject를 지정하고 mainEntity 또는 mainEntityOfPage로 기본 항목에 연결하는 방식도 안내합니다. og:image 메타 태그도 선호 이미지 정보의 예입니다. 원문은 이런 소스 중 하나를 통해 선호 이미지를 제공하는 방식을 설명하므로 모두 있어야만 카드가 나온다는 필수 코드 목록으로 바꾸지 않습니다.

이 정보에 사용할 이미지는 페이지와 관련이 있고 페이지를 대표하는 이미지로 선택하도록 안내합니다. 사이트 로고 같은 일반 이미지나 텍스트가 포함된 이미지를 사용하지 말라는 권고도 있습니다. 병원 로고를 넣은 메타데이터와 해당 문서의 내용을 대표하는 사진을 지정한 메타데이터의 역할을 같은 것으로 판단하지 않습니다.

가로세로 비율이 극단적인 이미지를 피하고 가능한 한 고해상도 이미지를 쓰라는 기준도 있습니다. 선호 주소가 적혀 있다는 상태 외에 그 주소의 실제 그림이 어떤 비율과 품질인지 조사할 조건입니다. 이런 조건을 비교하지 않은 두 사이트에서 메타 태그 하나의 존재만으로 이미지 선택의 원인을 결정하지 않습니다.

코드 비교와 노출 관찰의 서로 다른 증거

카드가 있는 사이트와 없는 사이트를 비교할 때에는 같은 검색 서비스와 표시 유형, 검색어 등 관찰 조건을 구별할 수 있습니다. 조건이 없는 화면 한 장은 어떤 설정을 추가로 조사할지 정하는 가설의 자료로 사용할 수 있지만 코드의 단독 효과를 입증한 결과로 표시하지 않습니다. 이 비교 방법은 공식 안내의 여러 소스 선택을 참고한 진단 제안입니다.

메타데이터를 수정했다면 이미지 자체나 본문 맥락, 제공 주소 등 함께 바뀐 부분이 있는지도 읽습니다. 여러 요소가 동시에 바뀐 뒤에 이미지가 관찰됐다는 사실과 특정 코드만의 영향이 확인된 상태는 다릅니다. 실제로 관찰하지 않은 노출이나 변경 결과를 성공 사례로 만들어 설명하지 않습니다.

고화질 이미지의 실제 로드 부담도 별도로 판단할 수 있습니다. Google은 이미지가 전체 페이지 크기에 큰 영향을 주고 페이지를 느리게 만들 수 있어 이미지 최적화와 반응형 이미지 기술을 안내합니다. 미리보기 선택에 참고할 품질과 방문 페이지에서 제공할 속도는 각각 읽어야 할 조건입니다. 특정 코드에 관한 비교 때문에 이용자의 실제 접근 조건을 빼지 않습니다.

이어서 읽을 주제

홈페이지의 검색 노출에 필요한 다른 항목을 알아보려면 병원 홈페이지 · SEO 주제를 이어서 읽을 수 있습니다.