티스토리 블로그를 운영하면서 보면 구글 서치 콘솔을 접해보신 분들이 많을 거라 생각합니다. 가끔 구글 서치 콘솔에서 '클릭할 수 있는 요소가 서로 너무 가까움', '콘텐츠 폭이 화면 폭보다 넓음', '텍스트가 너무 작아 읽을 수 없음' 등의 오류로 메일이 오거나 구글 서치 콘솔에 오류가 등장하기도 합니다. 이 부분을 해결하기 위해서는 HTML 또는 CSS를 건드려야 하기에 처음 시작하거나 컴퓨터 언어에 대해 잘 모르시는 분들이 어려움을 겪을 수도 있겠다고 생각이 드네요.
보통 이러한 증상은 스킨을 변경하거나 수정했을때 나타나는 오류입니다. 스킨 제작자가 완성도가 떨어지는 스킨을 공유하진 않았을 테니까요. 이 증상은 모바일 사용 편의성 탭에서 나타나는 오류이기에 PC버전으로 봐서는 해결책을 찾을 수 없습니다. 저 같은 경우에는 공유되어 있던 스킨을 새로 적용하고 나니 이 같은 오류가 여러 개 등장했습니다. 하지만 조금만 다듬는다면 원하는 디자인이 나올 수 있어 사용할 수밖에 없는 상황이었습니다.
'텍스트가 너무 작아 읽을 수 없음' 오류는 페이지의 글꼴 크기(font-size)가 모바일 검색에 비해 너무 작다는 것을 말합니다. 방문자의 경우 내 사이트의 글자 크기가 너무 작기때문에 내용을 보려면 확대해서 봐야 한다는 말입니다. 내 눈에는 잘 보이지만 객관적으로 봤을 때 글자가 대체적으로 작다는 말이기 때문에 수정해줘야겠죠. 이 부분은 즉시 발견이 된다면 'F12'를 눌러 개발자 도구에 진입한 뒤 문제를 해결할 수 있지만 발견할 수 없다면 CSS에서 'font-size'를 검색해 코드를 하나하나 찾는 방법도 있습니다. body 전문의 글자 크기는 16px 이상을 권장합니다.
'클릭할 수 있는 요소가 서로 너무 가까움' 오류는 URL 버튼이 서로 너무 인접해 있다는 것을 말합니다. 이러한 증상이 나타나면 사용자는 원하지 않은 경로로 이동될 수 있어 부적합한 요소가 됩니다. 모바일 사용 호환 테스트를 하고 싶다면 크롬 웹스토어에서 'Mobile/Responsive Web Design Tester'이라는 플러그인을 설치해 사용해보세요. 플러그인이기에 사용 방법은 아주 쉽습니다. 모든 기기에서 오류가 발생하는지 안하는지 확인해야 합니다. URL 요소로 인식되는 것들은 버튼, 링크, 첨부파일, 이미지, 구글 애드센스 광고 등이 있습니다.
'콘텐츠 폭이 화면 폭보다 넓음' 오류는 내 글이 모바일 기기 화면 영역 밖으로 나가있다는 말입니다. 이 오류는 메타 태그로 대부분 해결이 가능합니다. [블로그 관리-스킨 편집-html 편집]에서 아래와 비슷한 메타태그가 있는지 확인하고 없다면 아래 코드를 추가해주시면 됩니다. 이 코드는 브라우저 크기를 사용자가 사용하는 기기와 폭을 일치하도록 설정하는 것입니다.
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
이 외 표(<table>) 서식의 폭(width)또는 이미지(<img>)의 크기를 100%로 설정해주는 방법도 있습니다. 구버전 에디터의 경우 표 재대로 호환이 안되어 잘려나가는 현상때문에 수작업으로 수정해줘야만 합니다.
모든 작업 후에는 유효성 검사를 통해 정상적으로 수정되었는지 확인해주면 됩니다. 이 검사 과정은 생각보다 오래 걸리고 심각한 오류는 아니지만 좋은 블로그를 운영하기 위해서는 수정해줘야만 하는 오류이기 때문에 천천히 인내심을 갖고 수정해나가면 됩니다. 구글은 UX 품질이 좋은 사이트를 선호하기 때문에 서치 콘솔에서 이런 문제가 발생하면 빠르게 해결해주어야 합니다. 이러한 오류는 검색 순위에도 영향을 미친 다고 하니 품질 좋은 사이트를 운영하기 위해서는 이 문제를 빨리 해결해주는 것도 좋지만 좋은 스킨을 이용하는 것이 더 좋습니다. 역시 애매한 스킨보다는 기본 스킨이 더 좋을 듯합니다.