흔히 발생하는 실수

이 페이지에서는 웹마스터가 모바일 페이지를 만들면서 가장 자주 범하는 실수를 설명합니다.

자바스크립트, CSS, 이미지 파일이 차단됨

렌더링과 색인 생성을 최적화하려면 웹사이트에서 사용하는 자바스크립트, CSS, 이미지 파일에 Googlebot이 항상 액세스할 수 있게 허용하여 Googlebot이 일반 사용자처럼 사이트를 볼 수 있도록 하세요. 사이트의 robots.txt 파일이 이러한 애셋을 크롤링하는 것을 허용하지 않으면 Google 알고리즘 렌더링 및 콘텐츠의 색인 생성 품질에 직접적인 해를 입힙니다. 이로 인해 순위가 최적화되지 못할 수 있습니다.

  1. Google Search Console'Fetch as Google' 기능을 사용하여 Googlebot이 자바스크립트, CSS, 이미지 파일을 크롤링할 수 있도록 합니다. 그러면 Googlebot이 콘텐츠를 보고 렌더링하는 방식을 정확하게 확인할 수 있으며 사이트의 여러 색인 생성 문제를 파악하고 수정할 수 있습니다.

  2. Google Search Console의 robots.txt를 확인하고 테스트합니다.

  3. 모바일 친화성 테스트로 모바일 페이지를 테스트하여 Google 시스템에서 내 웹사이트가 모바일 사용자에게 적합하다고 판단하는지 확인합니다.

  4. 모바일 페이지에 별도의 URL을 사용하는 경우 모바일 및 데스크톱 URL을 모두 테스트하여 리디렉션이 인식되고 있고 크롤링이 가능한지를 확인해야 합니다.

재생할 수 없는 콘텐츠

라이선스가 제한된 미디어나 Flash 또는 휴대기기에서 광범위하게 지원되지 않는 기타 플레이어를 요구하는 환경 등과 같이 일부 동영상이나 콘텐츠 유형은 휴대기기에서 재생할 수 없는 경우가 있습니다. 웹사이트의 특정 페이지에 재생할 수 없는 콘텐츠가 표시되면 사용자가 큰 불편을 겪을 수 있습니다.

사용자가 휴대기기에서 지원되지 않는 콘텐츠가 포함된 페이지를 방문하면 아래와 비슷한 오류 메시지가 표시됩니다.

동영상을 재생할 수 없음

이는 사용자의 모바일 환경에 부정적인 영향을 미치게 됩니다.

독점 동영상 플레이어를 사용하거나 지원되지 않는 형식의 콘텐츠를 삽입하는 대신 HTML5 표준 태그를 사용하여 동영상이나 애니메이션을 포함하는 것이 좋습니다.

Flash나 기타 멀티미디어 플레이어를 사용해 렌더링된 애니메이션 콘텐츠에는 모든 웹브라우저에서 작동하는 HTML5 애니메이션을 사용해 보세요. Google Web Designer를 사용하면 HTML5에서 이러한 애니메이션을 간편하게 만들 수 있습니다.

  • 모든 사용자에게 더 나은 환경을 제공할 수 있도록 애니메이션을 만들 때 HTML5 표준을 사용합니다.
  • 모든 기기에서 재생할 수 있는 동영상 삽입 기술을 사용합니다.
  • 동영상 스크립트를 사용할 수 있도록 설정하는 것을 고려해 보세요. 이렇게 하면 보조 브라우징 기술을 사용하거나 독점 동영상 형식을 재생할 수 없는 브라우저를 사용하는 사용자도 사이트에 액세스할 수 있습니다.

자세한 내용은 Google의 웹 기초에 있는 동영상 권장사항을 참조하세요.

잘못된 리디렉션

별도의 모바일 URL이 있는 경우 각 데스크톱 URL의 모바일 사용자를 적절한 모바일 URL로 리디렉션해야 합니다. 다른 페이지로 리디렉션하면(예: 항상 홈페이지로 리디렉션) 문제가 발생할 수 있습니다.

