모바일 사용 편의성 오류 콘텐츠 폭이 화면 폭보다 넓음, 클릭할 수 있는 요소가 서로 너무 가까움 해결하기

북클럽 스킨을 변경하면서 모바일 사용 편의성 오류가 점점 한두개씩 늘어나기 시작했습니다.

오류는 두가지로 클릭할 수 있는 요소가 서로 너무 가까움과 콘텐츠 폭이 화면 폭보다 넓음 이였습니다.

과거에도 이 오류가 떠서 수정했었던 글이 있었는데 그 방법으로 해봐도 전혀 '수정 결과 확인'이 적용되지 않았습니다.

스킨 변경 탓인지, 글을 작성했을 때 간격 때문인 것인지 도무지 모르겠더라고요.

모바일 편의성 오류 해결하기

 

 

구글 서치 콘솔의 모바일 사용 편의성 오류 발견. 

콘텐츠 폭이 화면 폭보다 넓음, 클릭할 수 있는 요소가 서로 너무 가까움

모바일 편의성 오류 - 클릭할 수 있는 요소가 서로 너무 가까움, 콘텐츠 폭이 화면 폭보다 넓음

 

12개였던 오류는 글을 쓰고 구글에서 색인이 되고 크롤링이 될 때마다 점점 늘어나 16개까지 되었습니다.

꼬락서니로 봐서는 점점 늘어날게 예상이 되는 상황이었습니다.

스킨 변경 전엔 뜨지 않던 오류였었고 이제는 과거에 썼던 글들까지 갑자기 오류로 잡혀버리고 있던 상황이었습니다. 당연히 새로 쓰는 글도 오류로 잡혀버리고 있던 상황이었고요.

PC보다 모바일로 접속자가 많은데 이런 오류가 있으면 안 되죠. 

해결방법을 찾아보도록 합니다.

 

모바일 편의성 오류 문제점 찾기

혹시 글 간격을 너무 붙여서인가 싶어 오류가 뜬 글마다 들어가서 글 간격도 수정을 해주고 url검사를 해봤습니다.

결과는 오류가 전혀 수정이 되지 않았습니다. 

전체적으로 수정하고 '수정 결과 확인'을 눌러도 '빠른 초기 유효성 검사 실행 중'에서 오류가 해결되지 않았다고 오류 목록을 다시 띄워줍니다.

 

차근히 생각에 빠져봅니다. ㅋㅋㅋㅋ  씅난다! 

최근 다시 블로그 글을 업데이트하면서 스킨도 바꾸고, 애드센스 광고도 다시 수정하고, 끊긴 애드핏 광고도 다시 붙이고, 북클럽 스킨 최적화 작업도 했었고 여러 가지를 했었습니다.

 

그럼 스킨의 문제인가..? 북클럽 스킨으로 변경하고 html과 css를 좀 만지면서 애드센스 광고를 글마다 붙여 넣었는데 혹시 이게 잘못인가 싶어 검색을 좀 해봤지만 다른 분들은 저처럼 오류가 자고 일어나면 점점 늘어나고 있는 상황은 아닌 걸로 봐서 스킨과의 관계는 아닌 것 같았습니다. 패스. 하지만 혹시 몰라서 가독성을 위해 변경했던 폭이며 기타 등등을 원래 대로 돌려놓았습니다.

 

그러면 본문 글에 삽입된 광고와 본문 글과의 간격 때문인가? 그래서 오류 난 글에 들어가서 글 간격을 넓혀주고 사진과 글 사이도 넓혀주고 유효성 검사를 해봤지만 실패. 해결이 되지 않았습니다. 

 

애드핏 광고 때문인가? 오랫동안 방치했던 블로그여서 그런지 애드센스 광고가 미송출이 되더라고요. 예전 글엔 가끔씩 뜨긴 하는데 최근 올리는 글에는 하나도 뜨질 않았었습니다. 그래서 애드핏 광고라도 붙여야겠다 싶어서 끊겼던 애드핏 광고를 살려서 붙였었습니다. 이게 문제였습니다.

 

애드핏 광고 길이 수정

모바일 광고 길이를 오류 뜰 당시엔 320*100으로 했었습니다. 넓고 큼직한 게 최고지! 싶어서 했는데 혹시 이거 때문인가? 

모바일 광고 사이즈 변경을 250*250으로 해봤습니다.

 

콘텐츠 폭이 화면 폭보다 넓음 오류 수정결과확인

 

변경 후에 콘텐츠 폭이 화면 폭보다 넓음과 클릭할 수 있는 요소가 서로 너무 가까움

두 오류로 들어가서 '수정 결과 확인'을 눌러봤습니다. 

 

 

빠른 초기 유효성 검사가 실행 중으로 돌다가 드디어 유효성 검사 상태:시작됨으로 변경이 되었습니다.

계속 해결되지 않았다고 다시 오류 목록을 띄워주다가 이제야 유효성 검사를 시작한 거예요. 이것만 해도 어디야! ㅋㅋㅋ 

이제 결과가 어떻게 나올지 며칠 기다려 봐야겠습니다.