구글 서치 콘솔_모바일 사용 편의성 문제 해결하기! 콘텐츠 폭이 화면 폭보다 넓음, 클릭할 수 있는 요소가 서로 너무 가까움 케이스

안녕하세요!

 

이제 티스토리를 시작하고 애드센스 광고를 단 것도 꽤 시간이 흘렀는데, 아무래도 아직까지도 어떻게 운영해야 하는지 조금 어렵더라고요. 하루하루 배우는 느낌으로 하고 있기는 하지만, 여전히 어려운 것 같습니다.

 

처음엔 진짜 모르겠더니, 하나하나 찾아가면서 하면 그래도 조금씩 나아지는 느낌이 들긴 합니다. 구글 애드센스 광고를 달고 티스토리를 운영하다 보면, 계정에 메일이 올 때가 있습니다.

 

실적이 개선되거나, 문제가 있거나, 뭔가 애드센스와 관련한 새로운 정책이 시작되거나 하는 등등의 일이 있으면 메일을 보내줍니다. 근데 이번에는, 뭔가 문제가 있다는 메일을 받았습니다. 모바일 사용 편의성 문제 해결이 필요하다는 메일이었는데, 결국 해결하긴 했습니다.

 

해결 과정을 담은, "구글 서치 콘솔_모바일 사용 편의성 문제 해결하기! 콘텐츠 폭이 화면 폭보다 넓음, 클릭할 수 있는 요소가 서로 너무 가까움 케이스" 시작하겠습니다.

---

1. 구글 서치 콘솔, 모바일 사용 편의성 문제 해결하기

 

아래와 같은 메일이 왔는데, 모바일 사용 편의성 관련해서 어떤 점 때문에 문제가 있는 건지도 함께 설명을 해줬습니다. 첫 번째는 콘텐츠 폭이 화면 폭보다 넓음, 두 번째는 클릭할 수 있는 요소가 서로 너무 가까움이었습니다. 

모바일 사용 편의성 문제 해결, 구글 서치 콘솔 (메일 캡처)

저 파란색 버튼을 클릭하면, 아래와 같이 오류 유형이 나옵니다. 

모바일 사용 편의성 관련 오류 유형(캡처)

그리고 오류 유형에 해당하는 url이 나오는데, url은 https://hiwhinigogogo.tistory.com/53 저의 경우 이 글이 오류에 해당했습니다. 

넷플릭스 어쩌다 로맨스 결말 및 줄거리_사실은 '스스로를 사랑하는 것'이 해답

---

2. 콘텐츠 폭이 화면 폭보다 넓음, 이 케이스는?

 이 케이스는 보통 이미지가 너무 크거나, 아니면 표를 만들었는데 표에 내용이 너무 많이 들어가면서 칸을 넘겨버리는 경우에 발생한다고 합니다.

 

저는, 포스팅 내에 표를 만들지는 않아서, 이미지가 너무 큰 것 때문에 이런 메시지가 나오는 것 같다는 생각을 했습니다. 그래서, 이미지 크기를 더 작게 조절했습니다. 근데 신기한 것은, 유관으로 봤을 때는 사진 크기가 화면을 넘거나 하는 케이스는 아니었습니다. 근데 저런 메시지가 나와서 그냥 사진 크기를 조율했습니다.

---

3. 클릭할 수 있는 요소가 서로 너무 가까움

이건, 클릭할 수 있는 링크, 이미지, 글, 광고 등등이 너무 가깝게 붙어 있으면 나오는 메시지라고 합니다. 근데 저는 제 글을 봤을 때 그렇게 많이 붙어있다거나 한 느낌을 받지 못해서 어떻게 해결해야 되는지 답답하더라고요.

 

그나마 간격을 띄우기 위해서 글 간격도 엔터치면서 늘려주고, 거기에다가 이미지 밑에 설명을 달아서 약간씩 간격을 띄웠습니다.

클릭할 수 있는 요소의 간격 띄우기

지금 예시로 이미지 하나 가지고 왔는데, 지금 이미지 밑에 어쩌다 로맨스라는 설명이 들어가서 조금 간격이 넓어진 게 보이시나요?

---

4. 모바일 사용 편의성 문제 해결 결과

 

이런 조치가 끝난 후에는 구글 서치 콘솔에 오류가 있던 위 url을 입력해서, 페이지가 정상적으로 모바일 친화적인 상태가 되었는지 확인해보았습니다.

 

결과는!

페이지가 모바일 친화적임_조치 결과

뭔가 이렇게 결과가 나오니까 뿌듯하더라고요. 기뻤어요.

 

콘텐츠 폭이 화면 폭보다 넓음, 클릭할 수 있는 요소가 서로 너무 가까움 외에도 텍스트가 너무 작아 읽을 수 없음 오류가 있는 경우도 있다고 합니다. 이때는 글자 크기를 조정해주면 좋을 것 같습니다.

 

엄청 어려울 것 같았는데, 은근히 설명 하나하나 읽다보면 해결할 수 있는 부분이어서 오늘도 한 걸음 성장했습니다!

 

지금까지, "구글 서치 콘솔_모바일 사용 편의성 문제 해결, 콘텐츠 폭이 화면 폭보다 넓음, 클릭할 수 있는 요소가 서로 너무 가까움 케이스"였습니다.