네이버 웹마스터 도구 사이트 진단에서 ‘Alt 속성 누락’이 발생하였다. SEO(검색엔진최적화) 측면에서 문제가 발생한 것이므로 문제의 원인을 진단하고 해결해 보도록 한다. 아직 네이버 서치어드바이저에 등록하지 않았다면 워드프레스 네이버 서치어드바이저 등록하기를 참고하여 블로그를 등록하도록 한다.
Alt 속성이란?
Alt 속성은 HTML의 <img> 태그 속성으로 이미지의 대체 텍스트를 지정하는 속성이며(alternative text) 선택적으로 적용할 수 있다.
스크린 리더를 사용하는 시각장애인의 경우에는 대체 텍스트로 설명할 수 있어서 웹 접근성 차원에서 매우 유용하다. 또한 원본 파일 삭제, 네트워크 오류, 콘텐츠 차단이나 기타 오류로 인해서 이미지를 표시할 수 없을 때 해당 텍스트를 대신 보여주게 된다. 필수 속성은 아니지만 이미지를 대체하는 텍스트로 중요한 속성이다.
<img> 태그에서 alt 속성이 적용된 HTML 코드는 다음과 같다.
<img src="wordpress_logo.jpg" alt="워드프레스 로고">위 HTML 코드가 적용되어 웹 브라우저에 실제 표시되는 이미지는 다음과 같다.
alt 속성은 사용자가 이미지를 이해할 수 있도록 하고 이미지를 표시할 수 없어 사용자가 이미지를 볼 수 없는 상황일 때를 가정해서 어떤 이미지를 이해할 수 있도록 적절한 대체 텍스트를 작성하도록 한다.
Alt 속성 누락 확인
네이버 웹마스터 도구의 사이트 관리에서 사이트를 선택한 후, 리포트>사이트 진단을 선택하면 유형별 진단 정보에서 Alt 속성 누락을 페이지 수와 함께 확인할 수 있다. 클릭하면 Alt 속성 누락 페이지로 이동한다.
Alt 속성 누락 페이지에서의 그래프는 해당 문제가 발생한 변동량(페이지 수)을 날짜별로 표시한다. 날짜의 경과와 함께 변동량이 계속 증가하는 것을 볼 수 있는데, 문제가 해결되지 않고 계속 누적되어 쌓인다는 것을 알 수 있다.
Alt 속성 누락 수정
페이지 목록에서 URL을 클릭하면 문제가 발생한 페이지가 표시된다. WP 관리자 로그인한 상태에서 상단에 글 편집을 클릭해서 편집 모드로 진입한다.
편집모드에서 왼쪽 속성 창에 블록 탭을 선택한 후, 본문에서의 이미지를 클릭한다. 속성 창에서 대체 텍스트 항목을 볼 수 있는데, 이 항목이 바로 Alt 속성을 의미한다. 만약 입력이 되어 있지 않다면 이 때문에 Alt 속성 누락이 발생한 것이므로 이미지에 맞게 대체 텍스트를 입력하도록 한다. 이미지가 여러 개일 경우 하나씩 클릭하여 대체 텍스트가 입력되어 있는지 확인하고 누락되었다면 대체 텍스트를 입력하면 된다.
특성 이미지도 확인해야 한다. 편집모드에서 왼쪽 속성 창에 글 탭을 선택한 후, 특성 이미지가 설정되어 있다면 대체 텍스트 입력 확인을 위해 교체 버튼을 클릭한다.
특성 이미지 편집에서 대체 텍스트가 입력되어 있지 않다면 이미지에 맞게 대체 텍스트를 입력한다.
이렇게 본문에서의 이미지와 특성 이미지에 대체 텍스트가 누락되어 있는지 확인하고 누락이 있다면 대체 텍스트를 입력해 넣으면 Alt 속성 누락 수정이 완료된다. 수정이 완료된 오른쪽 상단 ‘저장’ 버튼을 클릭하여 글을 저장하도록 한다. 문제 발생으로 색인에 문제가 생긴 페이지들은 워드프레스 네이버 서치어드바이저 등록하기의 웹페이지 수집을 참고하여 웹페이지 수집 요청을 하도록 한다.
마치며
글 작성 시에 이미지를 추가하면서 대체 텍스트를 입력하는데 간혹 누락되는 경우가 있다. 이런 경우에는 대체 텍스트가 누락된 것을 발견하기가 쉽지 않은데 네이버 웹마스터 도구의 사이트 진단에 이를 편리하게 알려주어 쉽게 수정이 가능하다. 네이버 웹마스터 도구의 사이트 진단 항목에 Alt 속성 누락이 발견된다면 위와 같은 방법으로 수정해 보도록 하자.