본문 바로가기
블로그관리/구글서치콘솔

구글 서치 콘솔 "클릭할 수 있는 요소가 서로 너무 가까움" 완벽해결!!

by 뜬글 2022. 8. 26.
반응형

클릭할 수 있는 요소가 서로 너무 가까움 썸네일

 

티스토리나 애드센스 광고를 사용하시는 사용자라면, 한 번쯤은 이메일이나 구글 서치 콘솔 사이트에서 아래와 같은 문구를 보신 적이 있으실 텐데요.

 

클릭할 수 있는 요소가 서로 너무 가까움 경고문구

 

위 문제가 발생하는 이유는 작성한 콘텐츠의 크기와 모바일 사용자들이 사용하는 기기들의 다양성 때문에 발생하게 됩니다.

 

왜냐하면 콘텐츠가 기기들의 화면에 맞춰 변경되면서 터치해야 하는 타깃의 크기도 변경되어 객체들이 서로 겹쳐지기 때문입니다.

 

위 문제가 발생하면 사이트의 검색 노출에서 제외되고, 방문자(▼)가 줄어들면 역시 애드센스 수익(▼)도 줄어들게 됩니다.

 

그럼 문제의 해결방법을 설명하겠습니다.

 

여기에서 중요한 것은 이 문제는 "콘텐츠 폭이 화면 폭보다 넓음"과 같이 발생하며, 둘 다 해결해 주어야 합니다.

 

· 먼저 아래 링크에 들어가서 콘텐츠 폭에 관한 문제부터 해결합니다.

2022.08.26 - [티스토리/구글 서치 콘솔] - "콘텐츠 폭이 화면 폭보다 넓음" 완벽 해결!!

 

해결하셨다면 다음으로 넘어가겠습니다.

 

· [티스토리 관리] > [스킨 편집] > [html 편집]  > [CSS 탭]으로 들어갑니다.

2022.08.25 - [티스토리/티스토리 관리] - 티스토리 html 편집 들어가기!

 

· [CSS 탭]에서 아래처럼 'CSS CONTENTS' 목록 마지막에 "Touch Screen Check"를 만들어 줍니다.

※ 목록은 나중에 쉽게 찾기 위해서 만들어 놓는 것이므로, 만들지 않아도 상관은 없습니다.

 

CSS CONTENTS 목록 만들기

 

· CSS 편집 화면에 커서를 두고, [Ctrl] + [end]를 눌러서 제일 아래쪽으로 이동해서 아래 파일을 다운로드 받아서 복사, 붙여넣기 해 줍니다.

※ 아래 코드는 사용자의 화면 크기를 확인하고 콘텐츠의 크기를 변경하는 코드입니다.

 

Touch Screen Check.txt
0.00MB

 

사용자 기기 확인 후 콘텐츠 크기 변경 코드

 

· 다음으로 [CSS] 탭에서 [Ctrl] + [F]를 눌러서, "line-height"를 검색합니다.

 

line-height 코드 검색

 

· 아래에서 처럼 "line-height"의 줄 간격 값을 "1.25"에서 "2.5"로 변경합니다.

 

줄 간격 값 변경

 

· 마지막으로 우측 상단 [적용]을 눌러서 저장합니다.

 

· 다시 구글 서치 콘솔로 돌아와 수정 결과 확인을 눌러서 유효성 검사를 진행하면 작업은 끝이 납니다.

 

유효성 검사가 진행 중이라고 바뀌게 되며, 며칠 후 아래처럼 등록된 메일로 결과가 오게 됩니다.

 

클릭할 수 있는 요소가 너무 가까움 해결 메일

300x250

댓글