야수의 세상여행
Google 서치 콘솔 색인 신청 시 '모바일 사용 편의성' 부분에 대표적인 오류 1) 클릭할 수 있는 요소가 서로 너무 가까움, 2) 콘텐츠 폭이 화면 폭보다 넓음 문제로 모바일 색인이 되지 않습니다. 오늘은 이 부분에 대한 근본적인 해결 방법에 대해 설명드리겠습니다.
《목차》
1. 떠돌고 있는 불확실한 해결방법
2. 근본적인 문제 해결 방안
3. 적용 후 화면
1. 떠돌고 있는 불확실한 해결 방법
구글링을 해본 결과 아래의 방법들을 많이들 추천해주고, 아래의 방법들을 통해 해결하라는 글들이 많이 보였습니다. 하지만 조금 생각해 본 결과 이러한 방법들은 근본적인 해결 방법이 아니라는 생각이 들었습니다.
Q) 콘텐츠 폭이 화면보다 넓음, 클릭할 수 있는 요소가 서로 너무 가까움 문제는 동일한 건가요?
A) 서로 동일하진 않지만 보통 같이 발생하며, 모바일 상황에서 반응형 웹 부분이 해결되면, 보통 둘다 해결됩니다.
Q) 사진(이미지) 크기를 줄이면 해결되나요?
A) 세록 폭보단 가로폭이 문제가 될 경우가 많아서, 가로폭을 줄여주면 해결될 때도 있습니다. 하지만 얼마큼 줄여야 하는지, 또 어떤 이미지가 문제인지 알 수가 없어서 이건 근본적인 해결 방안이 되지 않습니다.
Q) 글과 글사이 혹은 문단 사이에 여백을 두면 해결이 될까요?
A) 이런 방법으로 간혹 해결하신 분들도 있지만, 다른 글들은 또다시 문제가 발생하여 이것 또한 근본적인 해결책이 될 수 없습니다. 오히려 세로 길이만 길어져 가독성을 좋지 않게해 사용자 경험의 질을 떨어 뜨립니다.
Q) URL 실시간 테스트와 구글 색인을 다시 신청하면 해결될까요?
A) 별다른 수정사항 없이 URL 테스트, 유효성 검사 및 색인신청과 같은 과정을 다시 거친다고 해당 문제는 해결되지 않습니다. 구글은 특정한 룰(규칙)과 알고리즘으로 색인 과정을 거치기에 그 룰과 알고리즘에만 맞춰주면 됩니다.
2. 근본적인 문제 해결방안
티스토리 (블로그)의 무료 스킨을 쓰시는 경우에 한하여 설명드리면, HTML에서 viewport 설정이 문제가 있습니다. 티스토리 블로그뿐 아니라 대부분 웹사이트의 유지보수 측면에서도 동일 적용된다고 보시면 됩니다. 아래에서 보시듯 대부분의 티스토리 스킨의 경우 veiwport 설정이 아래와 같을 것입니다.
<head>
...
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />
...
</head>
여기서 우리는 저 붉은색으로 표시한 " minimum-scale=1.0, maximum-scale=1.0 " 이 부분을 삭제합니다.
우리가 삭제한 것이 무엇이냐 하면, 디바이스 사이즈에 상관없이 최대, 최소 값을 지정해 놓음으로서 확대, 축소를 쉽지 않게 제어해 놓은 것입니다.
즉, 이러한 속성을 설정하면 사용자가 뷰포트를 확대/축소할 수 없게 되어 잠재적으로 모바일 접근성 문제가 발생할 수 있습니다. 따라서 이러한 속성을 사용하지 않는 것이 좋습니다. 실제 협업에서 IT 유지보수에서도 많이 쓰이고 있는 해결 방안입니다.
3. 적용 후 화면
구글 서치 콘솔 하단에 모바일 사용 편의성 부분에 아래와 같이 많은 분들이 오류를 겪고 있을 겁니다. 유효성 검사를 이미 실행하였지만 당연히 실패하였습니다. ▼
위에서 언급한 페이지 중 하나를 예시를 들어 URL 테스트를 해보니 "모바일 미지원 페이지"라고 결과가 나옵니다. 즉 PC, 데스크톱에서는 색인이 되어 검색 결과에 나오지만, 모바일이나 태블릿 PC로 구글에서 검색할 시 해당 페이지는 나오지 않는 다는 걸 알 수 있습니다. ▼
그럼, 다시 스킨편집 HTML 수정으로 들어가 위에서 언급한 veiwport를 수정해 줍니다.
- 변경 전: <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />
- 변경 후: <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1" />
그리고 다시 해당 페이지의 URL 실시간 테스트를 시행해 봅니다. 어떻게 변했을까요? 아래에서 보시는 거처럼 모바일 미지원 페이지가, 모바일 지원페이지로 변경됐음을 확인할 수 있습니다.▼
시간이 지나면 알아서 다시 색인이 될 거고, 조금 더 빠르게 색인을 원하시는 분은 구글 색인 신청을 다시 하시면 문제가 해결됨을 확인하실 수 있습니다.
오늘은 많은 분들이 고민하고 있는 구글 서치콘솔 모바일 색인의 대표적인 이슈, "클릭할 수 있는 요소가 너무 가까움" 그리고 "콘텐츠 폭이 화면 폭보다 넓음"의 해결방안에 대해 작성해 보았습니다.
조금이라도 도움 되었길 바랍니다.
오늘도 따뜻한 하루 보내세요~ :)
티스토리 광고 배치 전략 - 수익 극대화 4가지 방법
티스토리 수익 극대화를 위한 광고 배치 전략에 대해서 설명드리고자 합니다. 《 목차 》 1. 구글 애드센스 자동광고와 수동광고 둘 중 무엇을 선택? 2. 수익 효과가 좋은 구글 광고 종류 3. 상단
seoul-nba.tistory.com
'┖ ⍟ IT 여행' 카테고리의 다른 글
| 티스토리 robots.txt 등록, 위치 (팩트체크!) (8) | 2023.02.19 |
|---|---|
| 티스토리 스킨 수정 HTML 용어 2편 (ol, ul) (1) | 2023.02.18 |
| (CSS) Margin과 Padding - 블로그 스킨 수정의 기본 (0) | 2023.02.17 |
| 블로그 콘텐츠 글쓰기 요령 팁 5가지 (3) | 2023.02.16 |
| 티스토리 스킨 수정 HTML 용어 1편 (P, Div, Span) (0) | 2023.02.14 |
| 구글 검색 페이지 누락 문제해결 방법 공유 (0) | 2023.02.13 |
| 티스토리 블로그 활성화 : AMP 뜻, 장점, 효용성 (0) | 2023.02.12 |
| 구글 검색순위 올리는 5가지 핵심 방법 공유 (2) | 2023.02.11 |
