'링크에 식별 가능한 이름이 없습니다' 오류를 해결하는 방법은 무엇입니까?

웹사이트를 검색 엔진에 최적화하는 작업을 적극적으로 진행하고 있다면 웹페이지 성능 개선 방법을 알려주는 구글 라이트하우스 사용해 보셨을 가능성이 높습니다 '링크에 식별 가능한 이름이 없습니다'라는 것입니다.

이 오류는 감사 보고서의 'SEO 섹션'에 강조 표시되어 있으며 웹사이트 사용자 경험 개선과 관련이 있습니다.

이 글에서는 구글 라이트하우스 오류를 해결하는 방법을 살펴보겠습니다. 하지만 그 전에 구글 라이트하우스 도구에 대해 간단히 설명드리겠습니다.

요약: 불분명한 링크 레이블을 빠르게 해결하는 방법

• Google Lighthouse는 의미 있는 텍스트가 부족한 링크에 경고 표시를 하는데, 이는 접근성과 사용자 경험을 저해할 수 있습니다.

• "여기를 클릭하세요"와 같은 모호한 문구를 목적지를 명확하게 설명하는 구체적인 링크 텍스트로 바꾸세요.

• 클릭 가능한 이미지에 관련 대체 텍스트를 추가하여 보조 기술이 해당 이미지의 용도를 이해할 수 있도록 하세요.

• 아이콘, 버튼 또는 동적 요소에 aria-label과 같은 속성을 사용하여 접근성을 높이고 쉽게 이해할 수 있도록 하세요.

구글 라이트하우스란 무엇인가요?

오픈 소스 소프트웨어인 Lighthouse는 웹 페이지를 감사하고 개선 방법에 대한 유용한 제안을 제공하는 무료 Google 도구입니다.

구글 라이트하우스 도구가 웹사이트를 평가하는 데 사용하는 다섯 가지 기준은 성능, 접근성, SEO, 모범 사례 및 프로그레시브 웹 앱(PWA) 입니다 .

이러한 매개변수를 기반으로 웹사이트의 전반적인 성능을 개선하기 위한 제안을 제공합니다. 각 매개변수를 간략하게 살펴보겠습니다.

성능

Lighthouse의 성능 진단은 웹사이트의 페이지 속도를 . 웹사이트 로딩 속도와 사용자 최적화 정도를 평가하며, 성능 점수는 0~49점, 50~89점, 90~100점의 세 가지 범주로 나뉩니다.

90~100점 사이의 점수는 웹사이트가 잘 최적화되어 있음을 나타냅니다. 90점 미만은 웹사이트 개선이 필요함을 의미합니다. Lighthouse는 문제점을 지적하고 웹사이트 성능 향상을 .

접근성

이 매개변수는 보조 기술을 사용하는 사람들이 웹사이트에 얼마나 쉽게 접근할 수 있는지를 측정합니다. 링크에 식별 가능한 이름이 없거나, 버튼에 대한 설명이 부족하거나, 이미지에 대체 텍스트(alt text)가 없는 경우 시력이 좋지 않거나 시력이 없는 사람들이 웹사이트에 접근하기 어려울 수 있습니다.

접근성 감사 보고서에서 Lighthouse는 웹사이트의 접근성을 100점 만점으로 평가합니다. 점수가 높을수록 접근성이 우수함을 나타냅니다. 또한 이 도구는 접근성 개선을 위한 제안도 제공합니다.

읽어보세요 : WCAG를 준수하는 WordPress 접근성

검색 엔진 최적화

SEO 관점에서 이 도구는 웹사이트의 기술적 SEO를 분석합니다. 포괄적인 SEO 감사 보고서를 제공하지는 않지만, 수정해야 할 중요한 오류를 강조 표시해 줍니다.

이 프로그램이 분석하는 항목 중 일부는 다음과 같습니다

• 유효한 구조화된 데이터
• 설명 텍스트가 포함된 링크
• 유효한 robots.txt 파일입니다
• 웹페이지 반응성 및 검색 엔진 최적화(인덱싱) 가능성.
• 메타 태그 - 제목 및 설명
• 이미지 및 이미지 대체 텍스트
• 내부 링크의 크롤링 가능성

모범 사례 점검

웹사이트 또는 웹페이지 구축 에 사용된 웹 개발 표준을 분석합니다 . 모범 사례 감사 보고서는 100점 만점으로 점수를 부여하고 수정이 필요한 문제점을 강조 표시합니다.

