워드프레스 모바일 최적화, 구글서치콘솔 오류 한방에 해결하기

워드프레스 모바일 최적화, 구글서치콘솔 오류 한방에 해결하기

워드프레스 사이트를 운영하다 보면 사이트 속도를 올리기 위해 각종 플러그인에서 모바일 최적화를 진행하라는 문구가 뜹니다.

모바일 최적화는 구글 SEO를 올리는데 매우 중요한 사이트 설정으로, 구글은 모바일 반응형 홈페이지를 짜임새있게 구성하는 것에 높은 점수를 주기 때문입니다. 따라서 홈페이지 만들기를 진행하다 내 사이트의 구글 검색 노출 방법을 모색하다보면 언젠가 모바일 최적화를 시도할 수 밖에 없습니다.

여러가지 플러그인 등을 사용하기도 하고 코드를 직접 수정해보기도 하며 모바일 최적화를 진행하게 되는데, 구글 서치 콘솔에서 URL 검사를 진행했을 때 다음과 같은 오류가 발생할 수 있습니다.

'모바일 사용편의성 문제가 발견되었습니다.'

모바일 사용 편의성 문제란 말 그대로 핸드폰을 이용해 홈페이지에 접속했을 때 사용에 불편감을 주는 문제가 나타났다는 뜻입니다. 화면이 작게 표시될 수도, 화면이 크게 표시될 수도, 홈페이지 로딩 속도가 너무 느리다거나, 접속이 아예 안되는 문제가 발생하는 듯, 문제의 원인은 아주 다양합니다.

구글서치콘솔 오류 해결법

내 사이트 속도를 올리는 방법은 이미지를 축소하거나 캐시 플러그인을 사용하는 방법이 있습니다. 그러나 몇몇 캐시 플러그인에서 충돌이나 심각한 오류가 발생되어, 사이트가 모바일에서 제대로 로딩되지 않는 문제가 발생하기도 합니다.

구글 서치콘솔에서 주로 나타나는 모바일 최적화 오류는 다음과 같습니다.

'콘텐츠 폭이 화면 폭보다 넓음.'

이 문제는 내 글에 삽입된 이미지나 동영상이 템플릿을 벗어나 발생하는 문제입니다.

주로 글에 설정된 특성 이미지가 모바일 화면 크기에 비해 지나치게 크게 보이는 문제가 생길 수 있습니다.

크게 세가지 해결 방법이 있습니다.

• 캐시 플러그인을 삭제하거나 비활성화 한다.
• 특성 이미지의 크기를 직접 조절한다.
• 이미지 요소의 크기를 화면 폭 이하로 제한하는 CSS를 추가한다.

이미지 요소의 크기를 줄이는 CSS 코드는 다음과 같습니다.

@media (max-width: 700px) {
.single .entry-content img {
max-width: 100%;
height: auto;
}

저는 최대 화면의 크기를 700px 이하로 설정했지만 자신의 홈페이지 화면 크기 테이블에 맞게 수치를 조정하시면 됩니다.

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

클릭할 수 있는 요소가 가까운 이유는 모바일에서 로딩되는 페이지에 무언가 화면 크기를 넘어가는 요소가 발생하여 화면을 작게 축소 스크롤 할 수 있는 상태가 되었기에 나타나는 문구입니다. 정상적으로 로딩된 모바일 친화적 페이지는 화면을 확대해볼 수는 있지만 축소할 수는 없어야 합니다.

이는 사람이 보기엔 별 상관이 없습니다. 사람은 화면 크기를 자기가 보기 편하게 확대, 축소를 자유롭게 조정하여 컨텐츠를 확인할 수 있으니까요. 하지만 구글 서치콘솔에서 출장나온 크롤링 봇이 보기에 이는 심각한 문제입니다. 구글봇이 크롤링하기 위해 페이지 전체를 확인하는데, 가장 작게 축소한 화면이 기준이 되기 때문입니다. 화면을 가장 작게 축소하게 되면 페이지에 포함된 링크나 버튼들의 크기가 너무 작게 표현되어 모바일에서 클릭하기 힘들어지지요.

사람은 화면을 쉽게 확대해 버튼 크기를 키우고 터치하는 것이 가능합니다. 그러나 구글 서치콘솔의 크롤링 봇은 이것을 심각한 모바일 친화성 오류 및 문제로 인식합니다. 그럼 우리는 구글이 원하는대로 페이지의 크기를 조절해주어야 합니다.

페이지가 모바일에서 축소되지 않도록 도와주는 워드프레스 모바일 최적화 CSS 코드는 다음과 같습니다.

html,
body{
width:100%;
overflow-x:hidden;
}

내용출처 - https://trond-soo.tistory.com/55

이는 내 사이트 내 바디의 오른쪽 여백 없애기에 도움이 되는 CSS입니다. 홈페이지 좌우 여백은 무슨 이유에서든 컨텐츠 테이블들의 좌우 간격 폭이 통일되지 않았기 때문에 발생합니다. 이 코드는 사이트 내 좌우 간격을 통일해 홈페이지의 오른쪽 여백이 생기는 것을 방지해줍니다.

CSS 코드를 붙여넣는 곳은 워드프레스 화면 좌측 탭의 외모 - 추가 CSS 항목으로 들어가면 사용자 정의 중 - 추가 CSS라는 문구가 뜨며 CSS 추가를 할 수 있는 화면이 나타납니다. 위 코드를 붙여넣고 모바일에서 시크릿 창을 열어 다시 내 홈페이지에 접속해봅니다. 양 손가락으로 화면을 좁혀 축소해보고, 작아지지 않는다면 다시 구글 서치콘솔에서 오류가 사라졌는지 확인해봅니다.

 

2024.02.01 - [생활 정보] - 워드프레스 블로그 SEO 점수 높이는 법과 Rank Math SEO 사용법