구글 검색 결과에 글 썸네일이 안 나오거나 다른 그림이 나올 때, 무엇을 고칠까요? 대표 이미지 지정과 max-image-preview 설정

검색 결과의 글 썸네일은 Google이 자동으로 선택합니다. 그래서 먼저 고를 수 있는 이미지가 있는지 확인합니다. 그다음 메타데이터로 선호하는 대표 이미지를 알려 줍니다. 주로 점검할 곳은 img 태그 사용, 크롤링 허용, max-image-preview 값입니다. 근거는 Google 검색 센터의 이미지·로봇 메타 태그·Article·디스커버 문서입니다.

검색 결과 썸네일은 누가 고르나요?

이미지 검색엔진 최적화 권장사항은 이미지 미리보기 선택이 완전히 자동화되어 있다고 밝힙니다. Google은 다양한 소스를 고려해 그 페이지의 어떤 이미지를 보여 줄지 정합니다.

검색 결과 시각적 요소 안내는 텍스트 검색 결과 이미지를 이렇게 설명합니다. 특정 웹페이지에서 검색어와 관련성이 가장 높은 이미지입니다.

즉 같은 글이라도 검색어가 달라지면 다른 이미지가 나올 수 있습니다. 본문 중간의 도식이 썸네일로 보인다면 그 검색어에 더 가깝다고 판단됐을 가능성이 있습니다.

따라서 「항상 이 그림만 나오게」 고정하는 설정은 문서에 없습니다. 할 수 있는 일은 고를 후보를 갖추고 선호하는 이미지를 알려 주는 것입니다.

썸네일이 아예 안 나오는 원인은 무엇인가요?

썸네일이 아예 없다면 원인은 대개 두 갈래입니다. 고를 이미지가 없거나, 표시를 막는 설정이 있는 경우입니다.

이미지 권장사항에 따르면 Google은 img 요소의 src 속성에서 이미지를 찾습니다. picture 요소 안의 img도 인식하지만 CSS 이미지는 색인하지 않습니다.

글 머리 그림을 background-image로 깔았다면 문제가 됩니다. Google에는 이미지가 없는 페이지로 보일 수 있습니다. 대표 그림은 img 태그로 넣고 alt를 함께 씁니다.

<!-- 색인되지 않는 방식 -->
<div style="background-image:
  url(cover.webp)"></div>

<!-- 권장 방식 -->
<img src="/img/cover.webp"
     alt="그림 내용 설명">

Article 구조화 데이터 문서는 이미지 URL이 크롤링·색인 가능해야 한다고 명시합니다. 이미지 폴더를 robots.txt로 막았다면 이 조건을 충족하지 못합니다.

지원 형식은 BMP·GIF·JPEG·PNG·WebP·SVG·AVIF입니다. 파일 확장자는 실제 형식과 맞춥니다.

다른 그림이 나오면 무엇을 지정하나요?

다른 그림이 나온다면 선호하는 이미지를 메타데이터로 알려 줍니다. 이미지 권장사항은 다음 세 가지 중 하나로 선택에 영향을 미칠 수 있다고 안내합니다.

<!-- head 안 -->
<meta property="og:image"
 content=
 "https://example.com/c.webp">

<script
 type="application/ld+json">
{"@context":
   "https://schema.org",
 "@type": "BlogPosting",
 "mainEntityOfPage":
   "https://example.com/p/",
 "image":
   "https://example.com/c.webp"}
</script>

예시 주소는 설명용입니다.

넥스트티는 여러 방법을 함께 쓴다면 같은 이미지 주소를 넣도록 권합니다. 이미지가 서로 다르면 어느 쪽이 선호 이미지인지 판단하기 어려울 수 있다고 봅니다.

이와 별도로 이미지 권장사항은 같은 이미지를 같은 URL로 참조하라고 적고 있습니다. 캐시·크롤링 효율 때문입니다. 캐시 매개변수를 붙인 주소와 원래 주소를 섞어 쓰지 않는 것이 좋습니다.

대표 이미지는 어떤 그림이 좋나요?

이미지 권장사항은 구조화 데이터나 og:image에 넣을 그림의 조건을 따로 정리해 두었습니다.

Article 문서는 비율이 다른 고해상도 이미지를 여러 개 제공하는 것이 좋다고 적고 있습니다. 디스커버 문서는 총 픽셀 수 30만 초과라는 기준도 제시합니다.

디스커버는 이미지를 자동으로 자르려고 시도합니다. 직접 자른 그림을 쓴다면 중요한 부분이 16:9 안에 들어가야 합니다.

넥스트티 실무에서는 대표 그림의 핵심 물체를 가운데에 둡니다. 정사각형이나 가로형으로 잘려도 무엇을 다룬 글인지 알아보게 하려는 것입니다.

max-image-preview는 어떻게 설정하나요?

로봇 메타 태그 사양의 max-image-preview는 미리보기 이미지의 최대 크기를 정합니다. 규칙을 지정하지 않으면 Google은 기본 크기의 미리보기 이미지를 표시할 수 있습니다.

썸네일이 전혀 나오지 않는다면 페이지나 HTTP 헤더에 none이 들어 있는지부터 살핍니다. 테마나 SEO 플러그인이 자동으로 넣은 규칙도 점검 대상입니다.

사양은 로봇 규칙이 충돌하면 더 제한적인 규칙이 적용된다고 밝힙니다. 예를 들어 max-image-preview 값 large와 none이 함께 있으면 더 제한적인 none이 적용됩니다.

<!-- 큰 미리보기 허용 -->
<meta name="robots"
 content=
 "max-image-preview:large">

<!-- 남아 있으면
     썸네일 없음 -->
<meta name="robots"
 content=
 "max-image-preview:none">

디스커버 문서는 큰 이미지에 max-image-preview:large 설정을 권합니다. AMP 사용도 함께 제시합니다. 디스커버 유입을 기대하는 블로그라면 large를 고려할 만합니다.

nosnippet은 텍스트 스니펫을 막는 규칙입니다. 사양에 따르면 정적 썸네일 이미지는 계속 표시될 수 있습니다. noimageindex는 페이지 이미지의 색인을 막는 규칙이니 함께 점검합니다.

고친 뒤에는 무엇을 확인하나요?

설정을 고쳤다면 Google이 다시 크롤링한 뒤에야 결과에 반영됩니다. 확인은 다음 순서로 합니다.

Article 문서에 따르면 Google이 페이지를 찾아 크롤링하기까지 며칠이 걸릴 수 있습니다. 바로 바뀌지 않더라도 설정을 여러 번 바꾸지 말고 기다립니다.

alt·파일명·압축 같은 이미지 기본기는 이미지 SEO 실전 가이드에서 다뤘습니다. 검색 결과의 날짜와 설명문은 검색 결과 날짜 바로잡기와 메타 설명과 스니펫을 참고하십시오.

참고 자료

• Google 검색 센터 — 이미지 검색엔진 최적화 권장사항
• Google 검색 센터 — 로봇 메타 태그·data-nosnippet·X-Robots-Tag 사양
• Google 검색 센터 — 기사(Article) 구조화된 데이터
• Google 검색 센터 — 디스커버 및 웹사이트
• Google 검색 센터 — Google 검색결과의 시각적 요소 갤러리