초짜배기입니다. 오늘은 또 다시 Search Console 이야기를 하게 되겠습니다. 이유는 제가 다음과 같은 메일을 Google로 부터 받았기 때문이죠
흐음.. 또 뭔가 제가 모르고 있던 것이 문제를 일으키고 있는 것 같습니다.다행히 둘다 무슨 뜻인지 이해는 갑니다. 단지 두번째 "콘텐츠 폭이 화면 폭보다 넓음" 은 말은 이해가 가지만 이런 현상이 벌어졌다는게 이해가 안되긴 합니다. 아무튼 어느 페이지에서 문제를 일으키나 확인하기 위해 위에 파란 "모바일 사용 편의성 문제 해결하기" 버튼을 누릅니다.
Search Console 화면으로 넘어오는군요. 모바일 사용 편의성에서 오류가 하나, 문제가 두개라고 뜨는 것이 확인됩니다.
화면을 아래로 내리면 위에서 처럼 오류 두개가 상세 정보에 남아있습니다. 메일에서 나왔던대로 클릭할 수 있는 요소가 너무 가까움 하나와 콘텐츠 폭이 화면 폭보다 넓음 하나가 오류로써 기록되어 있습니다. 전 글 쓰기 전에 이미 처리를 하고 글을 쓰다보니 "유효성검사" 가 시작됨으로 뜨네요. 일단 클릭할 수 있는 요소가 서로 너무 가까움을 클릭합니다.
이렇게 하나의 페이지에서 문제를 일으키고 있음이 확인됩니다. 이상한건 전 URL에 숫자를 쓰지 않습니다. 하지만 티스토리가 문자로 URL을 쓰는 사용자의 페이지 일지라도 종종 숫자로 처리한다는건 알고 있었기에 크게 놀라진 않습니다 (포스팅을 트위터로 광고하다 보면 문자 주소페이지가 숫자주소 페이지로 처리됨을 볼 수 있으십니다)
URL을 클릭합니다.
전 이미 이 과정을 거친 뒤라 이 화면이 뜨는데 원래는 새로 뜬 화면 우측 subwindow에 URL 검사하기 버튼이 뜹니다. 그 버튼을 누르면 새로운 윈도우가 뜨고 URL 을 검사하는데요 웃긴건 그 검사에서는 저 페이지가 모바일 친화적인 페이지로 아무 문제가 없다고 뜬다는 점 입니다. 결국에 또 무슨소릴 하는건지 모르는 상황에 처하게 되었는데요, 그래도 이번엔 말이 이해가 되니 그에 합당한 조치를 취할 수 있습니다. 화면 내에서 두 개이든 몇 개이든 개체가 너무 가까이 붙어있어서 문제인 것이니 그 간격을 벌려주면 될 일입니다. 이 조치는 블로그 스킨 옵션에서 취할 수 있습니다.
블로그로 돌아갑니다. 블로그 관리자 모드에서 화면 왼쪽에 위치하는 스킨 편집을 클릭합니다.
화면 우상단의 html편집을 클릭합니다.
다시 화면 우상단의 CSS를 클릭합니다
위에 노란색 칠해놓은 line-height가 기본 1.25로 설정이 되어 있으실 겁니다. 스킨에 따라 차이가 있을수 있겠네요. 제가 쓰고있는 스킨은 Whatever 스킨입니다. line-height값을 기본값의 두배로 설정합니다.
화면 우상단 적용버튼이 검정색으로 변해있을 겁니다. 클릭합니다. 적용버튼이 하얀색으로 바뀝니다. 이것으로 워드파일로 치면 줄간격을 두배로 늘려 페이지 안에있는 개체들끼리의 거리를 늘려줍니다. 사진이 들어가있는 페이지가 많은데 한 페이지만 이렇게 뜬거 보면 수준이 심각한 수준은 아닌것 같고 줄간격 두배 정도면 해결을 해줄 수 있을 것 같아 이렇게만 처치 해줍니다. Search Console로 돌아갑니다. 큰일났네요 이 다음 화면이 기억이 나질 않습니다 ^^; 이래서 뭘 할때는 미리미리 스샷을 남겨둬야 하는건데말이죠.. 아무튼 제 기억이 맞다면
노란 체크 셋중에 한곳이었던 것으로 기억합니다. 방금 블로그에서 한 작업의 유효성을 테스트 해달라고 신청하는 버튼이 있습니다. 그 버튼을 누르면 처치 완료입니다.
이것으로 "클릭할 수 있는 요소가 서로 너무 가까움"은 해결이 될 것이라 생각합니다만 "콘텐츠 폭이 화면 폭보다 넓음"은 모르겠습니다. 아니, 해결이 안되었겠지요. 다만 URL 검사를 하면 모바일 친화적이라고 자꾸 뜨니 별로 무슨 조치를 취할 필요성을 못느낍니다. 그러다 블로그를 이리 저리 둘러보는데 이 버튼을 발견합니다.
전 이거 꺼놓고 썼었거든요
이렇게 말입니다. 애초에 문제가 발생하는게 이해가 안되는 부분이었습니다. "콘텐츠 폭이 화면 폭보다 넓음"이란건 모바일로 볼때 어떤 컨텐츠가 모바일 화면에 적합하게 사이즈를 줄이지 않는단 뜻으로 밖엔 생각되지 않습니다. 그렇다면 어쩌면 이 기능이 문제를 해결을 해 줄수 있지 않을까 싶습니다. 설정을 "사용합니다"로 바꾸고 저장을 합니다. 그리고 Search Console로 돌아가서 "콘텐츠 폭이 화면 폭보다 넓음'도 유효성 검사를 찍어줍니다.
작업을 다 해놓고 글을 쓰는 바람에 여기저기 구멍이 숭숭 뚫린 포스팅이 되어버렸습니다. 작업상 말로 설명이 되는 부분이었던지라 그냥 넘어오긴 했지만 죄송한 마음을 감출 수는 없네요. 더 놓은 포스팅을 위해 노력하겠습니다. 감사합니다.
*여기서 부터는 후 편집 본 입니다. 위와 같은 작업을 수행하고 하루 뒤 Google에서 부터 메일을 받았습니다.
보시는 바와 같이 '콘텐츠 폭이 화면 폭보다 넓음'과 '클릭할 수 있는 요소가 서로 너무 가까움' 두가지 문제 모두 잘 해결되었다는 메세지였습니다. 이 같은 문제로 Google서 메일 받으시면 위와 같이 해결해주시면 될 것 같습니다. 감사합니다. 초짜배기였습니다.