웹사이트 이미지의 대체 텍스트란 무엇입니까?

소개

웹사이트의 콘텐츠 내에서 우수한 이미지를 디자인하는 것은 성공적인 온라인 인지도를 위해 매우 중요합니다. 그러나 양질의 사진을 보유하는 것만으로는 페이지에서 예상 트래픽, 판매 및 리드를 얻을 수 있는지 확인하기에 충분하지 않습니다. Google의 이미지 검색 사용자 인터페이스 재설계로 최상의 SEO 결과를 얻으려면 사진을 최적화해야 합니다. 따라서 검색 엔진은 이를 쉽게 이해하여 타겟 고객에게 사이트의 가시성을 높입니다. SERP에서 더 나은 결과를 얻기 위해 이미지에 대체 텍스트를 활용하면 도움이 될 것입니다.

이 기사는 대체 텍스트가 무엇이며 이를 SEO 전략에 추가하는 과정에 대한 자세한 설명을 제공하는 것을 목표로 합니다. 이미지에 null 대체 텍스트가 있어야 하는 경우가 궁금하다면 계속 읽으며 모든 필수 통찰력을 얻으십시오.

사실 : Google 에서 검색 쿼리의 22.6%에 대해 이미지가 반환됩니다. 또한 Z세대 및 밀레니얼 소비자의 62%는 다른 어떤 신기술보다 시각적 검색을 원합니다.

이미지의 대체 텍스트란 무엇입니까?

대체 속성 또는 대체 설명이라고도 하는 대체 텍스트는 웹 페이지의 이미지를 설명하기 위해 할당된 약 100자의 짧은 HTML 요소입니다. 자주 방문하는 사람에게 항상 표시되는 것은 아니지만 검색 엔진 크롤러가 사진의 기능과 모양을 이해하는 데 도움이 됩니다. 또한 사진의 인덱싱이 향상되어 사이트의 가시성이 향상됩니다.

또한 이미지 대체 텍스트 HTML은 시각 장애가 있는 사용자에게 더 나은 웹 액세스를 제공하는 데 도움이 됩니다. 이미지 파일이 페이지에 로드되지 않는 경우 방문자에게 콘텐츠의 전체 그림을 제공하기 위해 대신 대체 설명이 표시됩니다. 실제 모습은 다음과 같습니다.

대체 텍스트 모범 사례

이미지의 대체 텍스트를 작성할 때 아래에 설명된 몇 가지 모범 사례를 따라야 합니다.

대체 설명에 키워드 사용

이미지에 대체 설명을 사용할 때마다 콘텐츠 내에서 키워드를 표시할 기회를 사용하십시오. 특정 검색어에 대한 페이지의 관련성에 대해 검색 엔진과의 커뮤니케이션을 용이하게 합니다.

관련성이 높고 수익성이 높은 키워드를 결정하기 어렵다면 대체 텍스트 생성기가 큰 도움이 될 수 있습니다. 이미지에 대한 대체 설명을 최적화하는 데 사용할 올바른 용어를 아는 데 도움이 됩니다. 그러나 생성된 모든 키워드로 alt 속성을 채우는 것은 피해야 합니다. 결과적으로 잘못 제작된 대체 텍스트가 생성되어 Google에서 불이익을 받을 수 있습니다. 예를 들어, 아래 이미지에서 좋은 대체 텍스트 예제가 이미지를 쉽게 설명한다는 것을 알 수 있습니다. 그러나 맨 아래의 예는 사진이 무엇에 관한 것인지 설명하는 데 그리 멀리 가지 않습니다.:

대체 텍스트를 짧게 유지

설명이 포함된 대체 텍스트를 사용하는 것이 좋지만 이미지를 설명하기 위해 전체 단락을 작성하는 것은 피해야 합니다. 대부분의 스크린 리더는 alt 속성을 최대 125자까지 캡처하므로 짧고 간결한 텍스트를 유지할 수 있습니다.

요소가 너무 많을 때 요점으로 바로 가서 이미지에서 가장 두드러진 특징을 끌어내는 것이 가장 좋습니다. 필수적인 측면은 검색 엔진에 충분한 세부 정보를 제공해야 하며 사용자는 사진을 페이지 컨텍스트와 연관시킬 것입니다.

예를 들어, 아래의 대체 텍스트는 두 마리의 개를 설명할 때 너무 깁니다.

• Alt = 왼쪽에 회색 개, 오른쪽에 긴 귀가 있는 검은색 개, 노란색 덮개가 있는 소파에 누워

훌륭한 대체 설명은 다음과 같습니다.