이 도구는 웹 페이지가 다음 조건을 충족하는지 여부를 판단하는 데 도움이 됩니다

• 브라우저 오류 및 더 이상 사용되지 않는 프레임워크와 API가 없습니다
• HTTPS를 사용하는 보안 서버에서 리소스를 로드하는 중
• 이미지에 올바른 가로세로 비율을 사용하세요
• 크로스 사이트 스크립팅(XSS) 공격 으로부터 안전합니다.
• 자바스크립트 라이브러리의 취약점으로부터 안전합니다.

모범 사례를 준수하고 결함 없는 웹사이트를 구축하고 싶다면 최고의 워드프레스 개발 회사에 문의하십시오.

읽어보세요 : 일반적인 기술적 SEO 문제 및 모범 사례

프로그레시브 웹 앱(PWA)

최종 Google Lighthouse 감사 보고서는 웹 애플리케이션의 유효성을 검증하는 데 도움이 됩니다. 웹 앱이 빠르고 안정적인지, 최적의 사용자 경험을 제공하는지 등을 확인합니다.

이 도구는 웹 앱이 여러 기기에 쉽게 설치되는지, 오프라인 기능과 푸시 알림을 제공하는지 확인합니다. 또한 프로그레시브 웹 앱이 최적화 및 구성되었는지, 모든 HTTP 트래픽을 HTTPS로 리디렉션하는지 여부도 확인합니다.

이 감사 보고서는 다양한 요소에 걸쳐 웹 앱의 성능을 평가하여 PWA 배지를 부여합니다. Google Lighthouse는 웹 애플리케이션의 성능을 개선하는 데 도움이 되는 유용한 제안도 제공합니다.

'링크에 식별 가능한 이름이 없습니다'라는 메시지는 무슨 뜻인가요?

'링크에 식별 가능한 이름이 없습니다'라는 말은 꽤 자명하지만, 이해를 돕기 위해 예시를 하나 들어보겠습니다.

예시 1

<h3>웹사이트 속도를 확인하고 싶으신가요?</h3><li> <a href="https://seahawkmedia.com/tools/website-speed-test/">여기를 클릭하세요</a></li>

예시 2

<h3>웹사이트 속도를 확인하고 싶으신가요?</h3><li> <a href="https://seahawkmedia.com/tools/website-speed-test/">저희가 제공하는 무료 도구를 사용하여 사이트 속도를 확인해 보세요.</a></li>

다음 두 예시 중 어느 예시에서 "링크에 식별 가능한 이름이 없습니다"라는 오류가 발생할까요?

만약 예시 1이라고 답하셨다면, 완전히 맞습니다!

간단히 말해, 구글은 웹사이트의 모든 링크와 버튼에 설명적이거나 매우 명확한 텍스트를 사용해야 한다고 말합니다. 텍스트는 사용자가 클릭했을 때 어떤 일이 일어날지 명확하게 알려줘야 합니다. 예를 들어 , 예시 2는 '이 무료 도구를 사용하여 사이트 속도를 확인하세요'라고 명확하게 설명하고 있습니다

구글은 사용자 경험 개선에 중점을 두고 있습니다. 따라서 링크/버튼/이미지에 설명적인 텍스트를 사용하면 구글 가이드라인을 준수하는 것이며, 이는 검색 결과에서 웹사이트의 순위 향상에 도움이 될 수 있습니다.

'링크에 식별 가능한 이름이 없습니다' 오류를 해결하는 방법은 무엇입니까?

Google Lighthouse에서 링크 테스트 감사가 실패하면 'SEO 섹션'에 다음과 같은 오류 메시지가 표시됩니다

이미지 출처 : https://developer.chrome.com/en/docs/lighthouse/seo/link-text/

이 오류를 방지하려면 Lighthouse에서 제공하는 링크 텍스트 모범 사례를 따라야 합니다. 예를 들면 다음과 같습니다

• 링크 문구를 작성할 때는 웹페이지 또는 블로그 게시물의 주제와 관련된 내용을 사용하세요. 페이지 내용과 관련 없는 링크 문구는 피하십시오.

• 링크 설명은 간결하고 명확하게 작성하세요. 짧은 문구를 사용하는 것이 좋습니다.

• 페이지의 URL을 링크 설명으로 사용하지 마세요.

• 내부 링크에 설명적인 텍스트를 포함시키세요. 이렇게 하면 사용자와 검색 엔진 로봇이 쉽게 탐색할 수 있습니다.

