이미지 최적화와 이미지 SEO로 검색 엔진 점수 향상 기법 (Alt 태그 등)

이미지 SEO란? 이미지 SEO는 검색 엔진에서 더 많은 트래픽을 얻기 위해 이미지를 최적화하는 것을 말합니다. 예를 들어 이미지 SEO 최적화는 Google 이미지에서 사이트 순위를 높이는 데 도움이 될 수 있습니다.

 

이미지 SEO는 또한 많은 국가에서 법적 요구사항 이 되고 있는 사이트의 접근성을 향상할 수 있습니다.

이 기사에서는 대체 텍스트를 추가하고, 최적의 로드 시간을 위해 이미지 파일 크기를 줄이고, 구조화된 이미지 데이터를 활용하는 방법 등을 보여줍니다.

 

이미지 SEO 최적화가 중요한 이유에 대해 알아보겠습니다. 그런 다음 자신의 웹페이지에서 사용할 수 있는 실행 가능한 팁에 대해 논의합니다.

 

이미지가 왜 중요한가요?

Google 이미지 검색 은 전체 검색의 22.6%를 차지합니다. 이것이 이미지 SEO에 주의를 기울이는 것이 중요한 이유입니다. 그렇지 않으면 엄청난 양의 트래픽을 놓칠 수 있습니다.

 

이미지 SEO는 다음 두 가지 방법으로 사이트에 상당한 트래픽을 유도할 수 있습니다.

• 첫째, 최적화된 이미지를 사용하면 Google 이미지에서 순위 가 ​​매겨질 가능성이 높아집니다.
• 둘째, 이미지는 온페이지 SEO의 중요한 부분입니다.

 

Google은 일반 검색 결과에 이미지를 점점 더 많이 표시하고 있으며, 종종 일반적인 자연 검색 결과보다 많습니다.

"blue ford raptor" 키워드에 대한 결과와 같이 첫 번째 웹사이트 링크 전에 얼마나 많은 이미지가 표시되는지 확인하십시오.

https://www.google.com/search?q=blue+ford+raptor&rlz=1C5CHFA_enKR951KR951&oq=blue+ford+raptor&aqs=chrome..69i57.295j0j7&sourceid=chrome&ie=UTF-8 

blue ford raptor - Google 검색

 

또한 이미지는 사용자가 작성한 콘텐츠를 이해하고 참여하는 데 도움이 될 수 있습니다. 그리고 큰 텍스트 블록을 분해하는 데 도움이 됩니다.

 

수천 단어의 견고한 블록보다 덜 매력적인 것은 거의 없습니다.

이제 이미지 SEO의 가장 중요한 부분 중 하나인 대체 텍스트에 대해 이야기해 보겠습니다.

 

대체 텍스트란 무엇입니까?

대체 텍스트 (또는 대체 텍스트)는 이미지에 대한 서면 설명입니다. SEO는 때때로 대체 텍스트를 "대체 속성" 또는 "대체 태그"라고 부릅니다.

최적화된 대체 텍스트는 Google이 Google 이미지에서 이미지의 순위를 지정하도록 하는 데 중요합니다. 대체 텍스트를 사용하면 이미지가 표시되는 내용을 Google에 알릴 수 있기 때문입니다.

 

반응형

 

또한 사용자의 사이트 접근성에 기여할 뿐만 아니라 이미지가 깨졌을 때 이미지가 표시되어야 하는 내용을 사용자에게 설명할 수 있습니다. 이미지가 올바르게 로드될 때, 손상되어 대체 텍스트가 없을 때, 손상되었지만 대체 텍스트가 있을 때 이미지가 어떻게 보이는지 확인할 수 있습니다.

 

대체 텍스트는 웹페이지에 관련성 신호를 추가하여 사이트의 SEO 성능을 개선하는 데 도움이 될 수 있습니다. 이렇게 하면 Google에서 이미지의 콘텍스트를 더 잘 이해하여 페이지 순위를 매기는 방법을 결정하는 데 도움이 됩니다.

 

대체 텍스트는 HTML 코드 내에서 페이지의 특정 이미지를 설명하는 데 사용됩니다.

 

