W3C 유효성 검사기를 사용하여 SEO를 개선하는 방법

웹 개발자는 코드가 깨끗하고 유효하며 액세스 가능한지 확인하고 싶을 것입니다. 이것은 또한 검색 엔진 최적화(SEO)를 향상시키는 데 도움이 될 수 있습니다. 다행히 W3C 유효성 검사기를 사용하여 작업이 표준에 부합하는지 확인할 수 있습니다.

이 게시물에서 우리는 W3C와 W3C의 다른 검증자들에 대해 자세히 살펴볼 것입니다. 그런 다음 이러한 도구를 사용하여 코드의 유효성을 검사하고 결과를 해석하는 방법을 보여 드리겠습니다. 마지막으로 몇 가지 일반적인 W3C 유효성 검사 오류와 해결 방법을 살펴보겠습니다. 시작하자!

W3C 검증이란 무엇입니까?

W3C는 World Wide Web Consortium의 약자이며 웹 전체의 코딩 표준을 감독하는 국제 조직입니다. HTML 및 CSS 코드가 유효하고 오류가 없는지 확인하는 데 도움이 되는 유효성 검사기 서비스를 제공합니다.

CSS 유효성 검사기는 Jigsaw라고 하며 W3C 웹 표준에 따라 콘텐츠를 확인합니다.

HTML 유효성 검사기는 매우 유사한 방식으로 작동합니다. HTML, XHTML, SMIL, MathML 등의 웹 문서의 마크업 유효성을 검증합니다.

이러한 웹 표준을 준수함으로써 귀하의 콘텐츠가 사용자 친화적이고 액세스 가능하도록 보장할 수 있습니다. 이러한 도구는 또한 작업의 플랫폼 간 호환성을 확인하여 더 나은 사용자 경험(UX)을 만드는 데 도움이 됩니다. 이는 결과적으로 핵심 성능 평가 점수를 개선하고 SEO를 향상시킬 수 있습니다.

W3C를 사용하여 코드를 검증하는 방법

앞서 언급했듯이 W3C 유효성 검사기는 HTML 및 CSS 코드를 스캔하여 조직에서 설정한 웹 표준을 충족하는지 확인합니다. 이 튜토리얼에서는 이러한 도구를 사용하여 작업을 확인하는 방법을 보여줍니다.

HTML 코드 확인

HTML 유효성 검사기부터 시작하겠습니다. 확인하려는 문서의 URI를 입력하거나 코드가 포함된 파일을 업로드하거나 제공된 필드에 확인하려는 마크업을 입력할 수 있습니다.

확인을 위해 페이지나 문서를 제출하면 유효성 검사기가 HTML 코드에 연결된 모든 오류 및 경고 목록을 생성합니다.

이상적으로는 오류와 경고가 없는 것이 좋습니다. 그러나 유효성 검사기가 사용자가 볼 수 있는 모든 것을 고려하지 않기 때문에 이것이 항상 가능한 것은 아닙니다.

예를 들어, 그라디언트가 있는 이미지가 있는 경우 유효성 검사 도구에서 그림과 배경 간의 대비가 불명확하다는 오류가 발생합니다. 그러나 사람의 수표로 명확하게 구분할 수 있습니다.

페이지에 JavaScript 또는 CSS가 포함되어 있으면 HTML 유효성 검사기가 이를 확인하지 않습니다. 이를 위해서는 CSS용 W3C Jigsaw 도구(잠시 후에 다룰 예정임) 또는 Javascript용 JSHINT를 사용해야 합니다.

CSS 유효성 검사

CSS 유효성 검사기는 동일한 방식으로 작동합니다. 유효성 검사를 위해 URI, 문서 또는 마크업을 제출하면 오류 및 경고가 포함된 페이지가 표시됩니다.

보시다시피 CSS와 HTML의 결과는 매우 상세합니다. 해석하는 방법을 알아보겠습니다.

검증인 결과를 해석하는 방법

우리가 보았듯이 유효성 검사기는 오류와 경고라는 두 가지 다른 출력을 생성합니다. 심각한 문제를 강조 표시하지 않는 경고를 무시할 수 있습니다. 그러나 오류가 없는 콘텐츠를 게시하는 것이 좋습니다.

오류와 경고 모두 문제가 있는 줄 번호를 보여줍니다. 또한 문제 해결 방법에 대한 제안을 제공합니다.

