[티스토리][SEO]대체 텍스트(alt)를 넣었음에도 URL 검사시 alt 속성 누락 오류 해결

어느새 블로그를 시작한 지도 약 4달이 지난 와중에 글만 쓰는 것보다는 내실을 다지는 게 좋을 것 같아서 URL 검사를 돌릴 때마다 매일 나오던 alt 속성 누락을 한번 해결하고자 했고 다른 분들이 나랑 같은 시행착오를 겪지 않았음 하는 마음에 해결방법을 공유한다.

오류 발견 및 해결 시도(대체 텍스트 삽입)

https://all4null.tistory.com/46

[자료구조][C언어]큐(Queue)란?(4)_큐의 활용(백준10845번)

 

내가 쓴 요 글을 대상으로 하겠다. 위 페이지를 검사하면 무려 6개의 alt 속성 누락 경고가 뜬다.

ALT 속성 누락 경고

(네이버 서치 어드바이저나 구글 서치 콘솔로 검사하면 alt 속성 누락 경고가 뜰 때도 있고 안 뜰 때도 있어서 bing web마스터를 사용하였음)

 

아마 글을 쓸 때 대체 텍스트를 집어넣지 않아 생긴 문제인듯하여 모든 이미지에다 이렇게 대체 텍스트를 넣어주었다.

대체 텍스트를 넣는 방법은 html모드에 들어가지 않고 아래와 같이 간단하게 수행이 가능하다.

이미지에 대체 텍스트 삽입방법1

1. 에디터에서 이미지를 클릭 후 대체 텍스트 삽입을 누른 뒤,

 

이미지에 대체 텍스트 삽입방법2

2. 대체 텍스트를 입력 후 확인 버튼을 누르면 된다.

 

대체 텍스트 삽입, 그러나 해결되지 않은 문제

줄어들었지만 여전히 남아있는 ALT 속성 누락 경고

다시 검사를 해보니 여전히 남아있는 오류.. 도대체 무엇이 문제인지 구글링 끝에 겨우 알아낸 사실을 공유하고자 한다

 

네이버 서치어드바이저만으론 오류의 위치가 어딘지 정확히 알기 힘들지만

bing의 웹마스터 도구를 활용하면 해당 웹문서의 어느 부분이 문젠지 알 수 있다.

 

오류 메시지 부분을 클릭하면 이렇게 어느 부분에서 Alt 속성이 누락되었는지 쉽게 알 수 있도록 문제가 되는 코드 부분을 보여준다.

참고로 UI가 불편하게 되어있어 읽기 힘든데 이때 SHIFT + 마우스 휠  스크롤로 쉽게 좌우 이동이 가능하니 읽는데 도움이 되길 바란다.

ALT 속성 누락이 일어난 부분

 

그렇게 확인결과 <span class="thum"> 부분이 문제라고 하는데 페이지 상에서 보이는 다른 글의 썸네일에 문제가 있는 것으로 보았다.

어떻게 하면 저 부분을 수정할 수 있는지 구글링으로 알아본 결과, 스킨을 손봐야 한다는 결론이 나왔다.

HTML 편집을 통한 2차 해결시도 후 성공

문제가 되는 부분을 살펴본 결과 <div class="related-articles"> 태그의 <span class="thum"> 태그 아래의 img 태그가 문제임을 파악했다.

티스토리 관리자-꾸미기-스킨편집-HTML편집으로 이동 후 CTRL + F로 해당 부분을 찾아냈다.

alt 속성 누락 부분 확인

alt 속성 누락 부분 확인 후 수정

비어있는 alt 부분을 "related-articles-thum1"으로 수정해 주고 적용해 준 뒤 다시 검사를 해보았다.

 

alt 속성 누락 오류 해결

드디어 alt 속성 누락 오류가 해결이 되었다!!

 

다음에는 나머지 2개의 SEO문제를 해결해보려고 한다.