클릭할 수 있는 요소가 서로 너무 가까움 문제 해결하는 방법

구글 서치 콘솔(Google Search Console Team)에서 메일이 한통 왔습니다. 제 사이트에서 새로운 모바일 사용 편의성 문제가 발견되었다는 내용이었습니다. 구체적인 문제 요소는 '클릭할 수 있는 요소가 서로 너무 가까움, 콘텐츠 폭이 화면 폭보다 넓음'이라는 두 가지 이유였습니다.

컴.알.못인 저에게는 이런 오류는 큰 시련으로 다가왔습니다. 주변에 도움을 구할 사람이 없어서 혼자 해결하기 위해 구글 검색을 열심히 해보았습니다. 폭풍 검색에도 불구하고 같은 사례는 없었습니다. 그래도 참고될만한 글들이 있어서 참고하여 에러 해결에 성공하였습니다. 문제가 해결돼서 기쁜 마음에 같은 이유로 문제가 발생하신 분들께 조금이라도 도움이 될 수 있게 후기를 적어보려고 합니다. 

구글 서치 콘솔 오류 해결 방법

1. 모바일 사용 편의성 문제 - 메일

저에게 온 메일 내용입니다. 메일 제목은 '사이트에서 새로운 모바일 사용 편의성 문제가 발견됨'입니다.

모바일 사용 편의성 문제

메일 내용을 자세히 살펴보면 주요 문제는 두 가지입니다.

- 클릭할 수 있는 요소가 서로 너무 가까움.

- 콘텐츠 폭이 화면 폭보다 넓음.

문제를 해결하기 위해 '모바일 사용 편의성 문제 해결하기'라는 파란색 버튼을 클릭합니다.

2. 모바일 사용 편의성 문제 - 구글 서치 콘솔

구글 서치 콘솔 모바일 사용 편의성 상세 정보

그러면 구글 서치 콘솔 페이지로 이동됩니다. 스크롤을 아래로 내려 상세정보를 확인합니다. 오류 상태와 유형을 알 수 있습니다.  해당 내용을 클릭하면 어떤 페이지에서 오류가 발생하는지 확인 가능합니다. 저 같은 경우에는 2가지 오류 유형이 <클릭할 수 있는 요소가 서로 너무 가까움, 콘텐츠 폭이 화면 폭보다 넓음.> 한 페이지에서 발생하고 있었습니다. 확인 후 오류가 발생하는 페이지에 들어가 봅니다.

3. 오류 발생 페이지 확인하기

오류가 발생하고 있는 페이지에서는 특별한 점이라고 딱 한 가지밖에 없었습니다. 바로 본문 내 자동 광고가 연속으로 2개가 붙어 있다는 것이었습니다. 이점은 <클릭할 수 있는 요소가 서로 너무 가까움> 오류의 원인이라고 판단되었습니다.

이 광고는 제가 2개를 연속으로 넣은 게 아닙니다. 자동 광고인데 구글 애드센스가 스스로 2개를 붙여서 송출한 것입니다. ㅠㅠ 연속으로 광고가 붙지 않도록 바꾸면 모바일 편의성 문제 중 한 개가 해결될 것이라는 예감이 들었습니다. 자동 광고인데 어떻게 하면 개수를 조절할 수 있을지 생각에 잠깁니다.

구글 애드센스(Google Adsense)에 접속하여 로그인을 합니다. 그리고 [광고] - [개요] - [사이트 기준]에서 [해당 사이트]의 [광고 설정(연필 모양 아이콘)]으로 들어갑니다.

[광고 설정] 페이지에서 [광고 로드]를 클릭합니다.

[광고 로드]는 페이지에 게재되는 광고의 수를 설정할 수 있습니다. 값을 줄여줍니다. 그리고 [사이트에 적용]을 클릭합니다.

다음으로 해당 페이지에 <컨텐츠 폭이 화면 폭보다 넓음.> 원인을 찾아봤습니다. 그런데 저는 태그 잘림 문제도 없었고 도표나 표가 들어간 게시글이 아니어서 원인을 찾을 수 없었습니다. 그래서 해당 원인은 해결하지 못한 채[구글 서치 콘솔]로 돌아와서 [수정 결과 확인]을 클릭하여 유효성 검사를 진행했습니다.

4. 글을 마치며.

위의 내용을 읽어보셨다면 아시겠지만 저는 2가지 문제점 중 한 가지에 해당하는 것만 조치를 취했습니다. 그런데 조치 후 두 가지 오류가 한꺼번에 해결되었습니다. 오잉?!

이유는 모르겠지만 <콘텐츠 폭이 화면 폭보다 넓음.> 문제도 해결되었습니다.

반응형 스킨을 사용하는 경우 해당 오류가 스킨 변경으로 인한 일시적인 충돌인 경우가 많다고 합니다. 그래서  '유효성 검사'를 새로 하는 것만으로도 문제 해결되기도 한다네요. 저도 그래서 해결되었을지도 모르겠습니다. 

구글 서치 콘솔에서 오류 메일(색인 생성 범위 오류 등)이 올 때마다 긴장을 하게 됩니다. 다들 오류 잘 해결하시고 블로그 운영 원활하게 하시길 바랍니다. 읽어주셔서 감사합니다. '^' ❤