모바일 우선 인덱싱: 모바일 친화적인 웹사이트를 보장하기 위한 가이드

소개

모바일 우선 색인화는 검색 엔진 최적화(SEO) 및 웹사이트 개발 분야에서 새로운 주제가 아닙니다. 실제로 Exploding Topics에 따르면 전 세계 트래픽의 55% 이상이 모바일 장치에서 발생한다고 합니다.

비즈니스에 모바일 친화적인 웹사이트가 없다면 잠재 고객은 몇 초 만에 사이트를 이탈할 가능성이 높습니다.

웹사이트가 Google의 검색 엔진 결과 페이지(SERP)에 표시되는 가장 좋은 방법은 모바일 우선 색인화를 채택하는 것입니다.

이는 사이트 콘텐츠의 모바일 버전을 기준으로 웹사이트 순위를 매기는 Google의 방법입니다.

올바른 길로 안내하기 위해 이 가이드에서는 반응형 웹사이트 디자인을 만들어 모바일 우선 인덱싱을 통합하는 방법을 설명합니다.

웹사이트가 모바일 친화적인지 확인

모바일 우선 색인에서는 검색 엔진이 크롤링하여 웹사이트의 모바일 버전을 다른 어떤 것보다 우선적으로 표시합니다. 웹사이트가 모바일 친화적이지 않은 경우 기본적으로 데스크톱 버전이 모바일 디스플레이에 표시됩니다.

모바일 사용자는 스마트폰이나 태블릿에서 사용하기 어려운 큰 사이즈의 웹사이트 프레젠테이션을 보게 될 수도 있습니다. 이상적인 상황은 아닙니다. 반응형 디자인을 놓치고 있습니다. 그리고 웹사이트가 다양한 화면 크기에 맞게 조정되지 않습니다.

웹사이트가 이미 모바일 친화적인지 확인하여 이 시나리오를 피할 수 있습니다. 가장 좋은 방법은 Google의 페이지 속도 인사이트 도구를 사용하는 것입니다.

(이미지 출처)

웹사이트 URL을 검색창에 입력하기만 하면 모바일 기기에서 웹사이트가 어떻게 작동하는지에 대한 실시간 데이터를 확인할 수 있습니다:

(이미지 출처)

보시다시피 모바일 친화적인 웹사이트 점수를 90-100점 사이로 유지하는 것이 중요합니다. 웹사이트가 모바일 친화적이지 않다는 사실을 발견했다면 이제 Google Search Console로 이동해야 할 때입니다.

(이미지 출처)

여기에서 크롤링 문제, 사이트 속도 문제 및 모바일 환경을 방해할 수 있는 기타 오류를 찾을 수 있습니다.

그러나 기사, Google 검색 콘솔에서 가장 일반적인 모바일 친화적인 문제를 발견할 수 있습니다:

• 모바일 사용자의 터치 입력(링크 및 버튼) 관련 문제
• 응답이 없는 웹사이트 디자인, 템플릿 또는 테마
• 모바일 친화적이지 않은 팝업
• 울퉁불퉁한 웹사이트 탐색
• 읽기 어려운 글꼴

웹사이트를 처음부터 새로 만들었든, 워드프레스와 같은 콘텐츠 관리 시스템(CMS)을 사용하든, 사이트가 이미 모바일 친화적이라고 가정해서는 안 됩니다.

페이지스피드 인사이트와 Google 검색 콘솔은 웹사이트의 모바일 성능에 대한 개요를 제공하여 모바일 화면에 필요한 개선 사항을 적용할 수 있도록 도와줍니다.

웹사이트가 데스크톱과 모바일 기기에서 동일한 경험을 제공하는지 확인하세요.

SEO와 개발자는 좋은 사용자 경험(UX)을 제공하기 위해 모바일 웹사이트의 일부 웹 기능을 잘라내는 것이 일반적입니다.

쓸모없는 요소로 가득 찬 투박한 모바일 웹사이트는 결코 좋은 생각이 아닙니다. 하지만 이러한 기능을 너무 많이 제거하면 웹사이트의 모바일 우선 색인화에 영향을 미칠 수 있습니다.

Google은 개발자가 데스크톱과 모바일 사용자 모두에게 동일한 경험을 제공할 수 있기를 원합니다. 이 문제에 대해 구글이 구체적으로 밝힌 내용은 다음과 같습니다:

"모바일 사이트의 콘텐츠가 데스크톱 사이트보다 적은 경우 모바일 사이트의 기본 콘텐츠가 데스크톱 사이트와 동일하도록 업데이트하는 것이 좋습니다. 사이트의 거의 모든 인덱싱은 모바일 사이트에서 이루어집니다."

매우 간단합니다.

모바일 웹사이트 버전에 콘텐츠가 적으면 검색 엔진 최적화 페이지( SERP)에서 좋은 결과를 얻지 못합니다.