• Alt = 소파에 누워있는 회색과 검은색 개

또한 다음과 같이 간결한 의미를 나타내지 않을 정도로 너무 짧은 설명은 피하십시오.

• Alt = 개 두 마리

60초 만에 SEO를 테스트하세요!

Diib은 세계 최고의 SEO 도구 중 하나입니다. Diib은 빅 데이터의 힘을 사용하여 빠르고 쉽게 트래픽과 순위를 높일 수 있도록 도와줍니다. 특정 키워드에 대해 이미 더 높은 순위를 차지할 자격이 있는지 여부도 알려드립니다.

• 사용하기 쉬운 자동화된 SEO 도구
• 키워드 및 백링크 모니터링 + 아이디어
• 속도, 보안, + 핵심 활력 추적

• SEO 개선을 ​​위한 아이디어를 지능적으로 제안
• 250,000k 이상의 글로벌 회원
• 내장된 벤치마킹 및 경쟁사 분석

예: "www.diib.com"

무료 가입

250,000개 이상의 회사 및 조직에서 사용:

• 
• 
• 
• 

다음과 동기화

구체적이어야 한다

대체 텍스트를 만들 때마다 웹 페이지의 이미지를 설명해야 함을 명심하십시오. 따라서 가능한 한 그림과 관련이 있는지 확인해야 합니다. 목표는 모든 검색자가 이미지를 보지 않고도 즉시 이해할 수 있도록 하는 것입니다. 이미지 대체 텍스트 HTML을 디자인할 때 반드시 그림을 보지 않고도 설명의 관련성을 이해할 수 있는지 자문해 보십시오.

예를 들어 공원에서 노는 강아지 사진을 가져오려면 다음과 같이 하면 됩니다.

• Alt = 공원에서 노는 수컷 및 암컷 검은 독일 셰퍼드 개

설명은 그림이 나타내는 것을 명확하고 정확하게 나타냅니다.

반면에 다음과 같이 작성하는 것은 잘못된 것입니다.

• Alt = 잔디에서 노는 개

SEO만을 위해 대체 텍스트를 작성하지 마십시오.

대체 설명을 작성하는 동안 가시성을 높이는 것을 목표로 하는 것은 이해할 수 있습니다. 그러나 SEO 개선에만 집중하지 말고 검색자를 염두에 두십시오. alt 속성은 특정 이미지 및 페이지 콘텐츠와 관련성을 유지해야 합니다. 대체 텍스트는 시각 장애인을 위해 특별히 사용됩니다.

인용 상자: "영국에서 시력 상실을 안고 살아가는 총 인구는 2,140,000명으로 추정됩니다(2021년)"(Site Loss Data Tool, RNIB 2021)

따라서 대체 텍스트를 키워드로 채우면 SEO 노력을 향상시키는 대신 검색 엔진 순위에 악영향을 미칩니다. 또한 두 시나리오 모두 스팸이 될 수 있으므로 수많은 이미지에 대해 유사한 키워드 및 대체 속성을 사용하지 마십시오.

양식 버튼을 생략하지 마십시오

사이트에 이미지를 '제출' 버튼으로 사용하는 양식이 있는 경우 대체 텍스트를 제공하는 것이 가장 좋습니다. 이미지 버튼에는 '지금 신청', '검색', '가입'과 같은 기능을 설명하는 대체 설명이 있어야 합니다.

추가 사양을 포함하지 마십시오

사용자와 검색 엔진은 대체 텍스트가 사이트의 이미지를 참조한다고 가정합니다. 따라서 alt 속성에 'picture of', 'image of' 등과 같은 다른 사양을 추가할 필요가 없습니다.

longdesc를 사용하는 것을 기억하십시오

웹사이트에 더 긴 설명이 필요한 복잡한 이미지가 있을 수 있습니다. 이 경우 longdesc = 'longdesc를 사용하여 탐색'을 사용하는 것을 잊지 마십시오. 다음은 기술적으로 어떻게 보이는지에 대한 좋은 예입니다.

이미지를 텍스트로 사용하지 않기

SEO 친화적인 웹 개발의 경우 검색 엔진이 이미지 내의 텍스트를 읽지 않으므로 단어 대신 사진을 사용하지 마십시오. 그러나 반드시 해야 하는 경우 Alt 속성 내에서 그림이 말하는 내용을 설명해야 합니다.

대체 텍스트 작동 방식

