페이지가 모바일 친화적이지 않음 오류 해결 - 구글서치콘솔
티스토리 애드센스 승인 후에 구글 애널리틱스와 구글 서치콘솔에 연결하면 여러가지 정보를 볼 수가 있습니다. 가끔은 구글로부터 수정 보완해야 할 사항을 알림 받는 경우도 있습니다. 구글 서치 콘솔로부터 "탐색경로 문제 해결하기" 같은 메일을 받을 때 대응방안은 기존에 올린 게시물에서 확인할 수 있습니다. 오늘은 "페이지가 모바일 친화적이지 않음"이라는 메일을 받았을 때 확인해야 할 것들을 알아보겠습니다.
구글 애드센스를 하는 블로거들은 다음 검색에서 누락되거나 구글로부터 광고 게재 제한을 받는 경우가 가장 위험한 상황입니다. 구글에서 광고 게재 제한을 받았다가 풀리게 된 내용은 아래에서 보실 수 있습니다.
애드센스 광고 게제 제한
뭔가 좋은 일들이 많을 것 같은 날이었습니다. 휴일에 놀러 가기 좋은 날, 놀러 가던 중이었습니다. 메일을 확인하는데 애드센스에서 정책 위반으로 표시할 수 있는 광고의 수가 제한되었다는
finjoy.net
대부분의 블로거들은 구글의 광고 규정 등을 철저히 지키는 것이 당연한 것입니다. 하지만 광고게제 제한의 경우 무효 트래픽으로 당하는 경우가 많은데요, 무효 트래픽은 제삼자가 하는 경우도 많아서 이런 일이 일어나지 않도록 오늘의 운세에 기대야 하는 상황입니다.
모바일 친화적이지 않음이란?
구글 서치콘솔에서는 주기적으로 홈페이지의 모바일 사용 편의성을 검증하여 문제가 있는 경우 알려줍니다. 보통 이용자들이 받는 오류는 아래와 같은 것이 대부분입니다.
- 클릭할 수 있는 요소가 너무 가까움
- 텍스트가 너무 작음
- 콘텐츠 폭이 화면 폭보다 넓음
일반 이용자는 이런 오류가 발생했다고 하면 애드센스 수익에도 영향이 있지 않을까 하여 이리저리 검색해서 조치합니다. 하지만 그 이후로도 지속적으로 오류가 발생했다고 메일이 오면 대체 무엇이 문제인지 혼란스럽기만 합니다.
발생 원인 및 해결 시도
제 경험상 이런 문제는 보통 스킨을 변경한 후에 발생하는 경우가 많았습니다.
글이 몇개 없었을 경우는 별다른 문제가 없었는데 글이 많아진 후 스킨 변경 후에 런 메시지를 받았는데 그렇게 되면 기존에 쓴 글들을 일일이 편집을 해야 하는 경우도 발생합니다.
예를 들어 저는 "친효스킨"을 이용하던 사용자였는데, 이후에 "고래스킨"으로 변경을 한번 하고, 그 이후에 "JB 팩토리스킨"으로 변경을 했습니다. 각 스킨별 사용기는 위의 링크에서 참고하세요.
특히 적용받은 사이트가 방문자가 그래도 많이 나오는 곳이었습니다.
그런데 실제 해당 사이트를 모바일에서 접속할 때 별다른 문제가 없는 경우가 많다는 점입니다.
글씨도 읽을 만하고, 클릭할 수 있는 요소가 너무 가깝지도 않고, 화면 폭이 문제가 되거나 하지 않아 보인다는 것입니다.
물론 점검 중에 기존 스킨에서 사용되는 자바스크립트를 그대로 사용하는 경우도 있었고, 스킨을 변경하면서 특정 문자가 정말 작아져서 제가 봐도 모바일 편의성에 문제가 있는 경우가 있었습니다. 그런 경우는 직접 수정해주면 됩니다.
그런데 문제는 실제 모바일에서 봐도 전혀 문제가 없는데 '페이지가 모바일 친화적이지 않음'이라고 표시되는 경우인데 이 경우에 우리가 무언가를 할 수 없기 때문에 다시 재점검 요청을 누르고 기다릴 수밖에 없습니다.
다행스러운 것은 이 상태로 두어도 광고 게재가 안되거나 하지는 않습니다. 하지만 구글이 모바일 편의성에 문제가 있다고 하면 그것을 구글 검색 순위에 직접 영향을 주는 문제이기 때문에 해결은 되어야 할 문제입니다.
실제 제 글 중에 구글에서 검색되는 글이 있는데 검색 결과에 제 페이지가 모바일 편의성이 없는 페이지다라는 비슷한 문구가 씌여 있는 것을 보고 깜짝 놀랐습니다.
저야 구글 검색결과에 표시가 될 만큼 글들이 검색이 되지는 않지만 구글에 노출이 많이 되는 블로그라면 타격이 있을 수 있겠다 싶었습니다.
그래서 저는 이렇게 했습니다.
스킨이 바뀌어서 뭔가 구조가 바뀔 수 있으니 기존에 글 작성한 것을 보고 기존 스킨에서만 사용되는 자바 스크립트 명령어들을 모조리 없애고 다시 작성하는 것처럼 했습니다. 내용은 동일해도 텍트스를 기반으로 다시 수정하는 것이지요.
예를 들어 친효스킨을 쓰다가 다른 스킨으로 바꾸면 기존에 친효스킨의 친효애드온을 사용한 경우 동작하지 않습니다.
친효 애드온은 https://rgy0409.tistory.com/3889 에서 보듯이 rgy로 시작하는 클래스들이 친효님이 만든 애드온입니다. 친효스킨에서만 동작을 하는 것이지요.
때문에 코드를 모두 수정해주어야 합니다. 친효애드온을 제거하고, 제거하면 기존의 효과는 사용할 수 없다는 점을 고려해야 하지요. 그래서 스킨 변경은 생각보다 큰 작업이 될 수 있다는 점을 알아두어야 합니다.
최소한 기본적으로 백업은 해두어야 합니다. 스킨 변경 시 유의할 사항은 아래의 글에서 참고할 수 있습니다.
티스토리 스킨변경 할 때 주의해야 할 점 2가지
구글, 네이버 검색 등록 내용 추가 구글 서치 콘솔에 등록한 메타정보 google-site-verification 정보 등록과 네이버 서치 어드바이저 웹마스터 도구에 등록한 블로그 메타정보를 백업받아 새로운 스킨
finjoy.net
그리고 클릭할 요소가 가깝다는 오류는 주로 tag가 포함된 디렉터리에서 문제가 됩니다. 이 경우 혹시 tag에 빈칸이 있거나 하지는 않는지 확인해보고, 너무 긴 tag는 글을 찾아 삭제했습니다.
이런 오류는 스킨 변경에 따른 구조변경, 그리고 광고의 크기나 정렬 등의 문제로도 발생할 수 있습니다. 광고 중에도 이미지와 글자가 붙어 있을 수도 있고, 글자가 작은 경우도 있는데 스킨 변경으로 이런 현상이 제대로 반응형으로 최적화되지 못할 수도 있다고 봅니다. 그러므로 그냥 시간이 지나면 해결되는 경우도 있다고 보면 됩니다.
요약하자면 아래와 같습니다.
- 스킨 변경 시 위와 같은 문제가 일시적으로 발생할 수 있다는 점을 이해하고 스킨변경시 백업을 잘 받아 둡니다.
- 구글 서치콘솔 문제 발견 시 스마트폰으로 접속해서 실제 문제인지 확인합니다.
- 문제가 있다면 하나하나 수정합니다. 전체를 다 수정할 수 없는 경우 조회 수많은 것부터 수정하는 것이 요령
- 문제가 없다면 재검토 신청을 하고 그냥 기다립니다.
모두 잘 해결되었으면 합니다.