그러나 걱정하지 마십시오. alt 태그를 최적화하기 위해 HTML을 알 필요는 없습니다. 잠시 후에 자세히 알아보십시오. 먼저 좋은 대체 텍스트를 작성하고 이미지에 대체 텍스트를 할당하는 방법을 알아보겠습니다.

 

이미지 대체 텍스트를 최적화하는 방법

대체 텍스트를 추가할 때는 과하지 않게 설명하는 것이 가장 좋습니다.

 

누군가와 통화 중이고 이미지가 어떻게 보이는지 설명해야 한다고 상상해 보십시오. 가장 잘 설명할 수 있는 방법은 무엇입니까?

 

일반적으로 대체 텍스트를 작성할 때 최대 125자를 유지하는 것이 가장 좋습니다. 이는 대부분의 화면 판독기(시각 장애가 있는 사용자를 돕는 보조 기술)가 125자 이후에 대체 텍스트 읽기를 중단하기 때문입니다.

 

대체 텍스트에 관련 키워드를 포함하는 것도 도움이 되지만 구체적이고 스팸성인 것 사이에는 미세한 차이가 있습니다.

다음은 이 LL Bean 덕 부츠에 대한 설명 대 스팸 대체 텍스트의 예입니다.

 

✅ 상품 설명 : 브라운 가죽 LL 빈덕 부츠

❌ Spammy : LL 빈 브라운 가죽 하이킹 워킹 윈터 덕 부츠

 

설명 예제는 단순히 이미지를 세부적으로 설명합니다. 키워드 또는 두 개(예: "LL Bean 덕 부츠" 및 "가죽 LL Bean 덕 부츠")가 포함됩니다. 그러나 그것은 여전히 ​​​​자연스러운 설명입니다.

 

스팸 같은 예는 이미지를 설명하는 데 별로 도움이 되지 않는 너무 많은 관련 키워드에 맞추려고 합니다.

 

최적화된 대체 텍스트는 Google이 시각적 개체의 컨텍스트를 이해하는 데 도움이 될 수 있지만 이와 같은 "키워드 스터핑"은 좋지 않은 사용자 경험을 생성할 수 있습니다. 또한 귀하의 페이지가 스팸임을 Google에 알릴 수도 있습니다.

 

이제 피해야 할 사항을 다루었으므로 몇 가지 예를 더 살펴보겠습니다.

 

대체 텍스트 예

잘 최적화된 대체 텍스트는 실제로 어떤 모습입니까? 나쁜 것, 좋은 것, 더 나은 것, 최선의 옵션에 대한 몇 가지 예를 작성해 보겠습니다.

 

잘못된 대체 텍스트 : alt="cats"

좋은 대체 텍스트 : alt="실을 가진 잠자는 고양이"

더 나은 대체 텍스트 : alt="실로 자는 생강 새끼 고양이"

최고의 대체 텍스트 : alt="핑크색과 보라색 원사로 자는 두 마리의 생강 새끼 고양이"

 

잘못된 대체 텍스트 : alt="backlinks"

좋은 대체 텍스트 : alt="Adidas backlinks"

더 나은 대체 텍스트 : alt="아디다스 백링크 개요"

Best alt text : alt="Semrush Backlink Analytics의 Adidas 백링크 개요"

 

이 에어프라이어 사진은 어떻습니까? - Cuisinart 실버 에어 프라이어 요리 감자튀김

잘못된 대체 텍스트 : alt="에어 프라이어"

좋은 대체 텍스트 : alt="실버 에어프라이어"

Better alt text : alt="Cuisinart 실버 에어프라이어"

Best alt text : alt="Cuisinart 실버 에어프라이어 쿠킹프라이어"

 

보시다시피, 각 경우에 가장 좋은 대체 텍스트는 부자연스럽게 들리지 않고 가장 설명적인 텍스트입니다.

 

WordPress에 대체 텍스트 추가

HTML에 대해 몰라도 최적화된 대체 텍스트를 WordPress 사이트에 추가할 수 있습니다.

사진 라이브러리에 이미지를 업로드한 후 대체 텍스트를 포함한 세부 정보를 입력할 수 있습니다.

Insider의 이 예에서 아래를 참조하십시오.

 