'링크에 식별 가능한 이름이 없습니다' 오류를 해결하기 위한 다른 팁은 다음과 같습니다

텍스트 하이퍼링크에 설명적인 이름 추가

위 예시에서 언급했듯이, '여기를 클릭하세요' 또는 '더 읽어보기'와 같은 하이퍼링크 텍스트는 사용자에게 목적을 명확히 알려주지 않기 때문에 Google에서 충분히 설명적이지 않다고 판단합니다.

아래 설명된 것처럼 사용자는 텍스트만으로 링크의 목적을 파악할 수 있어야 합니다. 이는 사용자 경험을 개선하고 이탈률을 .

<h3>웹사이트 속도를 확인하고 싶으신가요?</h3><li> <a href="https://seahawkmedia.com/tools/website-speed-test/">저희가 제공하는 무료 도구를 사용하여 사이트 속도를 확인해 보세요.</a></li>

Google Lighthouse 도구는 '링크에 식별 가능한 이름이 없습니다' 오류가 있는 웹 페이지 목록을 보여줍니다. 이 오류를 수정하려면 HTML 태그 안에 간략하고 설명적인 텍스트를 추가하기만 하면 됩니다.

하이퍼링크된 이미지에 이미지 대체 텍스트 추가

하이퍼링크가 포함된 이미지의 경우, 링크의 용도를 설명하는 alt 속성을 추가하세요. 이미지는 텍스트 하이퍼링크처럼 화면에 텍스트를 표시하지 않으므로, 이미지의 alt 텍스트는 사용자가 이미지를 클릭했을 때 어떤 일이 발생하거나 어떤 페이지로 이동하게 될지를 설명합니다.

예를 들어, 아래 이미지에서 alt 속성은 "W3Schools.com"으로 설정되어 있습니다. 따라서 사용자가 이미지 위에 마우스를 올리면 이미지를 클릭했을 때 정확히 어디로 이동하게 될지 알 수 있습니다.

이미지 출처 : https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_image_link

이미지 대체 텍스트는 간단하고 명료하게 작성하세요. 이미지에 대한 설명을 할 필요는 없고, 이미지의 용도만 명시하면 '링크에 식별 가능한 이름이 없습니다'라는 이미지 관련 오류를 해결할 수 있습니다.

복잡한 콘텐츠를 포함하는 링크에 식별 가능한 이름 추가

복잡하고 동적인 요소 또는 텍스트가 아닌 콘텐츠의 경우 링크에 aria-label 속성을 추가해야 합니다. 이렇게 하면 특히 보조 기술 사용자가 링크에 더 쉽게 접근할 수 있습니다.

예시 : 팝업 상자의 닫기 버튼(X)

<div id="box">이것은 팝업 상자입니다. <button aria-label="Close" onclick="document.getElementById('box').style.display='none';" class="close-button">X</button></div>

위 예시에서 링크를 클릭하면 팝업 상자(div 요소)가 나타납니다. '닫기' 요소는 'X'라는 글자만 있는 버튼입니다.

여기서 aria-label="닫기"는 버튼(X)에 식별 가능한 이름을 제공합니다.

마지막으로

'링크에 식별 가능한 이름이 없습니다' 오류를 해결하는 것은 매우 간단합니다. Google Lighthouse는 SEO 감사 보고서에서 이 오류를 강조 표시합니다.

링크에 페이지 이름이 명확하게 표시되지 않는 웹 페이지를 찾았다면, HTML 태그 안에 설명 텍스트를 추가하여 문제를 해결할 수 있습니다. 하이퍼링크된 이미지의 경우 이미지 대체 텍스트(alt text)를 추가하고, 동적 요소, 아이콘, 텍스트가 아닌 콘텐츠에는 aria-label 속성을 사용할 수 있습니다.

기술적 SEO 오류는 웹사이트 성능을 저하시킬 뿐만 아니라 사용자 경험을 떨어뜨릴 수 있습니다. 또한 웹 크롤러 가 웹사이트를 정확하게 색인화하는 것을 방해하여 사이트 순위에 영향을 미칠 수도 있습니다.

사용자 경험과 사이트 성능을 개선하려면 일반적인 SEO 문제를 즉시 파악하고 해결해야 합니다. 도움이 필요하면 언제든지 관리형 SEO 서비스 제공업체 .

'링크에 식별 가능한 이름이 없습니다' 오류 관련 FAQ