검색 엔진은 우리와 같은 방식으로 이미지를 볼 수 없음을 명심하십시오. 따라서 Google에 사진의 내용을 이해하도록 도움을 제공하면 도움이 될 것입니다. 이것이 크롤러가 페이지의 이미지를 '볼' 수 있도록 대체 텍스트 액세스 가능성과 파일 이름을 갖도록 이미지 이름을 지정하는 것이 중요한 이유 중 하나입니다.

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

대체 텍스트를 디자인하고 변경하는 데 사용할 수 있는 대부분의 CMS는 간단합니다. 게시물 본문에 있는 사진을 한 번만 클릭하면 alt 속성을 디자인하기 위한 서식 있는 텍스트 모듈 또는 이미지 최적화를 얻을 수 있습니다.

또한 페이지의 웹 디자인에 따라 다릅니다. 대부분의 경우 대부분의 사이트는 사진이 업로드될 때 대체 설명을 입력하는 섹션을 제공합니다. 또한 업로드된 이미지를 추가로 변경할 수 있습니다. 그런 다음 이미지 텍스트 HTML 형식으로 페이지에 인코딩됩니다.

브라우저의 '검사 기능'을 사용하면 HTML 코드를 볼 수 있습니다. 예를 들어 Chrome을 사용할 때 웹 페이지에서 사진을 클릭하고 드롭다운 메뉴의 검사 기능을 누릅니다. 그러면 'alt = 뒤에 alt 설명'이 표시되는 사이트의 HTML 태그가 있는 창이 나타납니다.

다음은 다른 플랫폼에서 대체 텍스트를 추가하는 방법을 보여줍니다.

· 워드프레스

WordPress를 사용할 때 프로세스는 간단합니다. 편집기 창으로 이동하여 이미지를 탭합니다. '대체 텍스트(대체 텍스트)'에 대한 이미지 설정 필드가 표시되어 대체 설명을 생성하거나 변경할 수 있습니다.

또는 미디어 라이브러리로 이동하여 원하는 이미지를 클릭할 수 있습니다. 대체 텍스트를 편집하거나 디자인할 수 있는 옵션이 표시됩니다.

(이미지 크레디트: wpbeginner)

· 윅스

Wix는 또한 플랫폼을 SEO 친화적으로 만들기 위한 노력을 강화했습니다. 이제 상점의 사진에 대체 설명을 추가하고 필요한 편집을 수행할 수 있습니다.

편집 창으로 이동하여 대체 텍스트를 추가하려는 이미지를 누르십시오. 설정에서 '이미지에 무엇이 들어 있습니까?'에 대한 옵션을 볼 수 있습니다. 이 영역에 대체 설명을 추가합니다. 다음은 해당 페이지입니다.

(이미지 크레디트: wix.com)

· 마젠토

Magento는 alt 속성을 추가하는 간단한 절차를 제공하는 또 다른 플랫폼입니다.

카탈로그 섹션을 탭하여 대체 텍스트를 추가할 선호하는 제품을 선택하십시오. 그런 다음 비디오 및 이미지 범주로 스크롤하고 특정 사진을 클릭하여 대체 설명을 추가하거나 편집합니다. 다음은 Magento 대체 텍스트 화면입니다.

(이미지 크레디트: 마젠토)

· 쇼피파이

Shopify를 사용하면 제품 및 테마 이미지 모두에 alt 속성을 추가할 수 있습니다.

제품 사진의 대체 설명을 최적화하려면 '제품' 섹션으로 이동한 다음 편집하려는 항목 목록을 누르십시오. 항목 세부 정보 페이지에서 미디어 항목을 누르고 미디어 미리 보기 페이지를 찾습니다. 다음으로 대체 텍스트를 추가합니다. 예를 들어:

(이미지 크레디트: 점점 더)

테마 이미지에 alt 속성을 추가할 때 '온라인 스토어' 섹션으로 이동하여 '테마'를 찾은 다음 탭하여 스토어 테마를 사용자 지정하세요. 이미지 블록과 개별 사진을 클릭하면 왼쪽에 메뉴 섹션이 표시됩니다. 그러면 대체 설명을 편집하거나 추가할 수 있는 텍스트 상자가 표시됩니다.

대체 텍스트가 좋은 SEO에 필수적인 이유는 무엇입니까?

이제 이미지에 대체 텍스트를 추가하는 방법을 배웠으므로 웹사이트에서 대체 텍스트를 사용해야 하는 이유와 이점이 누구에게 있는지 궁금할 것입니다. alt 속성의 첫 번째 수혜자인 세 가지 주요 그룹은 다음과 같습니다.

