온라인 이미지 SEO 검사기: Alt, 지연 로딩, WebP 및 Srcset - 수정해야 할 사항

간단히 말해서, 페이지의 이미지 SEO 여부를 확인하려면 PromoPilot의 무료 SEO 이미지 검사기 에 이미지 URL을 붙여넣으세요. 이 도구는 최대 100개의 <img> 태그를 분석합니다. alt 태그 유무, loading="lazy" 설정 여부, 너비와 높이 설정 여부, WebP, AVIF 또는 SVG 형식 사용 여부, srcset 설정 여부 등을 확인합니다. 결과는 0에서 100까지의 점수와 각 이미지에 대한 설명으로 제공됩니다. 아래에서 점수 계산 방식, 먼저 수정해야 할 사항, 그리고 이 도구가 감지하지 못하는 항목들을 확인할 수 있습니다.

저는 12년 동안 웹사이트와 온라인 쇼핑몰을 구축해 왔는데, 거의 모든 웹사이트에서 이미지가 가장 큰 문제점입니다. 일반적인 제품 카드에는 카메라에서 바로 가져온 3MB짜리 사진 5장, 빈 대체 텍스트, 그리고 IMG_4512.jpg 와 같은 파일 이름이 있습니다.

이미지 SEO 검사는 무엇을 확인하나요?

이 도구는 페이지의 각 이미지를 다섯 가지 기준에 따라 분석하고, 이 기준들을 합산하여 최종 점수를 산출합니다.

각 이미지에는 댓글 목록이 표시되고, 페이지는 최종 점수를 받습니다. 이 기능은 편리합니다. 무엇이 잘못되었는지뿐만 아니라 어떤 이미지가 문제인지도 확인할 수 있기 때문입니다.

웹사이트의 이미지를 온라인으로 확인하는 방법은 무엇인가요?

1. 이미지 SEO 검사기를 엽니다.
2. 페이지 주소를 입력하세요. 사진이 많은 페이지(예: 제품 카드, 카테고리, 블로그 게시글, 포트폴리오)가 좋습니다.
3. "확인"을 클릭 하고 모든 이미지가 스캔될 때까지 기다리세요.
4. 각 이미지의 평점과 댓글 목록을 확인하세요.
5. 문제를 해결하신 후 페이지를 다시 확인해 주세요.

도구 페이지는 다음과 같습니다. 주소 입력란, 확인 목록 및 FAQ가 있습니다.

평점은 어떻게 계산되며, 무엇을 먼저 수정해야 할까요?

평점은 100점에서 시작하며, 페이지에 있는 이미지 중 해당 기준을 충족하지 못하는 이미지의 비율에 따라 각 문제 발생 시 감점이 적용됩니다. 규칙을 알면 어떤 부분이 가장 큰 점수 상승 효과를 가져오는지 쉽게 파악할 수 있습니다.

다음은 제 작업 지시서입니다.

1. 대체. 가장 비싼 품목이지만 수리하기 가장 쉽습니다. 보이는 그대로 쓰세요: alt="Кожаный рюкзак Nord 20 л, коричневый, вид сбоку", alt="рюкзак купить дёшево рюкзак" 가 아닙니다. 장식 요소에는 빈 alt="" 사용하세요.
2. 너비와 높이를 지정하세요. 속성에 실제 크기를 지정하고 CSS에 img { max-width: 100%; height: auto; } 를 추가하면 이미지가 반응형으로 유지되고 레이아웃이 튀는 현상이 사라집니다.
3. 지연 로딩은 화면 아래 모든 요소에 적용됩니다. 하지만 히어로 이미지에는 적합하지 않습니다. 히어로 이미지는 즉시 우선적으로 로드되어야 하기 때문입니다.
4. WebP 또는 AVIF 형식을 지원합니다. WordPress 5.8 버전부터 WebP 업로드를, 6.5 버전부터 AVIF 업로드를 지원합니다.
5. 사진 크기가 큰 경우, 휴대폰이 모니터용 버전을 다운로드하지 않도록 소스 설정을 지정합니다.

본문 내 메인 이미지와 보조 이미지의 적절한 예시:

<img src="/img/hero.webp" alt="Мастерская кожаных изделий Nord" width="1200" height="600" fetchpriority="high"> <img src="/img/bag-700.webp" srcset="/img/bag-700.webp 700w, /img/bag-1400.webp 1400w" sizes="(max-width: 700px) 100vw, 700px" alt="Рюкзак Nord 20 л, вид сбоку" width="700" height="700" loading="lazy">

이미지에 적합한 alt 태그를 작성하는 방법은 무엇인가요?

alt 태그는 평가에서 가장 중요한 요소이며, 실수가 가장 많이 발생하는 부분이기도 합니다. 대부분 비워두거나 키워드로 가득 채우는 경우가 많죠. 간단한 규칙은 이렇습니다. 이미지를 볼 수 없는 사람에게 한 문장으로 이미지를 설명해 보세요.

카탈로그의 경우, 제품명 + 색상 또는 변형 + 각도와 같은 템플릿을 사용하여 대체 텍스트(alt tag)를 생성하는 것이 편리합니다. 이렇게 하면 한 장의 카드에 있는 다섯 장의 사진에 대해 다섯 개의 동일한 설명이 아닌 각각 다른 유용한 설명을 적용할 수 있습니다.

