
- 01원인
썸네일은 구글이 자동으로 고르며, 대표 이미지 신호가 없거나 약하면 로고·배너 같은 엉뚱한 그림이 잡힙니다.
- 02지정
og:image 메타 태그나 구조화 데이터의 image 속성으로 글을 대표하는 그림을 알려 줍니다.
- 03설정
robots 메타 태그의 max-image-preview가 none으로 되어 있으면 그림 미리보기 자체가 막힙니다.
목차
공들여 쓴 글이 검색 결과에 썸네일 없이 글자만 나오거나, 본문과 상관없는 회사 로고나 배너가 붙어 나오는 경우가 있습니다. 썸네일은 클릭 여부에 영향을 주는 첫인상이라 그냥 두기 아깝습니다. 이 글은 구글 검색 센터 문서에 나온 내용을 바탕으로 점검 순서를 정리합니다.
검색 결과의 썸네일은 누가 고르나요?
구글이 자동으로 고릅니다. 구글은 이미지 미리보기 선택이 완전히 자동화되어 있고, 페이지 안의 여러 출처를 함께 고려한다고 안내합니다.
그래서 "이 그림을 써라"라고 명령할 수는 없습니다. 대신 어떤 그림이 이 페이지를 대표하는지 신호를 주면 선택에 영향을 줄 수 있습니다. 엉뚱한 그림이 나온다면 대개 그 신호가 없거나, 있더라도 로고처럼 페이지와 관련이 약한 그림을 가리키는 경우입니다.
대표 이미지는 어떻게 지정하나요?
메타 태그나 구조화 데이터로 지정합니다. 구글이 안내하는 방법은 세 가지입니다.
| 방법 | 넣는 곳 | 예 |
|---|---|---|
| og:image 메타 태그 | <head> 안 |
<meta property="og:image" content="https://example.com/img/cover.webp"> |
| 글 구조화 데이터의 image | BlogPosting·Article 등의 JSON-LD | "image": "https://example.com/img/cover.webp" |
| 페이지의 primaryImageOfPage | WebPage JSON-LD | "primaryImageOfPage": "https://example.com/img/cover.webp" |
예시컴퍼니의 칼럼이라면 아래처럼 og:image와 구조화 데이터의 image를 같은 그림으로 맞춰 두는 것이 가장 간단합니다.
<meta property="og:image" content="https://example.com/column/cover-thumbnail.webp">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "30평 아파트 인테리어 비용, 항목별로 얼마나 드나요?",
"image": ["https://example.com/column/cover-thumbnail.webp"]
}
</script>
같은 페이지에서 두 신호가 서로 다른 그림을 가리키면 선택이 흔들릴 수 있으니, 지정할 때는 하나로 맞춥니다.
어떤 그림을 대표 이미지로 골라야 하나요?
페이지 내용을 보여 주는, 관련 있는 그림을 고릅니다. 구글은 대표 이미지로 회사 로고 같은 일반적인 그림이나 글자가 들어간 그림, 지나치게 좁거나 넓은 비율의 그림은 피하라고 권합니다.
- 글의 주제를 보여 주는 그림인가 (비용 글이면 견적표, 시공 글이면 시공 사진)
- 로고·배너·아이콘 같은 일반 그림이 아닌가
- 글자가 들어간 그림(제목을 얹은 배너 등)이 아닌가
- 지나치게 좁거나 넓은 비율이 아닌가
- 해상도가 충분한가
해상도는 쓰는 곳마다 권장 기준이 다릅니다. Article 구조화 데이터 문서는 가로×세로가 5만 픽셀 이상인 고해상도 그림을 16:9, 4:3, 1:1 비율로 여러 장 넣기를 권합니다. 디스커버 문서는 가로 1200px 이상의 큰 그림을 권장합니다. 한 장만 준비한다면 가로 1200px 이상, 16:9 비율이 무난합니다.
지정했는데도 그림이 안 나오면 무엇을 보나요?
robots 메타 태그의 max-image-preview 설정부터 확인합니다. 이 값이 none이면 검색 결과에 이미지 미리보기를 보여 주지 말라는 뜻이라, 대표 이미지를 아무리 잘 골라도 썸네일이 나오지 않습니다.
| 값 | 뜻 |
|---|---|
| none | 이미지 미리보기를 보여 주지 않음 |
| standard | 기본 크기의 미리보기를 보여 줄 수 있음 |
| large | 화면 너비까지의 큰 미리보기를 보여 줄 수 있음 |
이 값을 아예 적지 않으면 구글은 기본 크기의 미리보기를 보여 줄 수 있습니다. 디스커버처럼 큰 그림이 유리한 곳까지 생각한다면 large로 열어 두는 편이 좋습니다.
<meta name="robots" content="max-image-preview:large">
설정을 확인했다면 다음 순서로 점검합니다.
- 대표 이미지 주소가 실제로 열리는지 브라우저에서 직접 열어 본다
- robots.txt가 이미지 폴더를 막고 있지 않은지 확인한다
- 그림이 CSS 배경이 아니라
<img>태그로 본문에 들어가 있는지 본다 - 서치콘솔 URL 검사로 구글이 본 페이지에 대표 이미지 태그가 있는지 확인한다
3번이 의외로 자주 걸립니다. 구글 문서는 CSS 배경으로 넣은 그림은 이미지로 색인하지 않는다고 설명합니다. 본문에서 의미가 있는 그림은 <img> 태그와 대체 텍스트(alt)로 넣습니다.
글이 많은 사이트는 어떻게 관리하나요?
글을 만드는 틀(템플릿)에서 대표 이미지를 필수 항목으로 두는 것이 가장 확실합니다. 글마다 사람이 기억해서 넣으면 빠지는 글이 생기고, 빠진 글은 결국 사이트 공통 로고로 채워지기 쉽습니다.
| 점검 항목 | 확인 방법 |
|---|---|
| 모든 글에 og:image가 있는가 | 사이트맵의 글 주소를 모아 페이지 소스에서 og:image를 찾는다 |
| 공통 로고를 쓰는 글이 몇 개인가 | og:image 값이 같은 글을 센다 |
| 구조화 데이터의 image와 og:image가 같은가 | 두 값을 나란히 비교한다 |
| max-image-preview가 none인 페이지가 있는가 | robots 메타 태그를 일괄 확인한다 |
퍼스트초이스 무료 진단 도구는 메타 태그, 구조화 데이터, robots 설정을 포함해 31개 항목을 한 번에 점검합니다. 대표 이미지와 미리보기 설정이 빠진 곳을 찾을 때 출발점으로 쓸 수 있습니다.
참고 자료
- Google 이미지 SEO 권장사항 — 메타데이터로 선호 이미지 지정 Google Search Central
- Robots 메타 태그, data-nosnippet, X-Robots-Tag 사양 Google Search Central
- Article 구조화 데이터 Google Search Central
- Google 디스커버와 웹사이트 Google Search Central
자주 묻는 질문
Q.og:image를 넣으면 그 그림이 반드시 썸네일로 나오나요?
아니요, 보장되지는 않습니다. 구글은 썸네일 선택이 자동이며 여러 출처를 함께 본다고 안내합니다. 대표 이미지를 지정하면 선택에 영향을 줄 수 있다는 정도로 이해하시면 됩니다.
Q.모든 글에 같은 회사 로고를 대표 이미지로 넣어도 되나요?
권하지 않습니다. 구글은 로고 같은 일반적인 그림보다 그 페이지를 대표하는 관련 있는 그림을 고르라고 안내합니다. 글마다 내용을 보여 주는 그림을 따로 지정하는 편이 좋습니다.
Q.이미지를 고쳤는데 검색 결과가 바로 안 바뀝니다.
구글이 페이지를 다시 수집해야 반영됩니다. 서치콘솔의 URL 검사에서 색인 생성을 요청할 수는 있지만, 반영 시점과 결과는 구글이 정합니다.
SEO
SEO
SEO