예를 들면 다음과 같습니다.

  • 모바일 사이트에 사용자가 원하는 데스크톱 페이지가 있는데도 불구하고 데스크톱 사이트의 서버가 사용자가 원래 요청한 URL과 관계없이 모바일 사이트의 홈페이지로 리디렉션하도록 설정되어 있습니다.
  • 데스크톱 사이트의 URL이 상응하는 모바일 URL과 잘 매핑되지 않는 URL 매개변수를 통해 동적으로 생성됩니다. 예를 들어 데스크톱 사이트에서 특정 날짜의 열차 시간표를 찾는 사용자가 모바일 사이트의 일반적인 시간표 검색 페이지로 리디렉션된다면 사용자는 이에 대해 불만을 느끼게 될 것입니다. 상응하는 모바일 URL이 있다면 리디렉션을 올바르게 설정하여 사용자가 찾고 있는 페이지로 이동하도록 하는 것이 좋습니다.

  • 데스크톱 사이트에서 일부 휴대기기는 리디렉션하지만 다른 기기는 리디렉션하지 않습니다. 예를 들어, 사이트에서 Android 사용자만 모바일 사이트로 리디렉션하고 iPhone이나 Windows Phone 사용자는 리디렉션하지 않을 수 있습니다.

  • Google Search Console을 사용합니다. 인증된 사용자의 경우 Google에서 사이트 페이지가 스마트폰 사용자를 홈페이지로 리디렉션한다고 감지하면 사용자에게 메시지를 발송합니다. 또한 Search Console의 스마트폰 크롤링 오류 섹션에서 잘못된 리디렉션이 감지되면 이를 표시합니다. 웹마스터 도구에서 제공되는 예제 URL을 사용하여 서버 구성에 문제가 있는 부분을 정확하게 디버깅하는 작업을 시작해 보세요.

  • 스마트폰 사용자를 스마트폰 사이트의 적절한 URL로 리디렉션하도록 서버를 설정합니다.

  • 사이트 페이지에 스마트폰용 페이지가 없다면 사용자를 스마트폰 사이트의 홈페이지로 리디렉션하기보다는 데스크톱 페이지에 머무르게 하는 것이 좋습니다. 이 경우 잘못된 작업을 수행하는 것보다 아무런 조치를 취하지 않는 것이 더 낫습니다.

  • 데스크톱 및 스마트폰 사용자에게 동일한 콘텐츠를 게재하는 반응형 웹 디자인을 사용해 보세요.

모바일에서만 나타나는 404 오류

일부 사이트의 경우 특정 URL에 액세스하는 데스크톱 사용자에게는 콘텐츠를 게재하고 모바일 사용자에게는 오류 페이지를 표시합니다.

모바일에서만 나타나는 404 오류

최적의 사용자 환경을 제공하려면 사용자가 휴대기기에서 데스크톱 페이지에 방문하는 것을 인식하고 다른 URL에 이에 상응하는 모바일 페이지가 있는 경우 404 또는 soft 404 페이지를 게재하는 대신 이 URL로 리디렉션하세요. 또한 모바일용 페이지 자체가 오류 페이지여서는 안됩니다.

올바른 리디렉션
  • Google Search Console을 사용합니다. 사이트에 인증된 사용자인 경우 Google은 메시지 센터에서 알림을 발송합니다.

  • 별도의 URL에 스마트폰 사이트가 있는 경우 서버를 설정하여 스마트폰 사용자를 스마트폰 사이트의 URL로 리디렉션하도록 합니다.

  • 동적 게재를 사용하는 경우 사용자 에이전트 감지가 적절하게 설정되었는지 확인합니다.

  • 사이트의 페이지에 스마트폰에 상응하는 페이지가 없다면 사용자를 데스크톱 페이지에 머무르도록 합니다. 오류 페이지를 표시하는 것보다는 사용자가 찾는 콘텐츠를 표시하는 것이 훨씬 더 바람직한 사용자 환경을 조성합니다.

  • 가능하다면 반응형 웹 디자인을 사용합니다. 이 구성을 사용하면 사용자가 사용 중인 모든 기기에 대해 동일한 콘텐츠를 게재할 수 있습니다.

  • Google Search Console의 크롤링 오류 보고서를 확인합니다. 스마트폰 탭에 스마트폰용 404 오류를 표시하는 URL 감지 목록이 표시됩니다.

전면 광고 방지

웹사이트에서 사용자가 방문하는 페이지 콘텐츠의 일부나 전체를 덮는 전면 광고나 오버레이가 표시되는 경우가 많습니다. 웹사이트의 기본 앱, 메일링 리스트 가입 양식 또는 광고를 홍보하려는 목적으로 휴대기기에 주로 표시되는 이러한 전면 광고는 사용자의 만족도를 떨어뜨립니다. 심지어 사용자가 전면 광고를 닫고 페이지의 실제 콘텐츠를 보기가 매우 어렵게 제작된 경우도 있습니다. 휴대기기의 화면 공간은 제한되어 있기 때문에 전면 광고는 사용자 환경에 부정적인 영향을 미칩니다.

앱 다운로드 전면 광고

대부분의 웹마스터는 모바일 웹사이트 방문자에게 자사 비즈니스 기본 앱을 홍보합니다. 주의 깊게 작업하지 않으면 이 때문에 색인 생성 문제가 발생하고 방문자의 사이트 사용에 지장을 초래할 수 있습니다.

