이미지 SEO: 자연 유입을 늘리는 12가지 실전 팁

📖 출처 안내: 이 글은 Ahrefs가 처음 공개한 Image SEO: 12 Actionable Tips게시물의 개념을 바탕으로, 한국 독자에게 맞는 예시와 도구, 참고 자료를 더해 새로 쓰고 확장한 내용입니다.

이미지 SEO라고 하면 alt 속성에 키워드 하나 넣는 일이 전부라고 여기는 경우가 많습니다. 실제로는 구글이 사이트의 이미지를 찾아내고 이해하고 순위를 매기는 과정에 최소 열두 가지 요소가 작용합니다. 이를 놓치면 어렵지 않게 얻을 수 있는 유입을 그냥 흘려보내게 됩니다. 전 세계 검색의 상당 부분을 차지하는 구글 이미지 검색도 마찬가지입니다.

구글의 기계학습 기반 이미지 인식은 계속 발전하고 있습니다. 그렇다고 이미지 SEO가 쓸모없어지는 것은 아닙니다. 오히려 구글은 파일 이름, 대체 텍스트, 페이지 문맥, 로딩 속도 등 얻을 수 있는 모든 단서를 동원해 이미지를 더 정확히 해석하고 순위를 매깁니다.

1. 파일 이름을 내용이 드러나게 짓습니다

파일 이름은 구글이 이미지의 주제를 파악할 때 가장 먼저 참고하는 단서 중 하나입니다. 그런데 카메라와 휴대폰은 IMG_0023.JPG나 DSC_4817.jpg 같은 이름을 자동으로 붙이고, 이런 이름은 검색엔진에 아무것도 알려 주지 못합니다.

구글은 공식 가이드라인에서 파일 이름이 이미지 내용을 알려 주는 단서라고 밝히고 있습니다. 방법은 단순합니다. 내용을 설명하는 단어를 하이픈으로 이어 쓰되, 지나치지 않게 씁니다.

좋은 예: chocolate-cake.jpg
나쁜 예: IMG_2947.jpg
역시 나쁜 예: chocolate-cake-recipe-dessert-sweet.jpg (키워드 남용)

업로드 전에 파일 이름을 바꾸는 습관은 간단하지만 차이를 만듭니다. 쇼핑몰, 요리 블로그, 포트폴리오처럼 이미지 검색 유입이 중요한 사이트라면 더욱 그렇습니다.

2. 쓸모 있는 대체 텍스트를 씁니다

alt 속성은 이미지를 브라우저에 설명해 주는 자리입니다. 이미지가 뜨지 않을 때 대신 표시되고, 시각장애인용 화면 낭독기가 읽어 주며, 구글도 이 값을 보고 페이지의 시각 정보를 파악합니다.

작성 형식은 간단합니다.

<img src="dalmatian-puppy.jpg" alt="공원에서 뛰노는 달마시안 강아지">

구글은 대체 텍스트를 컴퓨터 비전 알고리즘, 페이지 문맥과 함께 살펴 이미지의 주제를 파악합니다. 권장되는 방식은 정보가 담긴 유용한 설명을 쓰고 키워드는 문맥 안에서 자연스럽게 쓰는 것입니다. 의미 없는 단어를 늘어놓는 키워드 남용은 피해야 합니다.

쉽게 쓰는 요령이 하나 있습니다. "이것은 ___을 찍은 사진입니다"라는 문장의 빈칸을 채워 보세요. 그 빈칸에 들어간 말을 조금만 다듬으면 대체로 좋은 대체 텍스트가 됩니다. 예를 들면 이렇습니다.

"이것은 딸기 소스를 올린 초콜릿 치즈케이크를 찍은 사진입니다." → alt="딸기 소스를 올린 초콜릿 치즈케이크"
"이것은 책상 위에 놓인 화면이 깨진 노트북을 찍은 사진입니다." → alt="사무실 책상 위의 화면이 깨진 노트북"

상품 이미지라면 모델명이나 SKU 코드를 대체 텍스트에 넣어 두는 편이 좋습니다. 구체적인 사양으로 검색하는 사람에게 노출될 수 있기 때문입니다. 캡션도 잊지 마세요. 구글은 이미지 주변의 글, 특히 페이지에 보이는 캡션에서 주제에 관한 정보를 끌어옵니다.

3. 용도에 맞는 파일 형식을 고릅니다