• 검색 엔진 – 대체 설명을 사용하면 검색 엔진이 특정 이미지의 주제를 해석하는 데 도움이 됩니다. 따라서 Google은 관련 검색 결과에 사진을 포함할 시기를 신속하게 결정하여 대체 텍스트 사진을 찾을 가능성을 높일 수 있습니다.
• 시각 장애인 방문자 – 대체 설명을 사용하면 시각 장애인 방문자에게 이미지를 대체할 수 있습니다. 따라서 사용자는 텍스트를 소리내어 읽어주는 프로그램을 활용하여 사진이 콘텐츠에 추가하는 내용을 이해할 수 있습니다.

예를 들어, 그러한 사람들이 탐색 이미지를 사용하는 웹사이트를 탐색한다면 다양한 범주를 파악하는 것이 어려울 것입니다. 그러나 사진에 alt 속성이 포함되어 있으면 전체 사이트에서 이동할 수 있습니다.

• 마케터 – 이미지에서 대체 설명을 활용하면 페이지가 검색 결과에서 더 높은 순위를 얻을 가능성이 높아집니다. 결과적으로 귀하의 사이트는 최적화 덕분에 Google에서 더 많은 트래픽을 얻습니다.

특히 이미지에 회사 이름이 포함된 경우 브랜드 인지도를 높이는 데 도움이 됩니다. 또한 검색 결과에서 페이지가 높을수록 더 많은 사람들이 이미지 결과를 클릭하여 웹사이트를 방문하게 됩니다.

사실 :

• WebSpection의 Dan Morgan은 자신의 이미지를 최적화하여 4일 이내에 Google 이미지에서 "카디프 최고의 인물" 1위에 오르는 사진 중 하나를 얻었습니다.
• 또한 Robbie Richards는 이미지 대체 태그 추가, 이미지 압축 및 기타 몇 가지 SEO 트릭을 통해 150,732회의 방문을 생성했습니다.

—검색 엔진 저널

대체 텍스트가 웹사이트에 중요한 주요 이유

• 접근성 향상: 대부분의 검색자는 일반적으로 시각 장애인입니다. 따라서 온라인 콘텐츠를 소비하는 동안 스크린 리더를 사용합니다. 대체 설명은 페이지의 다른 이미지를 볼 수 없는 방문자에게 설명해야 합니다. 이미지에 대체 텍스트 속성을 사용하지 않으면 사용자가 페이지 내용을 이해할 수 없습니다. 스크린 리더는 결국 그러한 사진을 건너뛰거나 길고 도움이 되지 않는 파일 이름을 읽게 됩니다.
• 주제 관련성 향상: Google이 페이지 콘텐츠를 이해하기 위해 사용된 다양한 용어를 살펴봅니다. 반면에 사이트에 이미지를 포함하면 검색 엔진이 그 목적을 파악할 수 없습니다. 따라서 이미지에서 컨텍스트가 '고정'될 수 있으므로 alt 속성이 필요합니다.
• Google 이미지에서 순위를 지정하는 데 도움이 되도록: 대체 텍스트를 사용하면 Google 이미지 검색 엔진에서 페이지 순위를 높이는 데 도움이 됩니다. 게다가 사람들은 사진을 찾을 때 Bing이나 YouTube와 같은 다른 플랫폼보다 점점 더 그것을 우선시하고 있습니다.
• 이미지 링크의 앵커 텍스트로 사용하려면: 많은 사이트에서 앵커 텍스트는 한 페이지를 다른 페이지로 연결합니다. 검색 엔진은 이를 사용하여 웹사이트와 웹사이트가 수반하는 내용에 대해 더 많이 이해합니다. 같은 목적을 위해 alt 속성을 사용할 수도 있습니다.
• 이미지에 null 대체 텍스트가 있어야 하는 경우 : 검색 엔진에서 더 나은 순위를 얻으려면 이미지에 항상 alt 속성을 포함하는 것이 좋습니다. 동시에 이미지에 대체 텍스트가 없어야 하는 경우를 물어볼 수 있습니다.

특히 이미지에 중요한 세부 정보가 포함되어 있지 않거나 장식용으로 사용되는 경우에는 대체 텍스트를 사용할 필요가 없습니다.

예를 들어 웹사이트에서 아이콘을 사용하여 다양한 콘텐츠 섹션을 구분하는 경우 이미지는 페이지를 예쁘게 보이게 하기 위한 것입니다. 따라서 화면 판독기로 사용자를 짜증나게 할 수 있고 페이지에 SEO 값을 추가하지 않을 수 있으므로 대체 텍스트를 추가할 필요가 없습니다.

또한 스톡 및 일반 이미지에도 대체 텍스트 액세스 가능성이 필요하지 않습니다. 게다가 시각 장애가 있는 독자에게는 삽입하는 것이 유용하지 않을 것입니다.

