콘텐츠 폭이 화면 폭보다 넓음, 문제 해결 방법

'클릭할 수 있는 요소가 서로 너무 가까움, 콘텐츠 폭이 화면 폭보다 넓음' 등 Google Search Console에서 URL 검사 시 '모바일 사용 편의성' 문제로 받는 알림 2가지가 있는데, <meta> 태그 수정을 통한 문제 해결 방법을 알아봅니다. 

1. 모바일 편의성 문제 알림
2. 메타 태그 "viewport" 수정으로 문제 해결하기
3. 오류 해결 확인

 

 

1. 모바일 편의성 문제 알림 메시지

작성한 글이 Google 색인 등록엔 문제가 없는지, 구글 서치 콘솔을 통해 URL 검사 진행. ▼

그림1. 구글서치콘솔 URL 검사 결과 화면

 

 

'URL이 Google에 등록되어 있지만 문제가 있음', 모바일에서 페이지를 사용할 수 없는 2가지 이유를 보여줍니다. ① 클릭할 수 있는 요소가 서로 너무 가까움, ② 콘텐츠 폭이 화면 폭보다 넓음. ▼

그림2. 모바일 사용 편의성 문제 발견 화면

'사진 크기'나 '띄어쓰기' 등 문제가 발견되지 않은 다른 글들과의 차이를 몰라서 당황했지만, 해결 방법 찾음! 

 

 

2. HTML <meta> 태그 "viewport" 수정으로 문제 해결하기

블로그에 사용 중인 '북클럽 스킨'의 경우, HTML 코드를 보면 기본적으로 아래와 같은 <meta> 태그가 있습니다. ▼

그림3. HTML 메타 태그 "viewport" 기본 화면

 

기본 설정되어 있는 <meta> 태그를, ▼

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">

 

→ 아래와 같이 수정(maximum-scale, minimum-scale 속성 삭제)해 줍니다. ▼

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

 

 

3. 오류 해결 결과 확인하기

메타 태그 수정 후 URL 검사를 실시, 모바일 사용 편의성 문제가 해결. ▼

그림4. 모바일 편의성 오류 해결된 화면

 

 

※ 저의 경우, CSS 편집에서 /* Type Selector Reset */ body의 line-height를 수정(기본 1.25 → 2.5)하는 방법으로는 해결되지 않았습니다. ▼

그림5. CSS 편집 화면

구글링을 해보니 line-height 수정으로 해결된 사람들도 있는 것 같은데, 어떤 방법이든 '페이지 색인 생성'과 '모바일 사용 편의성' 부분에 문제가 없도록 하는 것이 중요! 

 

 

대표 썸네일 사진