검색 엔진은 웹사이트의 내용을 파악할 수 있는 유일한 방법이기 때문에 콘텐츠를 중요하게 생각합니다. 웹사이트의 데스크톱 버전과 모바일 버전을 동일하게 유지하기 위해 따라야 할 몇 가지 주요 권장 사항은 다음과 같습니다:

• UX, SEO 및 개발 팀과 협력하여 중요한 웹사이트 요소를 제거하는 대신 모바일 친화적인 방식으로 콘텐츠를 표시하세요.
• 이미지, 동영상 및 기타 대용량 콘텐츠 파일은 태블릿, 스마트폰 및 기타 스마트 장치와 같은 다양한 모바일 장치에 따라 올바르게 최적화되어야 합니다.
• 모든 구조화된 데이터, 메타 로봇 태그, 기술 웹사이트 데이터를 모든 IoT 디바이스에서 범용적으로 유지하세요.

모바일 우선 색인화는 검색 엔진이 웹사이트의 모바일 버전을 주로 크롤링한다는 것을 의미합니다. 모바일 웹사이트에 콘텐츠가 부족하다면 데스크톱 웹사이트가 아무리 최적화되어 있어도 소용이 없습니다.

어느 쪽도 원하는 SEO 성과를 창출하지 못합니다.

모바일 사용성과 모바일 우선 색인화의 차이점 알아보기

모바일 우선 색인화와 모바일 사용성은 종종 같은 의미로 사용됩니다. 사실 이 용어는 서로 다른 개념입니다.

모바일 사용성은 모바일 기기에서 웹사이트의 성능을 설명합니다. 앞서 설명했듯이 모바일 우선 색인 생성은 데스크톱 버전보다 모바일 웹사이트 버전을 크롤링하는 것을 선호하는 Google의 방식입니다.

주의할 점이 있습니다.

웹사이트가 모바일 친화적이지 않고 모바일 사용성 문제가 많은 경우에도 Google에서 색인화할 수 있으며 여전히 색인화됩니다. 예를 들어 레스토랑을 운영 중이고 메뉴 페이지 중 하나가 PDF 파일이라고 가정해 보겠습니다.

물론 PDF 파일은 모바일 기기에서 읽고 탐색하기 어렵습니다. 하지만 정보가 충분하다면 Google은 모바일 우선 색인화를 통해 정보를 크롤링할 수 있습니다.

궁극적으로 스마트폰 구글봇은 웹사이트에 모바일 우선 색인화를 위한 충분한 콘텐츠가 있는 경우 자동으로 크롤링합니다. 하지만 웹사이트의 모바일 사용성 문제를 먼저 해결해야 합니다.

웹사이트 속도 가속화

사용자가 웹사이트에 머무는 평균 시간은 54초입니다.

웹 사이트가 로딩될 때까지 하루 종일 기다릴 수 있는 사람은 없습니다. 단 몇 초 만에 액세스할 수 있는 다른 웹사이트가 수십억 개에 달하기 때문입니다.

따라서 웹사이트의 속도를 개선하는 것은 모바일 사용자뿐만 아니라 SEO 목적을 위해서도 필수적입니다.

웹사이트 로딩 시간이 느리면 체류 시간과 이탈률 모두에 영향을 미칩니다. 이는 사람들이 웹사이트에 얼마나 오래 머무르는지 또는 아무 작업도 하지 않고 떠나는지 추정하는 지표입니다.

웹사이트의 느린 속도로 인해 이러한 문제가 발생하면 Google에서 이를 인지하고 SERP에서 웹사이트의 순위를 강등합니다. 이를 방지하려면 사이트 감사를 수행하여 웹사이트의 속도를 확인하고 모니터링할 수 있습니다.

Ranktracker를 사용하여 종합적인 웹 감사를 수행하여 모바일 기기에서 사이트의 속도를 측정할 수 있습니다.

지연 로딩 콘텐츠에 대한 웹사이트 최적화

지연 로딩 콘텐츠는 대부분의 최신 웹사이트에서 흔히 볼 수 있습니다. 뉴스 매체는 이러한 유형의 콘텐츠를 사용하여 사용자가 사이트를 아래로 스크롤할 때 더 많은 기사를 지속적으로 표시합니다.

스포츠 뉴스 퍼블리셔인 클러치포인트는 사용자가 특정 스포츠 카테고리의 뉴스 기사를 더 읽고 싶은 경우 '더 보기' 버튼을 클릭할 수 있도록 합니다:

(이미지 출처)

지연 로딩 콘텐츠의 원리는 사용자가 콘텐츠를 요청할 때만 콘텐츠를 표시하는 것입니다. 또한 Google이 크롤링해야 하는 불필요한 코드 줄을 줄여 웹사이트 속도를 향상시킵니다.

또한 모바일 사용자에게 웹사이트 페이지의 콘텐츠 과부하를 줄여주는 멋진 UX를 추가할 수 있습니다. 하지만 지연 로딩 콘텐츠는 검색 엔진이 색인을 생성하기 어려울 수 있다는 문제가 있습니다.