이 기사가 유용했기를 바랍니다.

사이트 상태에 대해 더 자세히 알고 싶거나 개인 권장 사항 및 알림을 받고 싶다면 Diib으로 웹 사이트를 스캔하십시오. 60초밖에 걸리지 않습니다.

웹사이트 입력

예: "www.diib.com"

무료 가입

저는 Diib이 압도적일 수 있는 Google Analytics 데이터를 이해하는 데 매우 유용하다는 것을 알았습니다. 이 서비스는 데이터를 탐색하고 개선할 수 있는 영역을 찾습니다. 전문가인 경우에도 이를 통해 시간을 절약할 수 있습니다. 저에게 있어 이는 Google Analytics에서 수집한 데이터가 단순히 흥미롭기보다는 개선할 수 있도록 실행 가능하다는 의미입니다.

닉 콜배치
RV 커버 공급

대체 텍스트 문제를 찾고 수정하는 방법

대체 텍스트로 더 나은 결과를 얻으려면 트래픽이 있는 페이지에 대해 감사를 수행하여 필요한 개선을 하면 도움이 됩니다. 다음은 조사를 수행하는 데 사용할 수 있는 절차입니다.

가장 많이 방문한 페이지 찾기

먼저, 청중이 가장 유기적으로 방문한 페이지를 파악하기 위해 철저한 검사를 시작합니다. Ahrefs 사이트 탐색기의 '톱 페이지'에서 Google Search Console, Google Analytics 또는 보고서와 같은 다양한 플랫폼을 통해 이동할 수 있습니다.

alt 설명 감사

Alt 설명에 대한 감사를 수행할 때 Alt Text Tester Chrome 확장 프로그램을 사용할 수 있습니다. 무료 도구를 설치하여 시작한 다음 트래픽이 가장 많은 페이지를 로드하고 확장 프로그램을 활성화하십시오. 다음은 다음과 같습니다.

사진을 롤오버할 때마다 플랫폼에 표시된 대체 설명을 볼 수 있습니다. alt 속성이 누락된 경우 'alt text missing'이라는 경고가 표시되어야 합니다.

콘텐츠의 모든 대체 텍스트에 대해 이미지에서 여러 텍스트를 살펴보세요. 몇 가지 점검 후에 이 도구는 사진이 제대로 최적화되지 않았는지 또는 최적화되지 않았는지 여부를 결정하는 데 도움이 됩니다.

더 많은 페이지에 대해 반복

마지막 프로세스는 가장 많은 트래픽을 생성한 페이지에 대해 동일한 절차를 반복하는 것을 포함해야 합니다. 이 프로세스를 통해 대체 설명 최적화가 우수한지 또는 개선이 필요한지 여부를 알 수 있습니다.

Diib: 대체 텍스트 통계 및 모니터링 제공!

웹 사이트 소유자는 사용하는 웹 플랫폼에 관계없이 대체 설명을 추가하는 것이 간단합니다. 또한 페이지의 모든 이미지에 대체 텍스트가 필요한 것은 아닙니다. 검색 엔진이나 시각 장애가 있는 사용자에게는 이해가 되지 않기 때문입니다. Diib 사용자 대시보드는 웹사이트와 Facebook 프로필의 모든 대체 텍스트를 분석하여 개선을 위한 실행 가능한 통찰력을 제공합니다. 다음은 귀하가 좋아할 몇 가지 기능입니다.

• 웹사이트 상태 및 트래픽 패턴에 영향을 줄 수 있는 Google 알고리즘 변경 사항에 대한 정보를 제공하는 맞춤 알림.
• 웹사이트 상태 및 유기적 트래픽을 개선하는 방법에 대한 맞춤형 제안이 포함된 목표.
• 자신의 대체 텍스트 상태뿐만 아니라 주요 경쟁자의 상태에 대한 통찰력.
• Facebook 프로필을 동기화하면 소셜 미디어 캠페인의 세부 사항에 대한 통찰력을 얻을 수 있습니다. 개별 게시물 실적, 사용자 인구 통계, 게시하기 가장 좋은 시간 및 전환과 같은 것입니다.
• SEO 노력을 미세 조정하고 Shopify의 성장과 성공을 안내할 수 있는 Diib 성장 전문가와의 월간 협업 세션을 제공합니다.

오늘 800-303-3510으로 전화하거나 여기를 클릭하여 무료 60 웹사이트 스캔을 받고 SEO의 강점과 약점에 대해 자세히 알아보세요.