본문 바로가기

카테고리 없음

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

반응형

구글서치콘솔 오류해결!



구글 서치콘솔
광고 경험 보고서 수정



티스토리 블로그와 애드센스를
이용하고 계신 분이라면
애드센스 페이지 상단에 뜨는
알림을 보고 심장이 쿵했던
경험들이 있으실텐데요!

(!)
운영 중이신 사이트 중 하나 이상이
더 나은 광고 표준에 위배되는 광고 경험을
포함하는 것으로 확인되어 경고 상태가 되었습니다
구글서치콘솔의 광고 경험 보고서에서
수정이 필요한 광고 경험을 확인하시기 바랍니다

이러한 경고 알림이 떳길래 우선 놀람과
동시에 해결을 하기 위해 서치를 시작했어요


모바일 사용 편의성?


구글서치콘솔에 접속해 무엇을 개선할지
찾던 와중에 '모바일 사용 편의성'이라는
부분을 클릭해보았는데요

제 블로그 상의 페이지에서
'클릭할 수 있는 요소가 서로 너무 가까움'
이라는 문제가 발생했더라구요

전혀 감도 안오고 처음 겪어보는 오류라
당황을 금치 못했습니다


모바일 친화적이지 않은
tag 페이지..😱


하단에 문제가 있는 URL을 확인해보니
상단의 2건은 유효성 검사를 통해
검토 대기 중 상태로 넘어가버렸는데요

마지막 tag 페이지는 어떻게 해도
모바일 친화적으로 바뀌지 않더라구요

태그페이지는 말 그대로 해시태그,
포스팅의 마지막에 검색이 용이하도록
걸어놓은 태그들을 모아둔 페이지인데요

구글에서 판단하기에 태그들이 너무 붙어있어
모바일에서 블로그를 이용하는 사용자들이
불편할 것이라 생각을 했나봐요..

아마 대부분의 '클릭할 수 있는 요소가 서로
너무 가까움'으로 표기되는 페이지는
태그페이지일 경우가 크다고 하네요


글자 사이의 간격을
늘려 극뽁!


검색을 통해 해결방법을 알려주는
블로그를 찾았는데요!

정말 쉽게 티스토리의 관리자페이지에서
글자 사이의 간격을 늘려 손쉽게
해결할 수가 있었어요!

관리자페이지 - 스킨편집 - html 편집 - CSS

티스토리의 관리자페이지로 접속해서
스킨편집으로 들어가 html 편집을 클릭해주세요!


구원자
line-height


HTML, CSS, 파일업로드 3개의
상단 메뉴에서 CSS를 눌러주세요!

첨보는 형태의 파일소스들이 보이지만
당황하지 않고 CTRL+F를 눌러 단어
line-height를 검색해줍니다!


1.25를 2~2.5사이로
변경


line-height 즉 줄 간격이 1.25로
설정이 되어 있는데요

이것을 2에서 2.5사이로
입력해주시길 바랍니다

저는 +1을 추가한 2.25로
설정을 마쳐주었어요!
적용까지 눌러서 설정을 마쳐주세요!


업데이트 까진
며칠 소요


이렇게 적용을 해도 서치콘솔 상에는
바로 적용은 되지 않는다고 합니다

하지만 문제가 해결되었는지는
URL 테스트를 통해서 알아볼 수
있다고는 하는데요!


모바일 친화적으로
바뀐 페이지!


이렇게 테스트를 마치면
'페이지가 모바일 친화적임'이라고
변한 것을 보실 수 있습니다!

알면 쉽지만 모르면 감도 안잡히는
줄 간격 수정으로 문제를 무사히
해결할 수가 있었네요!

역시 인터넷 세상에는 똑똑한 분들이
정말 많은 것 같아요~


오늘은 친화적이지 못한 페이지를
모바일 친화적으로 바꾸는 방법을
알아보았는데요!

다음에도 더 도움되는 리뷰들로
찾아뵙겠습니다😁

반응형