대체 텍스트를 설정하면 사이트에서 사용할 때마다 해당 이미지에 대체 텍스트가 표시됩니다(나중에 편집할 수도 있음).

Wix , Squarespace 및 Shopify와 같은 다른 콘텐츠 관리 시스템에서도 이미지 대체 텍스트를 쉽게 추가할 수 있습니다.

 

이미지 SEO 개선을 ​​위한 10가지 최적화 팁

alt 태그도 중요하지만 모든 SEO가 알아야 하는 이미지 최적화에 대해 훨씬 더 많은 것이 있습니다.

사이트의 전반적인 유기적 성능을 개선하고 Google 이미지에서 더 높은 순위를 기록하기 위해 할 수 있는 일에는 여러 가지가 있습니다.

다음은 이미지 SEO를 개선하기 위한 10가지 팁입니다.

 

1. 이미지의 이름을 올바르게 지정

Google의 이미지 SEO 가이드에 따르면 설명이 포함된 파일 이름을 사용하는 것이 중요합니다.

다음 Nike Air Force 1 신발 이미지를 예로 들어 보겠습니다.

 

파스텔 줄무늬가 있는 흰색 Air Force 1

저장할 때 컴퓨터에서 파일 이름 IMG00353.JPG를 생성할 수 있지만 이것이 이미지가 무엇인지 Google에 알려주지는 않습니다.

더 나은 파일 이름은 white-air-force-1-pastel-stripes.jpg입니다.

 

이미지를 사이트에 업로드하기 전에 설명이 포함된 이름을 지정하십시오. 또한 Google은 밑줄보다 하이픈을 사용하여 단어를 구분할 것을 권장합니다. 웹 페이지를 번역하거나 현지화하려는 경우 그에 따라 파일 이름을 변경하십시오.

 

2. 디스플레이 크기에 맞게 이미지 크기 조정

사용자 경험과 관련하여 페이지 속도는 매우 중요합니다. 파일 크기에 주의를 기울이지 않으면 실수로 페이지 속도가 느려지기 쉽습니다.

 

휴대전화로 사진을 찍는다고 가정해 보겠습니다. 대부분의 플래그십 스마트폰은 최소 4032 x 3024 픽셀의 사진을 찍습니다. 웹사이트의 최대 이미지 너비가 600픽셀인 경우 해당 이미지는 필요한 것보다 훨씬 큽니다. 사이트 속도가 느려질 수 있습니다.

 

이 문제를 방지하려면 업로드하기 전에 필요한 최대 표시 크기로 이미지 크기를 조정하십시오.

Photoshop 또는 Canva와 같은 간단한 도구를 사용하여 수동으로 이미지 크기를 조정할 수 있습니다.

 

또는 WordPress를 사용하는 경우 업로드 후 이미지 크기 조정과 같은 플러그인을 사용할 수 있습니다.

"크기 조정 활성화" 기능을 활성화하고 원하는 크기를 선택하기만 하면 됩니다.

또한 CSS를 사용하여 반응형으로 이미지 크기를 조정하고 있는지 확인해야 합니다.

 

3. 이미지 압축

이미지 크기를 조정하는 것이 파일 크기를 줄이는 유일한 방법은 아닙니다. 이미지를 압축하여 페이지 로드 시간을 줄일 수도 있습니다.

이미지를 압축한다는 것은 허용할 수 없는 정도로 품질을 손상시키지 않으면서 파일 크기를 최소화한다는 의미입니다.

 

기본적으로 목표는 이미지를 사용할 때 효율성과 더 빠른 로딩 속도를 위해 이미지 데이터의 중복을 최소화하는 것입니다.

 

이미지의 파일 크기를 어떻게 줄일 수 있습니까?

Optimizilla , TinyPNG 또는 ImageOptim과 같은 사용하기 쉬운 다양한 도구를 사용하여 이미지를 압축할 수 있습니다.

또는 WordPress를 사용하는 경우 Smush 플러그인을 사용해 보세요.

 

Google에서 권장하는 세 가지 오픈 소스 도구 중 하나를 사용할 수도 있습니다.

guetzli

mozjpeg

pngquant

 

