수년 동안 Google은 웹사이트의 데스크톱 버전을 "기본" 버전으로, 모바일 버전을 "대체" 버전으로 취급했습니다. 그 시대는 끝났습니다.
모바일 우선 인덱싱(Mobile-First Indexing)을 통해 Google은 주로 인덱싱 및 순위 지정에 모바일 버전의 콘텐츠를 사용합니다. 사이트에 훌륭한 데스크톱 콘텐츠가 있지만 모바일 버전이 축소되거나 깨진 경우, 데스크톱에서 검색하는 사용자에게도 순위가 떨어집니다.
이 가이드는 모바일 우선 세상에서 사이트가 살아남고 번성하도록 보장하는 방법을 설명합니다.
1. 모바일 우선 인덱싱이란 무엇인가요?
일반적인 오해를 명확히 하는 것이 중요합니다. 별도의 "모바일 인덱스"는 없습니다. Google 인덱스는 단 하나뿐입니다.
- 과거 방식: Googlebot(데스크톱)이 사이트를 크롤링했습니다. 큰 화면에서 본 내용을 바탕으로 순위를 결정했습니다.
- 현재 방식: Googlebot(스마트폰)이 사이트를 크롤링합니다. 모바일 화면에서 본 내용을 바탕으로 순위를 결정합니다.
시사점: "공간을 절약"하기 위해 모바일에서 콘텐츠를 숨기면(예: 텍스트 또는 탭 제거), Google은 더 이상 해당 콘텐츠를 효과적으로 볼 수 없습니다. 인덱싱되지 않습니다.
2. 해결책: 반응형 웹 디자인
별도의 모바일 사이트(m.example.com)를 가질 수 있지만, Google은 반응형 웹 디자인(Responsive Web Design)을 강력히 권장합니다.
반응형 디자인은 웹사이트가 모든 기기에서 동일한 HTML 코드와 동일한 URL을 사용하지만, CSS를 사용하여 화면 크기에 따라 레이아웃을 변경한다는 것을 의미합니다.
필수 태그: 뷰포트(The Viewport)
반응형 디자인이 작동하려면 사이트의 모든 페이지에 <head> 섹션에 다음 메타 태그가 포함되어야 합니다.
<meta name="viewport" content="width=device-width, initial-scale=1">이 줄은 브라우저에 다음과 같이 말합니다. "사용 중인 특정 기기의 너비에 맞게 이 콘텐츠의 크기를 조정하십시오." 이 태그가 없으면 모바일 브라우저는 데스크톱 버전을 렌더링하고 축소하려고 시도하여 사용자가 손가락으로 확대/축소하도록 강요합니다(주요 사용 편의성 실패).
3. "콘텐츠 패리티" 규칙
모바일 우선 인덱싱에서 성공하려면 데스크톱 버전과 모바일 버전 간의 패리티(Parity, 동등성)를 확보해야 합니다.
- 동일한 콘텐츠: 텍스트, 이미지 및 동영상은 동일해야 합니다. 모바일 사용자를 위해 기사를 요약하지 마십시오.
- 동일한 구조화된 데이터: 스키마 마크업(JSON-LD)이 모바일 버전에 있어야 합니다.
- 동일한 메타데이터: 제목 및 메타 설명은 동일해야 합니다.
- 시각적 확인: 광고나 팝업(전면 광고)이 모바일의 실제 콘텐츠를 가리지 않도록 하십시오. Google은 사용자를 좌절시키는 "방해가 되는 전면 광고"에 불이익을 줍니다.
4. Google Search Console에서 문제 해결
Google Search Console(GSC)에는 "경험" 탭 아래에 전용 "모바일 사용 편의성" 보고서가 있습니다. 모바일 사용자가 사용하기 어려운 페이지를 강조 표시합니다.
다음은 가장 일반적인 세 가지 오류와 해결 방법입니다.
오류 A: "텍스트가 너무 작아 읽을 수 없음"
- 문제: 글꼴 크기가 너무 작아서 사용자가 읽으려면 확대해야 합니다.
- 해결 방법: Google은 본문 텍스트의 기본 글꼴 크기를 최소 16px로 권장합니다. CSS를 확인하여 글꼴을 고정된 작은 크기(예: 10px)로 설정하지 않았는지 확인하십시오.
오류 B: "클릭할 수 있는 요소가 서로 너무 가까움"
- 문제: "뚱뚱한 손가락 증후군." 버튼이나 링크가 너무 가까워서 "취소"를 탭하려는 사용자가 실수로 "제출"을 탭하게 됩니다.
- 해결 방법: 터치 대상의 크기가 최소 48x48 픽셀이고 그 사이에 약 8 픽셀의 여백이 있는지 확인하십시오.
오류 C: "콘텐츠가 화면보다 넓음"
- 문제: 사용자가 전체 페이지를 보려면 가로로(왼쪽에서 오른쪽으로) 스크롤해야 합니다. 이것은 UX에서 엄격히 금지됩니다.
- 해결 방법: 이는 일반적으로 고정 너비(예:
width: 800px)가 있는 이미지나 테이블로 인해 발생합니다. CSS에서 고정 너비를 상대 너비(예:max-width: 100%)로 변경하여 요소가 자동으로 축소되도록 하십시오.
결론
모바일 우선 인덱싱은 끌 수 있는 설정이 아닙니다. 웹의 기본 상태입니다. 반응형 디자인을 채택하고, 콘텐츠 패리티를 보장하고, 사용 편의성 오류에 대해 Search Console을 모니터링함으로써, 작은 화면에서 검색하는 60% 이상의 사용자가 사이트에 액세스할 수 있도록 보장합니다.