정의, 작성 방법 및 SEO에 중요한 이유

오늘날 Google SERP의 거의 19%가 이미지를 표시합니다. 즉, 최선의 SEO 노력에도 불구하고 여전히 다른 유기적 트래픽 소스인 웹사이트 이미지를 놓칠 수 있습니다.

이 트래픽 소스에 어떻게 참여합니까? 이미지 대체 텍스트. 이 기사에서는 이미지 대체 텍스트를 작성하여 이미지가 검색 엔진에서 높은 순위를 차지하고 트래픽을 유도하는 방법을 다룰 것입니다.

목차

비즈니스를 위해 SEO를 수행하는지 여부에 관계없이 웹사이트의 이미지 대체 텍스트를 최적화하는 것은 방문자가 처음 귀하를 찾은 방법에 관계없이 방문자에게 더 나은 사용자 경험을 제공하기 위한 티켓입니다.

이미지 대체 텍스트가 중요한 이유는 무엇입니까?

이미지 대체 텍스트는 접근성, 사용자 경험 및 이미지 트래픽의 세 가지 이유로 중요합니다. 이러한 이유를 이해하면 모든 이미지에 대한 효과적인 대체 텍스트를 작성하는 데 도움이 됩니다. 다이빙하자.

접근성

1999년 W3C는 장애가 있는 사용자가 콘텐츠에 더 쉽게 액세스할 수 있도록 하는 방법을 설명하기 위해 웹 콘텐츠 접근성 지침 1.0을 게시했습니다 . 이러한 지침 중 하나는 "청각적 및 시각적 콘텐츠에 동등한 대안을 제공합니다."였습니다. 이는 이미지(또는 동영상, 사운드, 애플릿 등)가 포함된 웹 페이지에 시각적 또는 청각적 콘텐츠와 동등한 정보가 포함되어야 함을 의미했습니다.

무엇보다도 청각 및 시각 콘텐츠에 대한 설명 텍스트 대안은 모든 사람, 특히 스크린 리더를 사용하여 웹 페이지의 콘텐츠를 흡수할 수 있는 시각 장애가 있는 사람들이 귀하가 공유하는 콘텐츠의 혜택을 누릴 수 있도록 합니다. 설명이 없는 이미지는 해당 기술을 사용하는 사람에게 도움이 되지 않으며 열악한 사용자 경험과 경우에 따라 브랜드 인지도를 떨어뜨립니다.

예를 들어 웹 페이지에 목차로 연결되는 위쪽 화살표 이미지가 포함되어 있다고 가정합니다. 이에 해당하는 텍스트는 "목차로 이동"일 수 있습니다. 이렇게 하면 화면 판독기 또는 기타 보조 기술을 사용하는 사용자가 이미지를 보지 않고도 이미지의 목적을 이해할 수 있습니다.

즉, 대체 텍스트는 시각적 능력에 관계없이 모든 사용자가 시각적 콘텐츠에 액세스할 수 있도록 도와줍니다.

사용자 경험

대체 텍스트는 접근성을 높이고 모든 사용자에게 더 나은 사용자 경험을 제공합니다. 예를 들어 방문자의 대역폭 연결이 낮아서 이미지가 로드되지 않는다고 가정합니다. 끊어진 링크 아이콘만 보는 대신 이미지가 전달하는 내용을 수집하기 위한 대체 텍스트도 볼 수 있습니다.

예를 들어 사이트의 사용자는 왼쪽의 이미지를 볼 수 있습니다. 어떤 이유로든 할 수 없는 경우 오른쪽의 대체 텍스트를 듣거나 볼 수 있습니다. 이는 대체 텍스트가 없는 경우보다 더 나은 사용자 경험을 제공하는 데 도움이 됩니다.

이미지 출처

이미지 트래픽

대체 텍스트가 수행하는 또 다른 중요한 기능은 Google 이미지 또는 이미지 팩으로 검색 결과에 이미지를 표시하는 것입니다. 이미지 팩은 모든 유기적 위치에 나타날 수 있는 이미지 링크의 가로 행으로 표시되는 특수 결과입니다(인트로의 예에서 볼 수 있는 SERP의 1위 자리 포함).

그리고 두 가지 유형의 검색 결과에 나타나는 이미지는 자연 방문자를 받는 또 다른 방법입니다. 이로 인해 수천 명의 방문자가 더 늘어날 수 있습니다. 적어도 HubSpot의 경우에는 그랬습니다.