4. 올바른 형식 선택

이미지 압축에 대해 논의했으므로 이제 가장 일반적인 이미지 형식에 대해 알아보겠습니다.

사용할 올바른 형식은 없습니다. 그것은 모두 사용하려는 이미지와 사용 계획에 따라 다릅니다.

선택 방법에 대한 기본 분석은 다음과 같습니다.

 

• JPEG : 가장 널리 사용되는 이미지 형식입니다. 온라인 사진이나 삽화에 사용합니다. 매우 작은 크기로 압축할 수 있으므로 미리 보기 이미지를 이메일로 보낼 때도 유용할 수 있습니다.
• PNG : 이미지 배경에 투명도를 사용해야 하는 경우 사용
• WebP : JPEG 또는 PNG보다 높은 압축률이 필요한 경우 사용합니다. 색상 깊이, 애니메이션 프레임 등을 희생하지 않고 이미지와 애니메이션 이미지를 지원하지만 이전 브라우저에서는 작동하지 않습니다.
• SVG : 아이콘 또는 로고에 사용

 

5. 이미지 사이트맵 만들기

간단히 말해서 이미지 사이트맵을 만들면 검색 결과에 이미지가 표시될 가능성이 높아집니다. 이미지 사이트맵은 이미지에 대한 URL만 포함한다는 점을 제외하면 일반 XML 사이트맵과 매우 유사합니다.

 

사이트에 있는 모든 이미지의 URL을 포함하는 전용 사이트맵을 만들면 Google에서 해당 이미지를 검색하고 이미지 검색 결과에 포함할 수 있습니다.

 

이미지 사이트맵을 만드는 것과 웹페이지를 포함하는 사이트맵을 만드는 것에는 한 가지 중요한 차이점이 있습니다. 이미지 사이트맵은 다른 도메인의 URL을 포함할 수 있습니다. 즉, 콘텐츠 전송 네트워크(나중에 자세히 설명)에서 이미지를 호스팅 할 수 있습니다.

 

이미지 사이트맵을 만드는 방법

수동으로 또는 사이트맵 생성기를 사용하여 이미지 사이트맵을 만들 수 있습니다. 수동으로 만들려면 Google의 예와 지침을 따르세요. Google의 이 사이트맵 예에는 두 개의 이미지가 포함되어 있습니다.

 

이미지 사이트맵을 사용하면 각 페이지에 최대 1,000개의 이미지를 포함할 수 있습니다. Google은 이미지 태그 목록도 제공합니다.

"필수"라고 표시된 것을 사용해야 합니다. 반면에 선택적 태그는 검색 엔진에 대한 추가 컨텍스트와 더 나은 사용자 경험을 제공하기 위해 있습니다.

 

사이트맵 생성기 플러그인이 있지만 Google은 최근 몇 달 안에 일부 사이트맵 확장 태그 가 사라질 것이라고 발표했습니다.

자체 사이트맵을 관리하는 경우 현재 조치가 필요하지 않지만 새로운 모범 사례를 따르도록 업데이트되지 않는 경우 향후 확장 프로그램을 사용할 때 주의해야 합니다.

 

6. 콘텐츠 전송 네트워크 사용

CDN(콘텐츠 전송 네트워크)을 사용하면 이미지 및 기타 콘텐츠를 더 빠르게 로드할 수 있습니다. CDN은 전 세계 여러 위치에 있는 서버 그룹입니다. 이를 통해 콘텐츠를 별도의 위치로 더 빠르게 배포할 수 있습니다.

 

미국에 있다고 가정해 보겠습니다. 아시아에 있는 서버보다 미국 서버에서 콘텐츠를 로드하는 것이 훨씬 빠릅니다. CloudFlare의 이 이미지를 살펴보십시오. 다른 위치의 CDN 서버와 함께 원본 또는 "원본" 서버를 보여줍니다. 사용자가 가장 가까운 CDN 서버에서 콘텐츠를 가져오는 것을 볼 수 있습니다.

 

W3 Total Cache와 같은 플러그인을 통해 WordPress에서 CDN을 쉽게 설정할 수 있습니다. 또는 추가 지침 이 필요한 경우 Cloudflare의 통합 가이드와 같이 선택한 공급자의 통합 가이드를 찾을 수 있습니다.

 

