구글 서치콘솔에서 '모바일 사용 편의성 문제가 감지됨' 메시지가 나오는 문제가 발생하곤 합니다.
이제 막 티스토리로 블로그를 시작하시는 분들은 많이 당황스러우셨을 것 같은데요.
제가 바로 그랬습니다.
해당 메시지가 나오고 방치하는 경우, 검색 노출에 불이익이 발생할 수 있습니다.
제가 열심히 찾아보고 발견해 낸 해결책을 공유드립니다.
'모바일 사용 편의성 문제가 감지됨' 해결 방법
1. 왜 문제가 발생하는가?
2. 노출 메세지 분석
3. 해결방법 3가지
1. 왜 문제가 발생하는가?
모바일 사용 편의성 문제는 등록한 사이트가 모바일에서 잘 호환되지 않거나 작동되지 않는 상태라서 생기는 문제입니다.
즉, 구글 서치콘솔이 모바일 환경에서 당신의 페이지가 보기 불편하다고 알려주는 신호입니다.
하지만 웬만해서는 우리가 '클릭할 수 있는 요소가 서로 너무 가까움'이나 '콘텐츠 폭이 화면 폭보다 넓음'에 해당하는 설정 변경을 했을 리는 없습니다.
해당 메세지는 티스토리 블로그를 구글 서치콘솔이 인식할 때 무언가 어긋나서 이런 메시지가 자주 뜨는 것 같습니다.
따로 html을 건드리지 않은 저도 해당 문제에 직면하고, 이를 해결하기 위해 구글을 검색하면서 꽤나 많은 사람들이 갑작스럽게 해당 문제에 직면했다는 것을 깨달았습니다.
2. 노출 메세지 분석
2.1. 콘텐츠 폭이 화면 폭보다 넓음 해결책
블로그 포스트에 등재하는 이미지가 모바일 화면보다 큰 경우에 발생합니다.
이미지가 큰 경우 좌우로 움직이는 스크롤이 발생하여 불편을 야기할 수 있습니다.
이를 해결하기 위해서는 이미지 크기를 줄이거나 모바일 화면 폭에 맞춰주는 설정이 별도로 필요합니다.
자세한 내용은 하단을 참고 부탁드리겠습니다.
2.2. 클릭할 수 있는 요소가 서로 너무 가까움
이미지 앞뒤로 글자 및 콘텐츠가 바로 가까이 붙어 있는 경우에 발생합니다.
광고 배너와 같은 콘텐츠와 글씨를 가까이 배치하여 오클릭을 유도하는 경우를 방지하기 위한 것입니다.
사실 우리 눈에는 충분히 떨어져 있는 것 같지만, 구글 서치콘솔이 인식하기에는 그렇지 않은 것 같습니다.
이를 해결하기 위해서는 이미지 전후로 한두 줄씩 띄워주거나, 이미지 전후 간격을 별도로 설정해주셔야 합니다.
자세한 내용은 마찬가지로 하단을 참고 부탁드립니다.
3. 해결방법 3가지
3.1. '콘텐츠 폭이 화면 폭보다 넓음' 해결책 - html 수정
콘텐츠 폭이 화면 폭보다 넓음 문제를 해결하기 위해서, 이미지가 모바일 폭에 맞추어지도록 조정해야 합니다.
우선 티스토리 관리 > 스킨 편집 > html 에 들어갑니다.
ctrl + f를 클릭한 후 검색창에 "viewport"를 입력 후 검색을 하면 8번째 줄 쯤에서 검색될 것입니다.
(북클럽 스킨 html 미수정 기준)
해당 메타 태그를 아래와 같이 수정해줍니다.
<meta name="viewport" content= "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
해당 태그의 의미는, 너비는 기기 너비에 맞추고, 화면 확대 최대비율은 1배로만 설정하는 것이다.
3.2. '클릭할 수 있는 요소가 서로 너무 가까움' - CSS 수정
클릭할 수 있는 요소가 서로 너무 가까움 문제를 해결하기 위해서, 이미지 전후에 있는 간격을 충분히 만들어 주어야 합니다.
티스토리 관리 > 스킨 편집 > html 편집 > CSS에 들어가서 32번째 줄 즈음에 있는 line-heigt를 2로 수정해 주면 됩니다.
해당 메시지는 사진 위, 아래의 라인 높이를 설정하는 것으로 이미지와 포스트 글의 간격을 만들어주는 명령어입니다.
3.3. 마지막의 마지막 해결방법 - 이미지 사이즈 조정
위 해결책을 적용했음에도 저처럼 해결이 안 되는 경우가 있습니다.
그런 경우, 최후의 수단으로 등재하는 이미지를 500px이하로 올리는 것을 추천드립니다.
사실 고해상도 이미지 및 그림을 올려야 하는 경우도 있지만, 모바일 사용 편의성 문제가 지속적으로 발생하는 경우 모바일 기기에서는 구글 노출에 불이익이 있을 수 있습니다.
저 같은 경우 아무리 해도 모바일 사용 편의성 문제 해결이 쉽지 않아 이미지를 작게 올리는 방식으로 해결하였습니다.
위 1, 2번 해결방법을 시도해 보시고 최후의 방법으로 활용해 보시기 바랍니다.
댓글