2018년부터 HubSpot 블로그 팀은 부분적으로 이미지 대체 텍스트 최적화에 더욱 집중하는 새로운 SEO 전략을 구현했습니다. 이를 통해 1년도 채 안 되어 블로그의 이미지 트래픽이 779% 증가하여 자연 조회수가 160,000회 증가했습니다. 이 블로그 게시물에서 팀의 성공에 대해 자세히 알아볼 수 있습니다.

이미지에 대체 텍스트를 추가하는 방법

대부분의 콘텐츠 관리 시스템(CMS)에서 블로그 게시물 본문의 이미지를 클릭하면 이미지의 대체 텍스트를 만들고 변경할 수 있는 이미지 최적화 또는 서식 있는 텍스트 모듈이 생성됩니다.

아래에서 CMS Hub 및 WordPress에 대한 다음 단계를 살펴보겠습니다.

HubSpot CMS에서 대체 텍스트를 추가하는 방법

HubSpot에서 이미지를 클릭하고 편집 아이콘(연필 모양)을 클릭하면 이미지 최적화 팝업 상자가 나타납니다.

HubSpot 포털 내부의 CMS에서 이 이미지 최적화 창은 다음과 같이 표시됩니다.

그런 다음 대체 텍스트는 자동으로 웹 페이지의 HTML 소스 코드에 기록되며 CMS에 쉽게 편집할 수 있는 대체 텍스트 창이 없는 경우 이미지의 대체 텍스트를 추가로 편집할 수 있습니다. 기사의 소스 코드에서 alt 태그는 다음과 같이 표시될 수 있습니다.

WordPress CMS에서 대체 텍스트를 추가하는 방법

WordPress에서 이미지를 클릭하면 사이드바에서 차단 탭이 자동으로 열립니다. "이미지 설정" 섹션에서 빈 필드에 대체 텍스트를 추가합니다.

준비가 되면 화면 상단의 도구 모음에서 업데이트를 클릭합니다.

대체 텍스트의 가장 중요한 규칙은? 설명적이고 구체적이어야 합니다. 그러나 대체 텍스트가 이미지의 컨텍스트도 고려하지 않는 경우 이 대체 텍스트 규칙은 가치를 잃을 수 있음을 명심하십시오. 대체 텍스트는 세 가지 방식으로 표시를 놓칠 수 있습니다. 아래 예를 고려하십시오.

3가지 이미지 대체 텍스트 예시(좋은 점과 나쁜 점)

1. 키워드와 세부사항

잘못된 대체 텍스트

alt="HubSpot office wall Singapore inbound marketing workplace murals orange walls ship it"

위의 대체 텍스트 행에 어떤 문제가 있습니까? HubSpot에 대한 참조가 너무 많습니다. 대체 텍스트를 사용하여 조각난 문장에 키워드를 채우면 이미지에 너무 많은 보풀이 추가되고 컨텍스트가 충분하지 않습니다. 이러한 키워드는 게시자에게는 중요하지만 웹 크롤러에게는 중요하지 않을 수 있습니다 .

실제로 위의 대체 텍스트는 이미지가 게시된 나머지 웹 페이지 또는 기사와 어떻게 관련되어 있는지 Google이 이해하기 어렵게 하여 관심도가 더 높은 관련 롱테일 키워드에 대해 이미지 순위를 매기는 것을 방지합니다.

최악의 상황은 구글이 키워드 채우기에 대해 벌금을 부과한다는 것입니다.

좋은 대체 텍스트

잘못된 대체 텍스트(위)를 염두에 두고 이 이미지에 대한 더 나은 대체 텍스트는 다음과 같을 수 있습니다.

alt="Orange mural that says 'ship it' on a wall at HubSpot's Singapore office"

2. 세부 사항 대 특수성

이미지 출처

잘못된 대체 텍스트

alt="Baseball player hitting a ball at a baseball field"

위의 대체 텍스트 줄은 기술적으로 대체 텍스트의 첫 번째 규칙(설명적이어야 함)을 따르지만 올바른 방식으로 설명적이지는 않습니다. 예, 위의 이미지는 야구장과 야구공을 치는 선수를 보여줍니다. 그러나 이것은 또한 Fenway Park와 Red Sox의 #34 David Ortiz가 우익수 하나를 기록하고 있는 사진이기도 합니다. 예를 들어 보스턴 스포츠에 대한 블로그 게시물에 있는 경우 Google이 이미지를 적절하게 색인화하는 데 필요한 중요한 세부 사항입니다.

좋은 대체 텍스트