어떤 형식을 쓰느냐가 파일 크기를, 나아가 페이지 로딩 속도를 곧바로 좌우합니다. 웹에서 가장 흔한 세 형식은 JPG, PNG, WebP이며 성격이 저마다 다릅니다.

형식	적합한 용도	투명도	일반적인 크기
JPG	사진, 그러데이션이 있는 이미지	없음	작음~보통
PNG	로고, 아이콘, 글자가 있는 화면 캡처	있음	보통~큼
WebP	요즘 웹의 거의 모든 용도	있음	JPG·PNG보다 25~35% 작음
GIF	단순한 애니메이션	부분 지원	가변적
SVG	로고, 아이콘, 벡터 일러스트	있음	매우 작음

기본 원칙은 이렇습니다. 사진에는 JPG, 투명 배경과 또렷한 글자가 필요한 이미지에는 PNG를 쓰고, 웹에는 가능한 한 WebP를 씁니다. 같은 화질에서 압축률이 가장 좋기 때문입니다. 업로드 전에 형식을 바꿔야 한다면 ImageTools의 변환 도구를 쓰면 됩니다.

4. 실제로 보이는 크기에 맞춰 이미지를 줄입니다

이미지를 800px로 보여 주는 사이트에 가로 4000px짜리 사진을 올리는 것은 대역폭 낭비입니다. 브라우저는 원본을 통째로 내려받은 뒤 남는 픽셀을 버립니다. 방문자는 더 오래 기다리지만 눈에 보이는 이득은 없습니다.

레이아웃에서 이미지가 표시되는 최대 너비를 먼저 확인하고(이미지 종류와 사이트에 따라 대개 800px에서 1440px 사이입니다) 업로드 전에 그 크기로 줄이세요. 레티나(HiDPI) 화면까지 감당하려면 표시 너비의 두 배로 잡습니다. 치수를 정확히 맞추려면 ImageTools의 크기 조절 도구를 쓰면 됩니다.

지금 이미지 크기를 줄이고 압축해 보세요

파일을 외부 서버로 보내지 않고, 무료로 사이트 이미지의 치수와 용량을 정리할 수 있습니다.

크기 조절 압축

5. 눈에 띄는 화질 손해 없이 압축합니다

압축은 이미지의 치수는 그대로 두고 파일 크기만 줄이는 작업입니다. JPG 사진이라면 품질을 100%에서 80%로 낮추는 것만으로 용량이 5분의 1에서 10분의 1까지 줄어드는데, 화면에서는 차이를 알아채기 어렵습니다.

로딩 속도는 데스크톱과 모바일 모두에서 구글이 인정한 순위 요소입니다. 그리고 웹페이지 용량에서 가장 큰 몫을 차지하는 것은 대개 이미지입니다. 업로드 전에 모든 이미지를 압축하는 일은 들인 노력 대비 효과가 가장 큰 기술 SEO 작업입니다.

이미지 종류별 용량 목표는 다음과 같습니다.

전체 너비 배너·히어로 이미지: 200KB 이하
상품 사진이나 블로그 이미지: 60~150KB
썸네일: 15~40KB
PNG·WebP 로고: 30KB 이하

ImageTools의 압축 도구를 쓰면 JPG, PNG, WebP를 외부 서버로 보내지 않고 브라우저에서 바로 줄일 수 있습니다.

6. 이미지 사이트맵을 만듭니다

이미지 사이트맵은 구글이 스스로 찾아내지 못할 수 있는 이미지의 존재를 알려 줍니다. 자바스크립트로 불러오는 이미지나 복잡한 갤러리에 들어간 이미지가 특히 그렇습니다. 일반 사이트맵과 달리 이미지 사이트맵에는 CDN처럼 다른 도메인의 주소도 넣을 수 있습니다.

워드프레스에 Yoast SEO 플러그인을 쓰고 있다면 이미지가 사이트맵에 자동으로 들어갑니다. 직접 만든 사이트라면 구글 공식 문서를 따라 이미지 사이트맵을 손수 추가할 수 있습니다. 주로 쓰는 태그는 이미지 주소를 담는 image:loc, 제목을 담는 image:title, 설명을 담는 image:caption입니다.

7. 상품 이미지에 구조화 데이터를 붙입니다

구글은 레시피, 상품, 기사, 이벤트 등 여러 맥락에서 이미지에 대한 구조화 데이터(Schema.org)를 지원합니다. 제대로 넣어 두면 이미지가 구글의 리치 결과(rich results)에 함께 노출되어 시각적으로 더 눈에 띄고 클릭률도 올라갑니다.

