구글 애드센스 광고 수익을 목적으로 티스토리 블로그를 운영중이시라면, 구글 서치 콘솔 도구 또는 이메일에서 모바일 편의성에 경고 문구를 보신 적 있으실겁니다. 이 문제 또한 사용자의 기기가 각각 다르기 때문에 화면 크기에 맞추어 변경되면서 html 객체들이 서로 겹쳐지기 때문에 발생합니다. 위 문제가 발생하면 사이트의 검색 노출에서 제외되며, 그러면 방문자와 애드센스 수익이 줄어들게 됩니다.

필자의 경우 콘텐츠 폭과 화면 폭이 다른 viewport 문제와 같이 문제 현상이 발생했는데요.

콘텐츠 폭의 해결 문제는 아래 포스트에서 해결할 수 있습니다.

수정 방법

이 문제는 html 코드 수정이 아닌 CSS 시트를 수정해야 합니다.

container padding 조절

1. [티스토리 관리] > [스킨 편집] > [html 편집] 에서 [CSS 탭]으로 들어갑니다.
2. [CSS 탭]에서 아래와 같이 13. Touch Screen Check 로 목차를 주석으로 표기해줍니다. 티스토리의 스킨 CSS 양식에 맞추어 알아보기 쉽도록 추가해주었을 뿐 필수는 아닌 작업입니다.
3. 맨 마지막에 생긴 목차이므로 CSS 시트 가장 끝 줄로 이동해서 아래의 코드 블럭에 있는 CSS 코드를 추가해주세요.복사 방지로 인해 코드를 작성한 txt 파일을 다운받아 내용을 복사해주세요.

• 편집창 맨 밑으로 이동하는 단축키는 [Ctrl] + [end] 입니다.

/* Touch Screen Check */ 
.container a {padding: .2em; } @media (any-pointer: coarse) { .container a { padding: .8em; } }

line-height 수정

line-height 는 텍스트의 행간(줄의 간격) 을 말합니다.

1. [CSS 탭] 편집창에 커서를 클릭하여 포커스한 뒤, [Ctrl] + [F] 를 눌러서 “line-height”를 검색합니다.
2. 아래에서 처럼 body 안에 있는 “line-height” 의 줄 간격 값을 “1.25” → “2.5” 로 변경합니다.

• line-height 검색 시, 필자의 스킨은 52개가 검색되지만 body 태그 안에 있는 CSS 만 수정하면 됩니다.

1. 수정했다면 우측 상단의 [적용] 버튼을 눌러 저장합니다.
2. 구글 서치콘솔에서 [수정 결과 확인]을 눌러서 유효성 검사를 시작하면 완료입니다.

블로그의 활성화 또는 애드센스 수익을 목표로 한다면, 구글 서치 콘솔에서 웹 검색 최적화는 선택이 아니라 필수입니다.