(모두 틀렸다) 모바일 친화성 콘텐츠 폭이 화면 폭보다 넓음 클릭할 수 있는 요소가 서로 너무 가까움

'콘텐츠 폭이 화면 폭보다 넓음', '클릭할 수 있는 요소가 서로 너무 가까움' 때문에 환장하겠는가. 수많은 시도 끝에 알아낸 해결법이 여기에 있다. 더 이상 잘 못 된 정보에 좌절하지 말자.

 

대부분 블로그의 해법은 틀렸다

아래의 예는 대부분의 블로그에서 잘 못 설명된 내용들이다. 우연히 해결된 내용을 특정 액션에 기인한 것으로 착각하여 해결방법으로 올린 내용이 많다.

 

1. 메타 태그를 수정하는 해법

티스토리 스킨의 메타 태그를 여러 가지 방법으로 수정하여 안내한 내용들이 많다. 결론적으로 메타 태그는 수정하지 않는다. 

 

* 효과가 없는 예

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

 

 

2. CSS를 수정하는 해법

라인 간격을 조절하는 방법이지만 대부분의 경우 소용이 없다. 건드리지 말자.

 

* 잘못된 CSS 수정의 예

body의 line-height를 2.0 ~ 2.5로 수정

 

 

3. CSS를 수정하는 해법 2

아래 코드를 추가로 입력하는 것인데 효과를 보지 못했다. 

 

* 잘 안 되는 예

img {

  max-width: 100%;

  display: block;

}

.items {

  display: flex;

  justify-content: space-between;

}

.container {

  display: grid;

  grid-template-columns: 1fr 3fr;

}

 

해보니 되는 해법

티스토리는 전문적인 웹개발자들이 구글 애드센스를 고려하여 최적화한 코드다. 건드리지 말자.

기존 HTML이나 CSS를 건드리지 않는다. 

 

해보니 되는 방법은 이미지 사이즈를 조정하는 것이다. 

 

첫 번째는 글을 작성하는 중에 이미지를 삽입할 때 실제 사이즈 말고 이미지를 클릭하면 올라오는 메뉴에서 사이즈를 조정하는 것이다. 

이미지 사이즈를 조정한다.

위 사진에서처럼 이미지 사이즈를 400 정도에 맞춘다. 400 정도라고 말하는 이유는 여러 사이즈를 테스트해 본 결과 400 정도에서 안전하다고 판단했기 때문이다. 400 이상에서 되는 경우도 있다.

 

두 번째는 블로그 관리화면에서 왼쪽 상단에 블로그를 대표하는 이미지가 있는데, 사이즈를 300 정도에 맞춰서 올리는 것이다. 모바일에서는 블로그 대표이미지가 화면을 넘치는 경우가 있다. 이것을 막기 위해서 사이즈를 작게 만드는 것이다. 

 

블로그 대표 이미지 사이즈를 조정한다

 

위 방법으로 문제를 100% 해결할 수 있었다. 

게시물을 수정한 후에는 항상 모바일 친화성 테스트 사이트에서 링크를 입력하여 확인하는 습관을 들이자.

더욱 확실히 하기 위해서 문제의 게시물은 구글 서치 콘솔에서 URL검사를 재차 실행해 준다.

 

모바일 친화성 테스트 - Google Search Console

모바일 친화성 테스트 - Google Search Console