예를 들어 클러치포인트로 돌아갑니다.

당연히 '더 많은 스토리' 버튼을 클릭하여 불러올 수 있는 스토리가 아직 없는 경우 Google에서 색인을 생성할 수 없습니다.

웹사이트에서 페이지 매김 로딩을 허용하는지 확인하여 이 문제를 해결할 수 있습니다. 이렇게 하면 Google과 같은 검색 엔진이 클러치포인트와 같은 무한 스크롤을 사용하더라도 모든 사이트 콘텐츠를 기록할 수 있습니다.

부적절한 광고 게재에 주의하세요

Google 애드센스를 사용하는 경우 웹사이트의 모바일 버전에 광고가 표시되는 방식에 주의하는 것이 중요합니다.

모바일 기기에는 데스크톱 컴퓨터에서 볼 수 있는 일반적인 광고 대신 반응형 디스플레이 광고(RDA)가 표시됩니다.

예를 들어, 다음은 일반적인 데스크톱 광고입니다:

(이미지 출처)

모바일 디바이스에서는 다음과 같이 표시됩니다:

(이미지 출처)

데스크톱 디스플레이 광고의 용도를 모바일에서 변경하는 것은 피할 수 없는 일입니다. 다음은 모바일 RDA를 만들 때 따라야 할 몇 가지 모범 사례입니다:

• SEO 팀과 개발자에게 CSS 및 HTML 태그를 사용하여 다양한 프레젠테이션 크기에 따라 광고를 조정하도록 지시하세요.
• 헤드라인과 텍스트를 명확하고 간결하게 유지하세요.
• 이미지 위에 텍스트를 추가하지 않도록 하세요.
• 다양한 크기의 광고 이미지 생성

웹사이트가 ADA를 준수하는지 확인

미국에는 6,100만 명의 장애인이 살고 있습니다. 접근 가능한 웹사이트를 구축한다는 것은 청각 장애, 색맹 또는 기타 눈에 보이지 않는 장애를 가진 장애가 있는 사용자를 수용한다는 의미입니다.

웹사이트와 상호 작용할 수 있는 사람들이 많을수록 이들이 웹사이트에 머무르고 전환할 가능성이 높아집니다. 이 개념은 모바일 우선 인덱싱에 매우 중요합니다.

웹사이트 접근성을 높이면 장애인뿐만 아니라 모든 사용자에게 도움이 됩니다. 사용하기 쉽고, 콘텐츠 구조가 명확하며, 이미지에 대체 텍스트를 제공하는 등 다양한 접근성 기능을 갖춘 모바일 친화적인 웹사이트를 통해 더 나은 고객 경험을 제공할 수 있습니다.

웹사이트 접근성을 추구하는 것은 윤리적인 결정일 뿐만 아니라 상업적으로도 현명한 결정입니다. 접근성 보장의 법적 의미를 인식하는 것이 중요합니다. 예를 들어, 미국 장애인법(ADA)과 같은 규정은 미국 기업에 영향을 미치며, 웹 사이트가 모든 방문자에게 포괄적인 경험을 제공하도록 의무화합니다.

웹사이트의 현재 접근성 상태를 정확하게 평가하여 현행 규정을 준수하는지 확인할 수 있는 무료 웹사이트 접근성 검사기(예: accessiBe)를 사용할 수 있습니다.

이미지 소스

웹사이트 접근성을 높일 수 있는 다른 방법은 다음과 같습니다:

• 웹사이트에 일관된 색상을 사용합니다. 가독성이 떨어지는 매우 밝은 네온 컬러는 사용하지 않도록 합니다.
• 화면 리더를 사용하는 장애인을 위해 이미지에 대체 텍스트를 추가합니다.
• 사용자가 중요한 정보를 빠르고 쉽게 찾을 수 있도록 명확한 콘텐츠 구조를 사용합니다.

이러한 모범 사례를 몇 가지 적용했다면 미국 장애인법(ADA)에 따라 웹사이트의 규정 준수 여부를 확인하세요. 페이지가 합격 점수를 받으면 사용해도 좋습니다.

(이미지 출처)

접근성 높은 웹사이트를 개발하면 모든 사람이 참여하고, 정보를 얻고, 전환할 준비가 되어 있습니다.

주요 요점

전반적으로 모바일 우선 색인화는 웹사이트가 인터넷에서 어떻게 보이고 작동해야 하는지에 대한 더 높은 기준을 설정했습니다. 검색 엔진은 이제 웹사이트가 모바일 사용자에게 어떤 서비스를 제공하는지에 주로 관심을 갖습니다.

이 가이드를 따르면 모바일 친화적인 웹사이트를 관리하고 더 많은 모바일 사용자를 수용하는 방법에 대한 명확한 그림이 그려질 것입니다.