7. 지연 로딩 구현

느린 페이지 로딩 속도와 관련하여 이미지는 일반적으로 주요 원인입니다. 이 문제를 해결하는 가장 좋은 방법 중 하나는 다음과 같습니다.

"지연 로딩"을 사용하십시오. 웹 브라우저가 필요할 때까지 이미지를 로드할 때까지 기다리라고 지시합니다.

 

즉, 사용자가 처음 페이지를 방문할 때 페이지가 훨씬 더 빨리 로드됩니다. 이미지에만 사용되는 것이 아닙니다. JavaScript와 같은 자산도 이 방법으로 로드할 수 있습니다.

 

이렇게 생각해 보세요. 사용자가 페이지의 후반부로 스크롤하지 않으면 해당 자산이 로드되지 않습니다. 이는 눈에 띄는 성능 향상을 가져옵니다. Google에서 언급했듯이 스크롤 없이 볼 수 있는 이미지를 지연 로드하는 것을 피해야 합니다. 이것은 좋지 않은 사용자 경험을 만들 것입니다.

 

8. 브라우저 캐싱 활용

Google PageSpeed ​​Insights 도구는 종종 브라우저 캐싱 활용을 권장합니다.

브라우저 캐싱은 방문자의 브라우저에 의해 파일이 저장되는 경우입니다. 이는 자산이 다음에 페이지를 방문할 때 더 빠르게 로드됨을 의미합니다.

 

다음은 예입니다.

페이지를 방문하면 이미지가 다운로드되어 브라우저에 표시됩니다. 브라우저 캐싱이 없으면 다음에 이 사용자가 페이지를 방문할 때 모두 다시 다운로드해야 합니다.

 

그러나 브라우저 캐싱을 사용하면 브라우저에 이러한 정보가 이미 저장되어 있으므로 페이지 로드 속도가 훨씬 빨라집니다.

브라우저 캐싱은 사용자가 동일한 페이지를 자주 다시 방문하는 사이트에서 눈에 띄게 영향을 미칩니다.

 

자세히 알아보려면 여기에서 Google의 캐싱 권장 사항을 읽어보세요. WordPress를 사용하는 경우 인기 있는 캐시 플러그인 중 하나가 이를 빠르게 구현하는 데 도움이 될 수 있습니다. 그렇지 않다면 GTmetrix의 이 가이드 가 도움이 될 것입니다.

 

9. 이미지 구조화된 데이터 추가

구조화된 데이터는 검색 엔진이 사이트 정보를 더 명확하게 이해하는 데 도움이 되는 데이터 어휘입니다. 구조화된 데이터를 사용하면 이미지가 ' 리치 결과 '로 표시될 가능성도 높아집니다.

 

다음은 작동 중인 레시피 스키마의 예입니다. 이 유형의 리치 스니펫은 관련 이미지, 레시피 리뷰, 레시피를 만드는 데 걸리는 시간 및 짧은 재료 목록을 보여줍니다.

 

구조화된 데이터가 반드시 사이트 순위를 높이는 것은 아닙니다.

그러나 이미지 검색 목록을 향상합니다.

 

예를 들어 레시피 블로그를 웹사이트에 업로드한다고 가정해 보겠습니다. 이미지 구조화된 데이터를 사용하여 특정 이미지가 레시피에 속해 있음을 표시할 수 있습니다.

 

Google 이미지는 현재 다음 유형의 구조화된 데이터를 지원합니다.

• 제품
• 동영상
• 레시피

 

이미지에 구조화된 데이터를 구현하는 방법에 대한 자세한 내용은 Google 가이드라인을 참조하세요.

 

그동안 다음은 몇 가지 핵심 사항입니다.

1. 구조화된 데이터를 사용하여 이미지를 지원하려는 경우 이미지가 표시되는 페이지와 관련이 있는지 확인하십시오. 예를 들어 구조화된 레시피 데이터를 사용하는 경우 선택한 이미지에 완성된 레시피가 표시되어야 합니다.