오류 또는 경고와 함께 제공된 링크를 클릭하면(예: 1행 16열에서 2행 16열로) 유효성 검사기는 코드에서 해당 행을 강조 표시합니다.

HTML 유효성 검사기에 의해 발견된 오류는 온라인 콘텐츠에 액세스하기 위해 장애 보조 장치(예: 화면 판독기)에 의존하는 사용자에게 영향을 미칩니다. 코더로서 이러한 접근성 문제를 간과하기 쉽습니다. 그러나 청중에게 부정적인 영향을 미칠 수 있습니다. 다음 섹션에서 이러한 일반적인 오류를 자세히 살펴보겠습니다.

일반적인 W3C 유효성 검사 오류

CSS 및 HTML 유효성 검사기 모두 코드의 오류를 강조 표시합니다. 가장 일반적인 문제는 다음과 같습니다.

• 닫히지 않은 요소입니다. 페이지에 새 요소를 추가하려면 열기 및 닫기 태그가 필요합니다. 이 오류가 표시되면 닫기 태그를 포함하지 않은 것입니다. 이것은 그리드로 작업할 때 매우 일반적인 문제입니다.
• 대체 태그가 없습니다. 모든 이미지에는 그래픽 로드에 실패한 경우 표시되는 alt 태그가 필요합니다. 그것은 그림을 설명하고 스크린 리더가 그것을 읽을 것입니다. alt 태그를 추가하는 것은 필수 접근성 요구 사항입니다.
• 제목 태그의 잘못된 사용. 이 CSS 문제는 개발자가 특정 부제목의 글꼴 스타일로 <h> 태그를 사용할 때 발생합니다. 태그는 스타일이 아닌 탐색을 위해 설계되었으므로 탐색이 아닌 부제목은 font:size=# 속성을 사용하여 크기를 조정해야 합니다.

또한 몇 가지 구문 분석 오류를 확인할 수도 있습니다. 이는 코드의 실수를 나타내지만 유효성 검사기가 항상 문제가 있는 위치를 표시하지는 않습니다. 문제를 찾으려면 작업을 수행해야 합니다.

다음은 구문 분석 오류의 한 가지 예입니다.

이 오류는 CSS 스타일시트에 HTML 요소가 포함되어 있을 때 발생합니다. CSS 유효성 검사기는 오류에 대한 줄 번호를 제공하지 않지만 제공된 코드 블록을 복사하고 코드 편집기 또는 IDE 내에서 검색할 수 있습니다.

일반적인 오류를 수정하는 방법

다행히 W3C 유효성 검사기는 오류를 찾을 수 있는 위치와 수정 방법을 알려줍니다. 예를 들어 누락된 대체 태그가 있는 경우 유효성 검사기가 이를 포함해야 하는 위치를 알려줍니다.

열린 태그가 있는 경우 유효성 검사기는 닫는 태그의 위치를 ​​알려주지 않습니다. 그러나 열려 있는 태그의 위치를 ​​알려 주므로 해당 코드 블록으로 이동하여 누락된 태그를 추가하면 됩니다.

또한 유효성 검사기에서 직접 입력 옵션을 사용하는 경우 오류가 강조 표시된 전체 코드가 표시됩니다. 따라서 IDE의 원본 코드와 비교하여 오류를 더 빨리 찾고 수정할 수 있습니다.

결론

W3C 유효성 검사기를 사용하면 사이트의 전반적인 성능을 향상시킬 수 있습니다. 이를 통해 코드 팽창을 방지하고 접근성 문제를 해결하며 일반적인 오류를 수정할 수 있습니다. 이러한 모든 요소는 더 빠른 로딩 시간과 더 나은 UX로 이어져 사이트의 SEO를 높일 수 있습니다.

지금까지 살펴본 것처럼 W3C를 사용하여 HTML 및 CSS 코드의 유효성을 검사할 수 있습니다. 이 도구는 수정 제안과 함께 경고 및 오류 목록을 생성합니다. 일반적인 문제에는 닫히지 않은 요소, 대체 태그 누락, 구문 분석 오류가 포함됩니다.

W3C 유효성 검사기 사용에 대해 질문이 있습니까? 아래 의견 섹션에서 알려주십시오!

Chaosamran_Studio/Shutterstock.com을 통한 추천 이미지