페이지가 모바일 친화적이지 않음 에 대해서 알아보자

구글 색인 요청한 결과를 촥인하다가 다음과 같은 문구를 확인하게 되었다.

 

페이지가 모바일 친화적이지 않음

 

그래서 이것을 확인하기위해 방법을 찾아봤는데, 왜 이런 현상이 일어나는지, 그리고 어떻게 해야 해결할 수 있는지 살펴보기로 하자.

 

페이지가 모바일 친화적이지 않음은 왜 일어난 것일까?

 

요즘 정보를 찾는 사람들 중에서 컴퓨터를 이용하는 사람과 휴대폰을 사용하는 사람들의 비율을 찾아보자. 업무 시간에는 컴퓨터나 노트북을 많이 사용하겠지만, 보통 쉬은시간이나 개인적인 시간에는 모바일을 많이 이용할 것이다.

따라서 많은 이용자들이 모바일에 친화적인 페이지를 선호하게 되는데, 따라서 구글에서는 모바일에서 보기 좋은 글을 선호하는 것 같다. 이 부분을 블로거나 글을 올린 사람들에게 알려주는것이 바로 이러한 현상이 나타나게 된 원인으로 해석된다.

 

그렇다면 구체적으로 왜 뜨는지 확인해보자

 

아래의 내용은 구글 고객센터에서 설명한 부분이다. 한번 같이 살펴보자.

1. 클릴할 수 있는 요소가 너무 가깝다

 

2. 콘텐츠 폭이 화면의 폭 보다 넓다.

 

3. 텍스트가 작아서 읽기 힘들다.

 

4. 표시 영역이 '기기 폭'으로 되어있지 않다.

 

5. 표시 영역이 설정되지 않은 플러그인을 사용하고있다.

 

찾아보니 이 중에서 가장 빈번하게 확인되는 케이즈는, 1번과 2번으로 추려진다고 한다.

 

 

클릴할 수 있는 요소가 너무 가까운 경우에는 광고가 뜨는 것과 연관지어 생각해 볼 수 있다.
구글이 돈을 버는 가장 중요한 요소는 광고 수익이다. 물론 티스토리나 다른 블로그를 하는 이용자들도 이 부분때문에 시작했을 것이다.

 

그런데 광고가 어디에 들어가는가?
바로 글 사이에 들어간다.

 

그런데 글과 글 사이가 너무 붙어있다보니, 광고를 달수 있는 적절한 공간을 찾기 힘든 것이다.

 

그렇다면 콘텐츠 폭이 화면 폭보다 넓다는건 어떤 이야기일까?

 

우리가 휴대폰으로 정보를 찾을때를 생각해보자. 어떤 사이트에 들어갔는데 모바일에 최적화된 화면이 아니라, 인터넷 상에서 보던 페이지가 뜨면 보기 힘들지 않을까?

 

지금 내 글이 이와 비슷하게 보여지고있다고 생각하면 편할것이다.
그렇기 때문에 사진은 너무 큰 것을 사용하지 말고, 750px 이하로 유지하는 것이 좋다고 한다.

 

 

문제 해결 방법

원인을 알게 되었으니 해결할수 있는 방법이 나왔다.

첫번째로 클릭할 수 있는 요소가 너무 가까운 경우를 해결해보자.

간단하다. 우선은 한칸씩 띄어쯔기를 해주자. 그럼 간격이 벌어져서 첫번째 원인을 해결 할 수 있을 것이다.
만약 이것으로 부족하다면 티스토리 관리자 페이지에 들어가보자.

 

스킨편집에서 HTML편집에 들어가서 상단에 CSS편집에 들어간 다음에  Line-height를 찾아주면 된다. 눈으로 찾으면 힘드니까 Ctrl+F를 사용하도록 하자.

Line-hight는 줄 간격이기때문에 이 숫자를 늘려주면 된다고 한다. 여러개의  Line-height가 발견되는 경우에는, 이때는 Tag란의 것을 찾도록 하자.

 

 

두번째는 콘텐츠 폭의 화면이 넓다는 문제이다.

간단하다. 사진을 750px 이하로 고친다음에 올려보자. 그리고 만약에 표를 삽입해뒀다면 표의 넓이도 조정해 주는 것이 좋다.

하지만 찾아보니까 경우에 따라서는 아무 문제가 없는데도 문제가 있다고 하는 때가 있다고 하니까, 이 부분도 참고하시길 바란다.