쇼핑몰이라면 이미지를 포함한 상품 마크업이 특히 값어치를 합니다. 제대로 표시된 상품은 구글 쇼핑과 지식 패널의 상품 정보에 노출될 수 있습니다.

8. 지연 로딩을 적용합니다

지연 로딩은 처음에 모든 이미지를 한꺼번에 내려받는 대신, 화면에 들어오기 직전에야 불러오는 방식입니다. 긴 블로그 글이나 상품 목록처럼 이미지가 많은 페이지에서는 초기 용량을 60~80%까지 줄일 수 있습니다.

HTML만으로 가장 간단하게 적용할 수 있습니다.

<img src="product.webp" alt="파란색 운동화" loading="lazy">

주의: 스크롤하지 않아도 바로 보이는 첫 화면의 대표 이미지에는 loading="lazy"를 절대 붙이지 마세요. 코어 웹 바이탈 지표 중 하나인 LCP(Largest Contentful Paint)가 늦어지고, 그만큼 순위에도 직접 손해를 봅니다.

9. 모든 이미지 태그에 width와 height를 지정합니다

브라우저가 이미지를 내려받기 전에 크기를 모르면 레이아웃에서 자리를 미리 잡아 두지 못합니다. 그러다 이미지가 뜨는 순간 페이지 내용이 아래로 밀려납니다. 구글은 이 현상을 코어 웹 바이탈 지표의 하나인 CLS(Cumulative Layout Shift)로 측정합니다.

해결책은 이미지 태그에 width와 height를 늘 함께 적어 두는 것입니다.

<img src="product.webp" alt="파란색 운동화" width="800" height="800" loading="lazy">

이 값이 실제로 보이는 크기와 똑같을 필요는 없습니다. 브라우저가 이미지를 불러오기 전에 알맞은 자리를 잡도록 비율만 알려 주면 됩니다.

10. srcset으로 반응형 이미지를 제공합니다

srcset 속성을 쓰면 같은 이미지를 화면 크기별로 여러 버전 제공할 수 있습니다. 브라우저가 알아서 가장 알맞은 버전을 골라, 휴대폰에는 작은 이미지를 데스크톱에는 큰 이미지를 내려 줍니다. 모바일 방문이 많은 사이트라면 전송량을 40~60%까지 줄일 수 있습니다.

<img
  src="product-800.webp"
  srcset="product-400.webp 400w,
          product-800.webp 800w,
          product-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="파란색 운동화"
  width="800" height="800"
  loading="lazy"
>

11. 오픈그래프와 SNS용 대표 이미지를 손봅니다

누군가 카카오톡, 인스타그램, 링크드인 같은 곳에 주소를 공유하면 미리보기에 뜨는 이미지는 오픈그래프 메타 태그에서 가져옵니다. 이 태그를 설정해 두지 않으면 플랫폼이 페이지에서 아무 이미지나 골라 오고, 결과가 신통치 않은 경우가 많습니다.

사이트의 주요 페이지마다 1200×630px 이미지를 지정한 og:image 태그를 반드시 설정하세요.

<meta property="og:image" content="https://yoursite.com/images/article-preview.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

읽기 쉬운 제목, 브랜드의 시각 요소, 내용에 맞는 그림을 갖춘 미리보기 이미지는 공유 링크의 클릭률을 눈에 띄게 끌어올립니다.

12. 페이지 전체의 맥락을 함께 봅니다

구글은 이미지를 따로 떼어 평가하지 않습니다. 이미지 주변의 글, 페이지 제목, 의미상의 문맥, 함께 놓인 다른 시각 요소, 이미지 아래 캡션, 심지어 그 페이지로 연결되는 링크의 문구까지 한데 놓고 봅니다. 같은 빨간 구두 사진이라도 여성 패션 페이지에 있을 때와 요리 페이지에 있을 때의 맥락은 전혀 다릅니다.

맥락을 살리는 방법은 이렇습니다.

이미지를 설명하는 글, 또는 그 이미지가 가리키는 글 가까이에 배치합니다
가능하면 이미지 아래에 눈에 보이는 캡션을 답니다
이미지의 주제가 페이지 주제와 맞닿아 있는지 확인합니다
페이지 제목과 소제목으로 주요 이미지의 주제를 뒷받침합니다

