본문 바로가기
생활/꿀팁

구글 서치콘솔 모바일 미지원 페이지 해결방법

by 개성공장 2023. 3. 30.
반응형

구글 검색에 노출되기 위해서는 구글 서치콘솔에 URL을 등록해야 합니다. 그래서 블로그를 운영하면 서치콘솔에 메타 태그를 이용하여 소유권을 인증하고, 새로 작성한 글의 URL에 대해 색인 생성 요청을 합니다.

 

그런데 티스토리 블로그에서 간혹 모바일 미지원 페이지 오류가 발생하는 경우가 있습니다. 해당 메시지를 쉽게 해석해보면, 모바일로 블로그를 확인했을 때 시각적으로 사용자 환경에 부적합하다는 메시지를 전달하는 것 같습니다. 멀쩡한 글이 갑자기 모바일 미지원 페이지가 된 것인데 그 이유와 해결방법을 알려드리겠습니다.

 

목차

     

     

    1. 서치콘솔 URL 조회

     

    먼저, Google Search Console에 접속합니다. 블로그의 게시글 중 하나의 URL을 입력하여 조회해봤습니다.

     

    URL 검사 화면

     

    그러면 위와 같이 해당 웹페이지의 URL 검사 결과가 조회됩니다. 초록색 체크표시와 함께 정상적으로 구글에 URL이 등록되어 있음을 확인할 수 있습니다.

     

    모바일 사용 편의성

     

    모바일 사용 편의성 항목을 살펴보더라도 문제가 없습니다. 모바일 지원 페이지로 정상입니다.

     

     

    2. 모바일 미지원 페이지

     

    이제 실제 URL 테스트를 통해 다시 검사를 진행합니다.

     

    모바일 미지원 페이지

     

    그랬더니 결과가 모바일 미지원 페이지로 나왔습니다. 사유로 "클릭할 수 있는 요소가 서로 너무 가까움", "콘텐츠 폭이 화면 폭보다 넓음"으로 나타났습니다.

     

    모바일 미지원 페이지 결과

     

    색인 항목에서는 "URL을 Google에 등록할 수 있지만 문제가 있음"이라고 표시가 되었네요.  왜 새롭게 테스트를 하니까 이런 결과가 나왔을까요?

     

     

     

    3. 해결방법

    3-1. 문제 원인

    모바일 미지원 페이지 오류의 근본적인 원인은 티스토리의 로딩 속도가 느리기 때문으로 보입니다.

     

    실제로 실시간 테스트를 통해 URL을 확인했을 때, 스크린샷이 종종 깨집니다. 실제 웹페이지의 모습과는 약간 다릅니다. 자바스크립트를 비롯한 웹페이지의 요소들을 로딩하는 속도가 느려서 그렇습니다. 그런데 이 속도가 어느 날은 빠르고, 어느 날은 느립니다. 서버에 걸리는 부하가 그때그떄 다르기 때문입니다.

     

    따라서, 대부분의 모바일 미지원 페이지 오류는 티스토리 서버의 속도가 특별히 느려지면 발생하므로 시간이 지나면 저절로 문제가 해결됩니다.

     

    그렇다고 오류가 계속 발생하는데 이걸 방치하기도 애매합니다. 이런 경우 웹페이지를 일부 로딩하지 못해도 모바일 미지원 페이지로 인식되지 않는 방법이 있습니다.

     

     

    3-2. 해결 방법

    어떻게 하면 웹페이지를 전부 로딩하지 않은 상태에서도 구글 검색로봇이 모바일 미지원 페이지가 아니라고 인식할까요? 일단 티스토리 스킨 편집으로 들어갑니다. HTML 코드를 보면 아래와 같은 항목이 있습니다. viewport로 검색하면 찾을 수 있습니다.

     

    HTML 코드

    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">

     

    위 코드를 간단하게 설명하면, 뷰포트 메타태그로 웹페이지의 표시 방법을 나타냅니다. 반응형 웹페이지에 접속하는 기기는 화면 크기가 제각각인데 웹페이지가 잘 보이도록 조정합니다. 각 항목의 의미는 아래와 같습니다.

     

    "user-scalable=no" : 사용자가 페이지를 확대하거나 축소할 수 없음
    "initial-scale=1.0" : 초기 확대/축소 배율을 1.0로 설정
    "maximum-scale=1.0" : 최대 배율을 1.0로 설정
    "minimum-scale=1.0" : 최소 배율을 1.0로 설정
    "width=device-width" : 뷰포트의 너비를 기기 화면의 너비와 동일하게 설정

     

    이 항목들을 아래와 같이 바꿔줍니다.

     

    변경된 HTML 코드

    <meta name="viewport" content="width=device-width, initial-scale=1" />

     

    뷰포트 속성 중에서 "width=device-width", "initial-scale=1.0" 이 2가지만 남기고 삭제합니다. 뷰포트의 확대, 축소를 제한하는 항목을 삭제한 것입니다. 이렇게 하면 웹페이지가 일부만 로드되더라도 사용자는 페이지를 확대, 축소하면서 글을 읽을 수 있으니 이전보다 접근성이 개선된 것이죠.

     

    다시 테스트한 결과

     

    다시 테스트를 해보면 정상적으로 모바일 지원 페이지로 나타납니다.

     

     

     

    ※ 티스토리 SEO 검색엔진 최적화 관련글

    "<H1> 요소가 2개 이상 발견되었습니다." 티스토리 블로그 SEO 문제해결 방법

     

    "<H1> 요소가 2개 이상 발견되었습니다." 티스토리 블로그 SEO 문제해결 방법

    티스토리는 카카오, 다음 소유의 서비스이므로 다음에서는 저품질에 걸리지 않는 이상 별도 노력 없이도 자동으로 글이 노출됩니다. 하지만 다음 검색만으로는 검색 유입량이 적어서 네이버나

    gaesung.tistory.com

    선택 안됨 티스토리 성능 개선, jQuery 사용하지 않는 자바스크립트 줄이기

     

    티스토리 성능 개선, jQuery 사용하지 않는 자바스크립트 줄이기

    PageSpeed Insights에서는 웹페이지 URL을 진단하고, 해당 웹문서의 성능을 개선할 수 있는 방법들을 제시합니다. 그중에서 사용하지 않는 자바스크립트 줄이기를 통해 티스토리 블로그의 성능을 개

    gaesung.tistory.com

    티스토리 검색엔진 최적화 100점 만드는 방법

     

    티스토리 검색엔진 최적화 100점 만드는 방법

    티스토리 블로그 웹페이지에 대한 성능 진단을 하면 다음과 같은 문제사항이 생깁니다. 검색엔진 최적화 항목에서 "링크를 크롤링할 수 없음" 오류입니다. 링크의 href 속성이 적절하지 않아 해

    gaesung.tistory.com

     

    반응형

    댓글