728x170
갑자기 메일로 페이지가 모바일 친화적이지 않음 이라는 안내를 받는 일이 종종 있습니다. 그러면 혹시 내가 애드센스 광고를 잘못 넣었거나 중요한 실수를 했나 걱정이 들기도 합니다.
1. '페이지가 모바일 친화적이지 않음' 오류가 발생하는 이유
구글은 크롤링되어 등록된 웹페이지가 모바일 친화적인지 검토를 합니다. 아무래도 이전과는 달리 요즘은 모바일에서 정보를 검색하는 경향이 많기 때문에, 이용자들의 편의를 위해 모바일 친화적인 웹페이지를 선호하는 것입니다.
즉 구글에서는 모바일 친화적이지 않은 페이지에 호의적일 수 없으며, 이러한 문제가 지속적으로 나타나면 구글 검색 순위에 악영향을 줄 수밖에 없는 것입니다.
따라서 친절하게도 구글은 이러한 사항을 웹페이지 소유자에게 통지하고 시정할 기회를 주는 것입니다. 이는 이용자 뿐만 아니라 웹페이지 소유자 또는 운영자에게도 도움이 되는 것입니다.
2. 모바일 친화성 오류가 뜨는 이유
이러한 오류 메세지가 뜨는 이유에 대해서 구글 고객센터에서는 다음과 같이 설명하고 있습니다.
- 클릭할 수 있는 요소가 서로 너무 가까움
- 콘텐츠 폭이 화면 폭보다 넓음
- 텍스트가 너무 작아 읽을 수 없음
- 표시 영역이 '기기 폭'으로 설정되어 있지 않음
- 표시 영역이 설정되지 않음호환되지 않는 플러그인 사용
이 중 실질적으로 자주 발생하는 오류는 ① 클릭할 수 있는 요소가 서로 너무 가까움, ② 콘텐츠 폭이 화면 폭보다 넓음 2가지 입니다.
2.1. 클릭할 수 있는 요소가 서로 너무 가까움
이 오류는 말 그대로 페이지 내 클릭할 수 있는 요소들이 너무 가까워서 이용자들이 실수로 다른 콘텐츠들을 누를 수 있는 가능성이 높다는 것입니다.
예를들어 사진과 글 내용 사이에 간격이 너무 좁거나, 링크와 또 다른 링크 사이가 너무 좁거나, 광고와 글 사이가 너무 좁거나 하는 등 클릭할 수 있는 것들 사이의 간격이 적당하지 않은 경우를 의미하는 것입니다.
저의 경우는 내부링크를 걸어두었던 것들의 간격이 너무 좁아서 이런 오류가 나왔던 것 같습니다.
가끔 티스토리 관련 포스팅을 보면 일부러 애드센스 광고와 글 사이를 좁게 하여 클릭을 유도해야 한다는 취지로 이야기 하는 경우가 있는데, 그러면 클릭할 수 있는 요소가 너무 가깝다는 오류 메세지가 나오거나 광고게제 제한이 나올 수도 있으니 주의 해야 합니다.
2.2. 콘텐츠 폭이 화면 폭보다 넓음
모바일 환경에서는 화면 폭이 좁기 때문에 횡으로 스크롤을 하여 콘텐츠를 봐야하는 환경은 이용자들에게 불편함을 줄 뿐만 아니라 구글에서도 좋아하지 않습니다.
때문에 사진크기가 너무 큰 것들은 구글이 선호하지 않고 적당한 크기로 변환해야 합니다. 일반적으로 구글이 선호한다고 알려진 사진 크기는 750px 이하 입니다. 따라서 사진을 업로드 하기 전에 사진 크기를 확인하고, 사진 크기가 너무 큰 경우에는 사진 편집 프로그램을 사용하여 750px 이하로 수정해야 합니다.
또한, 표도 가로로 스크롤 하는 환경으로 인식될 수 있기 때문에 가급적 넓은 너비의 표를 사용하지 않는 것이 좋습니다.
3. 오류 해결방법
3.1 클릭할 수 있는 요소가 서로 너무 가까움 오류 해결방법
클릭할 수 있는 요소가 서로 너무 가까움 오류를 해결하려면 사진, 글, 링크, 광고 등의 요소들을 너무가깝게 두지 말고 한칸씩 띄어쓰기를 해야 합니다.
그리고 보통 글 밑에는 태그들이 있는데 태그들의 간격이 너무 좁은 경우에도 이 오류가 발생하기도 합니다. 태그 간격문제는 CSS편집을 통해 해결 할 수 있습니다.
티스토리 관리페이지에서 스킨편집-CSS편집을 들어가시고 Ctrl + F를 눌러 Line-height를 입력하여 찾습니다. Line-height는 줄 간격을 의미하기 때문에 이 숫자를 늘려 주도록 합니다.
아마도 여러 군데에서 Line-height가 나올텐데 Tag란에 있는 것을 찾으시면 됩니다. 그리고 그 옆의 숫자를 늘려주면 해결이 됩니다.
3.2 콘텐츠 폭이 화면 폭보다 넓음 오류 해결방법
콘텐츠 폭이 화면 폭보다 넓음 오류를 해결하려면, 사진크기를 750px 이하로 수정하여 업로드 하거나, 너무 가로 크기가 큰 표를 넣지 않는 것입니다. 표는 보통 모바일에서 자동으로 크기가 조절되기는 하는데 가끔 횡으로 스크롤하여 볼 수 있는 것이 나타나기도 하기 때문에 글을 발행하기 전에 미리보기를 하여 체크하는 것이 필요합니다.
마지막으로는 구글 서치콘솔에서 실시간 테스트를 하는 것입니다. 의외로 실제로는 아무런 문제가 없는데도 오류 메세지가 오는 경우도 있습니다. 때문에 실시간 테스트를 해보면 의외로 모바일 친화적이라는 결과가 나오는 경우도 많이 있습니다.
그리드형
댓글