잘못된 대체 텍스트(위)를 염두에 두고 이 이미지에 대한 더 나은 대체 텍스트는 다음과 같을 수 있습니다.

alt="David Ortiz of the Boston Red Sox batting from home plate at Fenway Park"

3. 특이성 대 맥락

이미지 출처

위의 두 이미지에는 좋은 대체 텍스트를 작성하는 데 도움이 되는 명확한 컨텍스트가 있습니다. 하나는 HubSpot 사무실에서, 다른 하나는 Fenway Park에서 가져온 것입니다. 하지만 이미지에 그것을 설명할 수 있는 공식적인 맥락(지명 등)이 없다면 어떻게 될까요?

여기에서 이미지를 게시할 기사 또는 웹 페이지의 주제를 사용해야 합니다. 게시하는 이유에 따른 대체 텍스트의 나쁜 예와 좋은 예는 다음과 같습니다.

비즈니스 스쿨 입학에 관한 기사

잘못된 대체 텍스트

alt="Woman pointing to a person's computer screen"

위의 대체 텍스트 줄은 일반적으로 적절한 대체 텍스트로 전달되지만, 우리의 목표가 경영 대학원 진학에 관한 기사와 함께 이 이미지를 게시하는 것이므로 Google이 이미지를 연결하는 데 도움이 될 수 있는 몇 가지 핵심 단어 선택을 놓치고 있습니다. 기사의 특정 섹션.

좋은 대체 텍스트

잘못된 대체 텍스트(위)를 염두에 두고 이 이미지에 대한 더 나은 대체 텍스트는 다음과 같을 수 있습니다.

alt="Business school professor pointing to a student's computer screen"

비즈니스 스쿨 교사를 위한 교육 소프트웨어 웹 페이지

잘못된 대체 텍스트

alt="Teacher pointing to a student's computer screen"

위의 대체 텍스트 줄은 거의 이전 예의 좋은 대체 텍스트만큼 설명적이고 구체적인데 교육 소프트웨어에 대한 웹 페이지에 적합하지 않은 이유는 무엇입니까? 이 예는 비즈니스 스쿨이라는 주제에 대해 더 깊이 파고들며 이 웹 페이지의 이상적인 청중이 교사임을 지정합니다. 따라서 이미지의 대체 텍스트에 이를 반영해야 합니다.

좋은 대체 텍스트

잘못된 대체 텍스트(위)를 염두에 두고 이 이미지에 대한 더 나은 대체 텍스트는 다음과 같을 수 있습니다.

alt="Professor using education software to instruct a business school student"

이미지 대체 텍스트 모범 사례

궁극적으로 이미지 대체 텍스트는 구체적이어야 하지만 지원하는 웹 페이지의 주제를 대표해야 합니다. 지금까지 아이디어를 얻었습니까? 다음은 효과적인 이미지 대체 텍스트를 작성하기 위한 몇 가지 중요한 핵심입니다.

• 이미지를 설명하고 구체적으로 설명하십시오.
• 이미지의 주제와 맥락을 모두 사용하여 안내하세요.
• 페이지 주제와 관련된 컨텍스트를 추가합니다.
• 이미지에 알아볼 수 있는 장소나 사람이 없으면 페이지 콘텐츠를 기반으로 컨텍스트를 추가하세요.
• 예를 들어 컴퓨터에서 입력하는 사람의 스톡 이미지에 대한 대체 텍스트는 웹페이지의 주제에 따라 "SEO를 위해 WordPress 웹사이트를 최적화하는 여성" 또는 "무료 블로깅 플랫폼을 연구하는 여성"이 될 수 있습니다.
• 대체 텍스트를 125자 미만으로 유지하십시오 .
• 화면 읽기 도구는 일반적으로 이 시점에서 대체 텍스트 읽기를 중지하고 시각 장애인을 위해 이 설명을 말로 표현할 때 어색한 순간에 장황한 대체 텍스트를 차단합니다.
• "...의 그림" 또는 "...의 이미지"로 대체 텍스트를 시작하지 마십시오. 이미지 설명으로 바로 이동합니다.
• 화면 읽기 도구(및 해당 문제에 대한 Google)는 기사의 HTML 소스 코드에서 이미지로 식별합니다.
• 키워드를 사용하되 아껴서 사용하십시오. 대체 텍스트에 쉽게 포함될 수 있는 경우에만 기사의 대상 키워드를 포함하십시오. 그렇지 않은 경우 시맨틱 키워드를 고려하거나 롱테일 키워드 내에서 가장 중요한 용어만 고려하십시오. 예를 들어 기사의 헤드 키워드가 "리드를 생성하는 방법"인 경우 대체 텍스트에 "리드 생성"을 사용할 수 있습니다. "방법"은 이미지 대체 텍스트에 자연스럽게 포함하기 어려울 수 있기 때문입니다.
• 모든 이미지의 대체 텍스트에 키워드를 집어넣지 마세요. 블로그 게시물에 일련의 본문 이미지가 포함되어 있는 경우 해당 이미지 중 하나 이상에 키워드를 포함하십시오. 주제를 가장 잘 나타내는 이미지를 식별하고 키워드를 지정하십시오. 주변 미디어에서 더 많은 미학적 설명을 고수하십시오.
• 철자 오류를 검토하십시오. 이미지 대체 텍스트의 철자가 틀린 단어는 사용자 경험을 손상시키거나 사이트를 크롤링하는 검색 엔진을 혼란스럽게 할 수 있습니다. 페이지의 다른 콘텐츠와 마찬가지로 대체 텍스트를 검토해야 합니다.
• 모든 이미지에 대체 텍스트를 추가하지 마십시오. SEO, UX 및 접근성을 위해 웹 페이지의 대부분의 이미지에 대체 텍스트를 추가해야 하지만 예외가 있습니다. 예를 들어 순전히 장식적이거나 근처에 텍스트로 설명된 이미지는 빈 alt 속성을 가져야 합니다. 대체 텍스트를 추가해야 하는 경우와 추가하지 말아야 하는 경우에 대한 자세한 분석은 이 의사 결정 트리를 확인하십시오.