파일 이름도 중요합니다. kozhanyj-ryukzak-nord-korichnevyj.webp 가 IMG_4512.jpg 보다 낫습니다. 단지 이 이유 때문에 기존 파일의 이름을 바꿀 필요는 없지만, 새 파일은 설명적인 이름으로 업로드하세요.

비교: 이미지 SEO 검사기 및 대안

결론: 온라인 이미지 검사기는 특정 페이지의 이미지에 어떤 문제가 있는지 보여주고, PageSpeed는 속도 저하를 보여주며, Squoosh 또는 변환 프로그램은 파일 자체를 수정하는 데 도움을 줍니다.

PromoPilot은 이미지 압축 도구와 WebP 변환기를 포함하여 서버에 파일을 업로드하지 않고 브라우저에서 바로 작동하는 87개의 무료 SEO 도구를 제공합니다. 전체 페이지 크기를 이해하려면 페이지 속도 분석 시리즈의 관련 글을 참조하세요.

이미지 검증에서 놓치는 것은 무엇일까요?

이 도구의 한계를 솔직하게 인정합시다. 평가를 정확하게 해석하려면 이러한 한계를 아는 것이 중요합니다.

• 파일 크기는 고려되지 않습니다. 이미지는 다운로드되지 않으며, 파일 형식은 확장자로 결정됩니다.
• <picture> 태그가 제대로 파싱되지 않습니다. <img> 안의 JPG는 바로 옆의 <source> 에 AVIF나 WebP가 있더라도 태그가 지정됩니다.
• CSS를 이용한 배경 이미지 와 JavaScript로 추가된 이미지는 보고서에 포함되지 않습니다.
• CSS에만 지정된 치수는 고려되지 않습니다.
• <img> 하나도 없는 페이지는 50점을 받습니다. 이는 "실수가 절반인 것"이 아니라 "평가할 가치가 전혀 없는 것"입니다.

무료 도구가 충분하지 않은 경우는 언제일까요?

한 페이지의 대체 텍스트를 수정하는 데는 10분이면 충분합니다. 하지만 쇼핑몰에 5천 개의 상품이 있다면 수작업으로는 불가능합니다. 다음과 같은 경우 전문가의 도움이 필요합니다.

• 전체 카탈로그에 대해 alt 값은 이름, 색상 및 각도를 기반으로 자동으로 생성되어야 합니다.
• 카메라에서 압축되지 않은 이미지가 로드되므로 압축, WebP, 다양한 크기 조정 등을 포함하는 자동 파이프라인이 필요합니다.
• 웹사이트 테마에서 사진이 너비, 높이, srcset 속성 없이 표시되는 문제가 발생하고 있으며, 템플릿을 수정해야 합니다.
• 제품 관련 검색어에 대한 Google 이미지 검색 트래픽을 늘리고 싶으신가요?

제가 귀사 웹사이트를 위해 무엇을 도와드릴 수 있을까요?

저는 12년 경력의 개발자이자 SEO 전문가인 발레리 다니우크입니다. 수천 장의 사진을 보유한 수많은 온라인 쇼핑몰을 포함하여 200명이 넘는 고객을 관리해 왔습니다.

SEO 및 감사

• 웹사이트 SEO 종합 진단: 사이트 전체 이미지를 검사하고, 템플릿에 자동 변환 및 대체 텍스트(alt text)를 설정합니다.
• 인공지능 기반 SEO 블로그로, 자연 유입 방식으로 고객을 유치하며, 각 게시글에 alt 이미지와 WebP 이미지를 자동으로 표시합니다.

매장 및 카탈로그

• MCP 와 Claude 이용하면 각 품목에 대한 설명과 사진이 포함된 300개 품목 카탈로그를 단 몇 분 만에 만들 수 있습니다.
• 이미지 처리가 제대로 된 WooCommerce 기반 온라인 쇼핑몰.
• Instagram 에서 웹사이트로 스토어를 이전하는 작업 중입니다. 제품 사진과 설명이 옮겨지고 있습니다.
• 제품, 사진 및 텍스트는 기존 웹사이트 또는 소셜 미디어의 링크를 통해 1001site 로 이전할 수 있습니다.

회계 및 자동화

• 회계 + 장부 정리 + 3만 개 제품 판매 스토어.
• 온라인 소스 판매점을 위한 AI 기반 Telegram 봇.

Telegram 으로 상품 이미지 링크를 보내주세요. 사진을 보고 얼마나 당첨될 수 있는지 알려드릴게요.

결과

1. 온라인 SEO 이미지 검사기는 페이지에 있는 최대 100개의 이미지를 분석하고 각 이미지에 대해 0에서 100까지의 점수와 설명을 부여합니다.
2. 가장 많은 점수는 alt 속성과 너비/높이 치수에 주어지며, 그 다음으로는 지연 로딩, WebP/AVIF 및 srcset이 뒤를 잇습니다.
3. 메인 이미지는 지연 로딩이 필요하지 않습니다. fetchpriority="high" 필요합니다.
4. 대규모 카탈로그의 경우 사진 처리가 자동화되거나, 1001site 와 같이 이미 사진 처리가 완료된 플랫폼을 선택합니다.

무료 이미지 SEO 검사기를 사용하여 사이트에서 가장 용량이 큰 페이지를 확인하세요. alt 속성부터 시작하는 것이 좋습니다.

출처

• PromoPilot의 이미지 SEO 검사기 페이지 - 검사 항목, 평가 규칙, 제한 사항 및 FAQ.
• Google 검색 센터 - 검색에 대한 이미지 추천.
• Google PageSpeed Insights 및 Squoosh - 기능 설명.