전면 광고 방지
전면 광고가 사용자의 작업 완료를 방해하고 있습니다.
앱 배너
배너의 경우는 앱을 표시하면서 작업을 완료하는 것이 가능합니다.
  • 페이지의 콘텐츠 본문과 함께 앱을 홍보할 수 있는 단순한 배너를 사용합니다. 이러한 배너를 구현할 때 다음과 같은 기능과 항목을 사용할 수 있습니다.

    • Safari용 스마트 앱 배너 또는 Chrome용 기본 앱 배너와 같은 브라우저에서 지원하는 배너
    • 다운로드할 수 있는 올바른 앱 스토어로 연결되는 일반적인 작은 광고 형식의 HTML 배너나 이미지
  • Android 앱이라면 앱 색인 생성을 구현해 보세요. 앱의 색인 생성된 콘텐츠가 특정 검색어와 관련이 있는 경우 Google에서 검색결과에 설치 버튼을 표시합니다. 사용자는 이를 통해 콘텐츠를 다운로드하고 앱의 특정 페이지로 바로 이동할 수 있습니다.

별도의 모바일 URL에서 웹사이트를 게재하는 경우 데스크톱에 최적화된 버전의 링크를 제공하고, 마찬가지로 데스크톱 페이지에서는 모바일 페이지의 링크를 제공하는 경우가 많습니다. 이때 모바일 페이지 링크가 데스크톱 사이트 홈페이지로 연결되는 등 관련 없는 페이지 링크와 같은 오류가 자주 발생합니다.

  • 링크를 확인하여 올바른 페이지로 연결하는지 확인합니다.

모바일 페이지가 느림

모바일 사이트가 신속하게 로드되도록 하는 것이 중요합니다. 콘텐츠를 보려고 오래 기다려야 한다면 사용자는 불만을 느끼게 됩니다.

Google PageSpeed Insights를 참조하여 페이지의 속도를 늦추는 문제가 있는지 확인하고 '속도' 하위 섹션을 주의 깊게 읽어 보세요. '수정 필요'라고 표시된 문제를 해결합니다.

자세한 내용은 다음을 참조하시기 바랍니다.

표시 영역을 제대로 설정

사이트 방문자가 사용하는 기기는 화면 크기가 다양하므로 페이지에 표시 영역 메타태그를 사용하여 표시 영역을 지정해야 합니다. 이 태그는 페이지의 크기 및 배율을 기기에 적합하도록 조정하는 방법을 브라우저에 알리는 역할을 합니다. 다음은 일반적으로 발생하는 두 가지 문제입니다.

  • 고정 너비 표시 영역을 사용하는 경우 페이지가 모든 기기 크기에 맞게 잘 조정되지 않습니다(기기의 종류는 정말 다양합니다). 자세히 알아보기
  • 비현실적인 너비로 최소 표시 영역을 설정하면 작은 기기를 사용하는 사용자는 콘텐츠를 읽기 위해 가로로 스크롤해야 합니다. 이는 페이지가 CSS 선언에서 절대 값을 사용하거나 특정 브라우저 너비(예: 980픽셀)에서 최적의 상태로 표시되도록 설계된 이미지를 사용할 때 발생합니다. 이 오류를 수정하려면 페이지에서 CSS 요소에 관련된 너비 및 위치 값을 사용할 뿐만 아니라 이미지도 배율을 조정할 수 있어야 합니다. 자세히 알아보기

글꼴 크기가 작음

휴대기기에서 알아보기 어려울 정도로 글꼴 크기를 너무 작게 설정하지 않도록 합니다. 이 경우 방문자가 '손가락으로 확대'해야만 읽을 수 있습니다. 웹페이지에 표시 영역을 지정한 후 글꼴 크기를 설정하여 표시 영역 내에서 적절하게 조정합니다. 글꼴 크기 관련 권장사항은 눈에 잘 들어오는 글꼴 크기 사용을 참조하세요.

터치 요소가 너무 가까움

버튼과 링크 등의 터치 요소가 서로 너무 가까이 있도록 설정하지 마세요. 이 경우 모바일 사용자가 원하는 요소를 손가락으로 탭하기 어렵고 탭하려고 할 때 바로 옆에 있는 요소도 함께 탭하게 됩니다. 이러한 오류를 수정하려면 버튼과 탐색 링크의 크기와 공간을 모바일 방문자에게 맞도록 적절하게 지정해야 합니다. 자세히 알아보려면 적절한 탭 타겟 크기 지정을 참조하세요.

다음에 대한 의견 보내기...