🔍 간단 점검: 구글 서치 콘솔에서 사이트의 어떤 이미지가 색인됐는지 확인해 보세요. 색인 → 페이지로 들어가 이미지 관련 항목을 걸러 보면 색인 상태와 문제점을 함께 볼 수 있습니다.

이미지 SEO 점검 목록

☑ 키워드가 담긴 설명적인 파일 이름(하이픈으로 연결, 키워드 남용 없이)
☑ 모든 이미지에 alt 속성을 맥락에 맞게 서술적으로 작성
☑ 용도별 형식 선택: 사진은 WebP나 JPG, 로고와 아이콘은 PNG나 SVG
☑ 실제 표시 크기에 맞춘 치수(레티나 대응은 최대 2배까지)
☑ 압축 적용 — 종류별 용량 목표 이하로
☑ 모든 <img> 태그에 width와 height 선언
☑ 첫 화면 아래에 있는 이미지에 loading="lazy" 적용
☑ LCP 이미지는 지연 로딩 없이, 가능하다면 fetchpriority="high" 적용
☑ 이미지 사이트맵 설정(플러그인이 대신 처리하는지 확인)
☑ 주요 페이지마다 og:image 메타 태그 설정
☑ 해당되는 경우 상품 이미지에 구조화 데이터 적용
☑ 관련 있는 본문, 캡션, 소제목으로 이미지의 맥락 마련

자주 묻는 질문

대체 텍스트와 캡션은 같은 것인가요?

다릅니다. 대체 텍스트는 평소에는 보이지 않는 HTML 속성으로, 이미지가 뜨지 않을 때만 표시되고 화면 낭독기와 구글이 읽어 갑니다. 캡션은 페이지에서 이미지 아래에 실제로 보이는 글입니다. 둘은 서로를 보완하며 SEO에 미치는 영향도 다릅니다. 대체 텍스트는 이미지의 내용을 곧바로 설명하고, 캡션은 문맥을 덧붙여 구글이 이미지와 주변 내용의 관계를 이해하도록 돕습니다.

WebP 이미지가 정말 순위를 올려 주나요?

간접적으로는 그렇습니다. WebP는 같은 화질에서 JPG나 PNG보다 파일이 25~35% 작아 페이지를 더 빠르게 만들어 줍니다. 로딩 속도는 구글이 공식적으로 인정한 순위 요소이며, 특히 코어 웹 바이탈의 LCP를 통해 반영됩니다. 페이지가 가벼우면 빨리 열리고 LCP도 낮아지며, 그것이 순위로 이어집니다. WebP 자체가 직접적인 순위 요소는 아니지만 성능에 미치는 효과는 분명합니다.

구글 이미지 검색으로 유의미한 유입이 생기나요?

분야에 따라 다릅니다. 요리, 인테리어, 패션, 실물 상품처럼 사람들이 눈으로 보고 고르는 영역이라면 구글 이미지 검색이 상당한 유입 통로가 될 수 있습니다. 반면 순수 정보성 글이나 B2B 콘텐츠라면 영향이 작습니다. 구글 서치 콘솔에서 이미지 검색으로 들어온 노출수와 클릭수를 따로 살펴볼 만합니다.

사이트에서 반복되는 이미지에는 같은 대체 텍스트를 써도 되나요?

완전히 같은 이미지가 같은 맥락에 놓인다면 같은 대체 텍스트를 써도 무방합니다. 다만 같은 이미지가 서로 다른 자리에 쓰인다면(예를 들어 첫 화면 목록과 상품 상세 페이지에 함께 실리는 상품 사진) 페이지마다 맥락에 맞게 손보는 편이 낫고, 구글에도 더 많은 단서를 줍니다.

내 사이트의 이미지가 잘 최적화됐는지 어떻게 확인하나요?

구글 페이지스피드 인사이트(pagespeed.web.dev)는 주소만 넣으면 크기가 맞지 않는 이미지, 압축이 덜 된 이미지, 오래된 형식 같은 문제를 항목별로 짚어 줍니다. 구글 서치 콘솔에서는 어떤 이미지가 색인됐는지와 오류 여부를 확인할 수 있습니다. 더 꼼꼼히 점검하고 싶다면 Ahrefs Site Audit이나 Screaming Frog로 사이트 전체를 훑어 대체 텍스트가 빠진 이미지, 지나치게 큰 이미지 등을 한 번에 뽑아낼 수 있습니다.