티스토리를 운영하다 보면 서치 콘솔을 설치할 때가 옵니다. 서치 콘솔을 설치할 필요성이 느낀다면 그대 깔아 두시고 활용하시는 분들 많으신데요. 서치 콘솔을 설치하고 나서 자주 마주 서게 되는 오류 문제가 있습니다.
그것은 바로 "클릭할 수 있는 요소가 서로 너무 가까움", "텍스트가 너무 작아 읽을 수 없음", 콘텐츠 폭이 화면 폭보다 넓음" 등 다양한 오류로 메일이 오거나 구글 서치 콘솔에 오류가 뜨므로 처음에는 오류를 풀기 위해 여기저기 손대고 합니다. 오늘은 서치 콘솔 오류에 대한 "클릭할 수 있는 요소가 서로 너무 가까움"의 해결방법을 알아보려고 합니다.
서치 콘솔 오류 종류와 메시지 확인
티스토리 블로그를 운영하려면 다음은 물론, 구글, 줌 등 다양한 sns에 노출을 목표로 서치 콘솔을 설치하고 내 티스토리 블로그의 포스팅을 구글에서 긁어 갈 수 있도록 내 사이트를 등록합니다.
그런데 예기치 않게 내 블로그에서 다양한 오류의 메시지가 구글 메일이나 서치 콘솔에 떠서 당황할 수 있는데요.
안 고치면 품질 좋은 사이트를 운영하기 위한 티스토리 블로그 검색순위에도 영향을 미치고 특히 구글에서 UX (사용자 경험(使用者經驗, User Experience 유저 익스피리언스, 간단히 UX)은 사용자가 어떤 시스템, 제품, 서비스를 직, 간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험을 말한다) 품질이 좋은 사이트를 선호 하기에 꼭 고치고 넘어가면 좋겠죠.
서치 콘솔에서 색인 생성 범위에 보면 (오류, 유효(경고 있음), 유효, 제외됨,)이 있는데 경고표시가 뜨면 바로 해결해 주는 것이 좋습니다.
그렇다고 다 해결해주어야 되는 것은 아닙니다.
혹시 가다 구글 로봇이 잘 못 알고 알림 차원에서 보내는 것도 있으니 내 블로그에 이상이 없는데 메일이나 경고가 뜬다면 며칠 기다리면 풀릴 수 있을 것입니다.
그러나 서치 콘솔에서 경고 준 사이트에 들어가 정말 문제가 있다면 수정을 해야겠죠.
이 외로 알고 나면 크게 문제 될 것 없이 수정을 할 수 있으니 너무 겁먹지 마시고 따라와 주시면 해결될 것입니다.
어느 날 갑자기 구글 메일에 서치 콘솔의 경고 메시지가 날아옵니다.
https://000000.tistory.com/ 소유자님께,
Search Console이 사이트에서 1개의 색인 생성 범위 문제를 발견했습니다.
주요 경고
경고는 개선을 위한 제안사항입니다. 일부 경고는 검색 결과 노출에 영향을 미칠 수 있으며, 나중에 오류로 격상될 가능성이 있는 경고도 있습니다. 사이트에서 발견된 경고는 다음과 같습니다.
가능한 경우 문제를 해결하여 사이트의 사용자 환경과 Google 검색 노출을 최적화하시기 바랍니다.
이런 경우에는 간혹 구글 로봇이 잘못 판단하여 혹시 모르니 알아보라는 경고로 보내는 것이니 크게 신경 쓰시지 않아도 되는 메시지이며 며칠 지나면 풀리게 되더라고요.
그런데 요런 메시지가 뜨면 바로 확인해 보고 이상이 있으면 해결해 주어야 google에서 사이트를 긁어가 노출할 수 있게 되므로 빠른 조치가 필요하겠죠.
https://0000000.tistory.com/ 소유자님께,
Search Console이 사이트에서 2개의 모바일 사용 편의성 문제를 발견했습니다.
주요 문제
사이트에서 발견된 문제는 다음과 같습니다.
가능한 경우 문제를 해결하여 사이트의 사용자 환경과 Google 검색 노출을 최적화하시기 바랍니다.
"콘텐츠 폭이 화면 폭보다 넓음" 해결 방법
이 오류는 내 글이 모바일 기기 화면 밖으로 나가 있다는 말이기에 메타태그로 대부분 해결이 가능합니다.
[블로그 관리] → [스킨 편집] → HTML 편집]에서 아래와 비슷한 메타태그가 있는지 확인하고 없으면 코드를 추가해 주시면 됩니다.
이 코드는 브라우저 크기를 사용자가 사용하는 기기와 폭을 일치하도록 설정하는 코드이기에 없으면 hed사이에 알아볼 수 있도록 추가해주세요.
<meta name="viewport" comtent="width=device-width, height=device-height, initial-scale=1">
"클릭할 수 있는 요소가 서로 너무 가까움" 오류 해결방법
클릭할 수 있는 요소가 서로 너무 가깝다고 하는 것은 버튼과 탐색 링크 터치 요소가 서로 너무 가까이에 있어 모바일 사용자가 원하는 요소를 손가락으로 탭 하려고 할 대 바로 옆에 있는 요소도 함께 탭 하게 되므로 원치 않은 사이트의 URL이 표시되어 오류를 수정하거나 탐색 링크의 크기와 공간을 모바일 친화적 이 도록 올바르게 지정을 해줘야 됨을 강조하고 있습니다.
그러면 우선 태그 간격을 뛰워줘야겠죠.
태그 간격 뛰우기
태그 간격 뛰우기
- 본인의 티스토리 블로그에 들어가서 톱 이 바퀴 모양 클릭 - [블로그 관리] → [스킨 편집] → [html 편집] → css를 눌러줍니다.
- 검색 단축키 ctrl+f를 치면 검색할 수 있는 칸이 뜨는데 거기에 (line-height)를 검색하여 찾아 줍니다. 처음에는 line-height: 1.25; 로 되어있는 것을 확인할 수 있습니다.
- line-height;1.25를 line-height: 2.5; 로 바꿔 주고 적용 누르면 됩니다. (2에서 2.5 정도로 바꿔주면 됨)
다시 서치 콘솔로 들어가서 확인을 해보아야 합니다. 오류를 클릭하여 유효성 검사 상태가 시작됨으로 바꿔주세요.
그리고 세부 정보를 보면 접수 중이라는 것을 확인할 수 있고 블로그 사이트의 모바일 사용 편의성 무제가 해결되었는지 확인 중입니다"의 메시지가 날아와 좀 기다리면 아래와 같이 해결된 메일이 날아옵니다.
https://0000000.tistory.com/ 소유자님께,
https://000000.tistory.com/ 사이트의 문제 모바일 사용 편의 성가 해결된 것으로 확인되었습니다. 확인된 문제는 '콘텐츠 폭이 화면 폭보다 넓음'입니다.
사이트에서 페이지 1개의 문제가 해결된 것으로 확인되었습니다.
확인 진행 상황을 자세히 보고 모바일 사용 편의성과(와) 관련하여 해결할 문제가 더 있는지 알아보려면 다음 링크를 클릭하시기 바랍니다.
이렇게 해결 메시지가 google에서 오네요.
될수록이면 스킨을 건드리지 않는 것이 좋습니다. 그러나 블린이 초보가 맞닥뜨리게 될 곤란은 수없이 많이 나타나게 되기에 스킨을 만지지 않을 수 없는데요.
항상 만질 때에는 잘 알아보고 고치는 것이 좋을 듯싶어집니다.
저 또한 처음 스킨을 잘못 건드려 오류가 났는데 어디서 어떻게 오류가 났는지 찾지 못해 애를 먹은 적이 한두 번이 아니었습니다.
그래도 좋은 사람들이 있기에 알려주어 이렇게 조금이나마 성장하게 되었습니다.
비록 큰 정보는 아니어도 시행착오를 적게 겪을 수 있도록 제가 할 수 있는 것을 공유해 보려 합니다.
보통 처음 시작하면은 티스토리에서 제공하는 기본 스킨을 쓰시는 게 더 안전한 길이라 봅니다.
다른 스킨은 복잡하여 오류에 많이 취약할 수 있으니 잘 모르겠다 싶으면 기본 스킨을 쓰시는 것을 추천합니다.
댓글