2. 모든 이미지 URL은 크롤링 및 색인 생성이 가능해야 합니다. 그렇지 않으면 Google에서 해당 항목을 찾아 결과 페이지에 표시할 수 없습니다.

 

10. Open Graph 및 Twitter 카드에 최적화

이미지를 사용하는 것도 소셜 미디어 전략의 중요한 부분입니다. 여기에서 오픈 그래프가 등장합니다. Open Graph는 원래 Facebook에서 도입한 인터넷 프로토콜(또는 일련의 규칙)입니다.

Open Graph 태그를 사용하면 소셜 미디어 게시물 미리 보기가 표시되는 방식을 선택할 수 있습니다. 즉, 소셜 게시물의 미리보기 제목, 이미지 등을 선택할 수 있습니다.

 

예: 페이지를 공유할 때 선택한 이미지가 표시되도록 하려면 다음과 같이 페이지 HTML의 섹션에 이 이미지 태그를 포함합니다.

 

Open Graph는 Facebook 및 Pinterest에 적용되는 반면 Twitter는 Twitter 카드를 사용합니다. Yoast 또는 RankMath와 같은 플러그인을 사용하여 이러한 이미지 태그를 설정하고 게시물을 미리 볼 수 있습니다.

 

사이트 이미지 문제 찾기

사이트 이미지를 최적화하는 방법을 살펴보았습니다. 그러나 수정해야 할 기존 문제를 어떻게 찾을 수 있습니까? 사이트 감사 도구를 사용하여 이러한 문제를 강조할 수 있습니다.

 

사이트 감사로 이동하여 문제 탭을 클릭하십시오. 문제 보고서에는 오류, 경고 및 알림 목록이 표시됩니다.

 

페이지를 스크롤하여 해결해야 할 사항에 대한 전반적인 아이디어를 얻거나 검색 창을 사용하여 결과 범위를 좁힐 수 있습니다. 이미지와 관련된 문제를 찾으려면 "이미지"라는 단어로 필터링하세요.

 

보시다시피 깨진 내부 이미지 3개와 관련된 오류가 있습니다. "3개의 내부 이미지가 손상되었습니다"라는 앵커 텍스트를 클릭하면 문제를 일으키는 이미지와 해당 이미지가 있는 페이지를 확인할 수 있습니다. 감사에서는 깨진 외부 이미지도 강조 표시합니다.

"경고" 섹션에서 찾을 수 있습니다. 이 경우 사이트에 깨진 외부 이미지가 없습니다.

 

Alt 속성이 없는 이미지

Google에서 이미지의 순위를 지정하려면 이미지에 대체 텍스트를 제공하는 것이 매우 중요합니다.

사이트 감사를 다시 사용하여 대체 텍스트 없이 사이트의 모든 이미지 목록에 액세스 할 수 있습니다.

사이트 감사 도구를 열면 "문제" 탭으로 돌아갑니다.

 

"주의 사항" 아래에서 "x 이미지에는 대체 속성이 없습니다."로 스크롤합니다.

목록에 있는 문제를 해결하는 방법을 알아보려면 "이유 및 해결 방법"을 클릭하십시오. 다음과 같은 추가 리소스에 대한 개요 및 링크가 포함된 팝업이 나타납니다.

 

다음으로, 누락된 대체 속성의 수(이 경우 "57개의 이미지")를 클릭하면 대체 속성이 없는 이미지의 전체 목록으로 이동합니다.

CMS에 로그인하고 이미지가 없는 이미지에 대체 텍스트를 추가하여 수정하십시오.

 

이미지 SEO에 대한 결론과 더 알아봐야 할 것

시간을 들여 사이트의 이미지를 적절하게 최적화하면 트래픽에 상당한 영향을 미칠 수 있습니다. 또한 더 빠른 로딩 시간과 향상된 접근성을 통해 사용자 경험을 향상할 수 있습니다.

 

이미지 SEO를 무시하면 많은 것들을 놓칠 수 있습니다.

 

alt 태그 자세히 적어서 구글 SEO 최적화 점수 높이는 방법

 

각종 검색 포털에서 콘텐츠 순위를 높일 수 있는 의외의 방법

 

참조 원문 링크: https://www.semrush.com/blog/image-seo/