대체 텍스트가 SEO에 미치는 영향

Google 에 따르면 대체 텍스트는 이미지의 주제를 이해하기 위해 컴퓨터 비전 알고리즘 및 페이지 콘텐츠와 함께 사용됩니다.

따라서 대체 텍스트는 Google이 이미지의 내용뿐 아니라 웹페이지 전체의 내용을 더 잘 이해하는 데 도움이 됩니다. 이렇게 하면 이미지 검색 결과에 이미지가 나타날 가능성이 높아집니다.

Google의 SGE(Search Generative Experience) 출시와 함께 고품질의 상황별 대체 텍스트는 콘텐츠가 새로운 AI 기반 주요 정보 스냅샷과 혼합되도록 합니다.

예를 들어 Google은 SGE가 주목할만한 옵션, 제품 설명, 가격 및 이미지를 단일 스냅샷으로 제공하여 사람들에게 균형 잡힌 쇼핑 경험을 제공할 수 있다고 말합니다. 제품 이미지에 설명적이고 구체적인 대체 텍스트가 있는 경우 검색 엔진에 컨텍스트를 제공하여 누군가의 결과에서 고품질 선택으로 제품을 표시할 시기를 알 수 있습니다.

주제에 대한 콘텐츠를 만들 때 청중이 해당 주제에 대한 질문에 대한 답변을 찾는 방법을 고려하십시오. 대부분의 경우 Google 검색 사용자는 고전적인 파란색 하이퍼링크 검색 결과를 원하지 않습니다. 이미지 자체가 웹 페이지에 포함되기를 원합니다.

예를 들어 Excel에서 중복 항목을 제거하는 방법을 찾는 방문자는 한 눈에 작업을 완료하는 방법을 이해할 수 있도록 스크린샷을 선호할 수 있습니다.

이미지 출처

이 이미지는 대체 텍스트를 최적화했기 때문에 롱테일 키워드인 "excel에서 중복을 제거하는 방법"에 대한 이미지 검색 결과에 나타납니다. 동일한 키워드에 대한 웹 검색 결과에도 게시물이 나타나기 때문에 방문자는 이 두 가지 다른 채널을 통해 블로그 게시물을 방문할 수 있습니다.

웹사이트에 이미지 대체 텍스트 추가

그렇다면 블로그 게시물과 웹 페이지의 대체 텍스트를 개발할 때 어디에서 시작해야 할까요? 이전에 태그가 지정되지 않은 사진에 대체 텍스트를 통합할 수 있는 위치를 확인하려면 기존 콘텐츠에 대한 기본 감사를 수행하는 것이 좋습니다. 새 alt 태그를 부여한 페이지에서 유기적 트래픽이 어떻게 변하는지 확인하십시오.

최적화하는 이미지가 많을수록 SEO 전략이 더 좋아집니다.

편집자 주: 이 게시물은 원래 2018년 9월에 게시되었으며 포괄적인 내용을 위해 업데이트되었습니다.