웹/SEO

구글 서치콘솔 모바일 사용 편의성 "콘텐츠 폭이 화면 폭보다 넓음" 해결

개발폐인 2023. 8. 31. 11:16

해당 문제를 해결하기위해 구글에서 검색해보니,

meta viewport 를 수정하여 처리한다고 되어 있어 이를 적용하였으나, 문제가 해결되지 않았습니다.

 

문제가 된 URL들이 하루가 지날수록 늘어가고 있는 상황이었고, 개별 URL을 검사하면 문제가 없었다는것.

 

한참 이와 관련된 문서들을 찾던중에,

모바일 사용 편의성의 경우 구글이 Nexus 5 기기를  에물레이션하여 렌더링 테스트 한다고 적혀 있는걸 발견하였습니다.

 

Nexus 5의 해상도는 360x640 임으로 high dpi를 고려한다면, 해당 장비의 최적 이미지 width는 720입니다.

 

페이지에 고해상도 이미지를 표시하기 위해 이미지의 넓이를 960px 또는 1024px 로 노출하고 있었습니다.

이미지 사이즈 때문에 발생했을것으로 생각하여, 먼저 든 생각은 이미지 사이즈를 줄이는거였습니다.

그러나, 아이폰 max 장비의 경우 해상도가 낮게 표시될수있어서, 이미지 사이즈를 줄이지 않고, lazy loading 을 추가하였습니다.

<img src="xxxx" loading="lazy"> 

 

결론은 해결되었습니다.

 

동일한 문제가 발생하는 경우, 이미지 최대 넓이를 720px로 줄이거나, lazy loading을 추가하는것으로 해결이 가능하리라 봅니다.