구글이 알려주는 SEO 보다 더 중요한 모바일 검색엔진 최적화

검색 결과에 사이트가 표시될 수 있도록 이번에는 여러 기기를 위해 사이트를 설정하고 검색 엔진이 내 사이트를 이해할 수 있게 하는 방법을 알아봅니다.

모바일 사이트 스타일 선택

모바일 웹사이트를 구현하는 3가지 방법

모든 유형과 크기의 보기 화면을 처리할 수 있는 웹사이트를 구현하기 위한 3가지 기본 기술이 있습니다. 다음은 3가지 방법을 비교하는 차트입니다.

1. 반응형 웹 디자인: 사용자 기기 (데스크톱, 태블릿, 모바일, 비시각적 브라우저)와 상관없이 동일한 URL에 동일한 HTML 코드를 게재하지만 화면 크기에 따라 다르게 렌더링(응답)할 수 있습니다. 반응형 디자인은 Google에서 권장하는 디자인 패턴입니다.
2. 동적 게재: 기기와 관계없이 동일한 URL을 사용하지만 서버가 사용자의 브라우저에 대해 알고 있는 정보를 기준으로 기기 유형에 따라 서로 다른 버전의 HTML을 생성합니다.
3. 모바일 전용 사이트(별도 URL): 각 기기 및 별도 URL에 다른 코드를 게재합니다. 이 설정은 사용자의 기기를 감지한 다음 Vary HTTP 헤더와 함께 HTTP 리디렉션을 사용하여 적절한 페이지로 리디렉션합니다.

Google에서는 모든 Googlebot 사용자 에이전트가 페이지 및 페이지 애셋에 모두 액세스 할 수 있다면 특정 URL 형식을 더 선호하지는 않습니다.

모바일 사이트 설정을 선택하고 각 옵션의 장단점을 파악하는 방법을 자세히 알아보려면 ‘멀티스크린 사용자용 웹사이트 구축‘을 참조하세요.

모바일 사이트 구축의 핵심 사항

나중에 다루게 되겠지만, 모바일에 최적화된 사이트를 만들기 위해 선택할 수 있는 여러 가지 설정이 있습니다. 그러나 어떤 설정을 선택하는지와 상관없이 주의해야 할 핵심 사항이 있습니다.

1. 휴대기기에 맞게 페이지 형식을 지정했다면 이를 Google에 알립니다(상응하는 페이지가 휴대기기에 맞게 형식이 지정된 경우에도 마찬가지임). 이렇게 하면 Google에서 모바일 검색 사용자의 검색결과에 콘텐츠를 정확하게 게재하는 데 도움이 됩니다.
2. 리소스를 크롤링할 수 있는 상태로 유지합니다. 사이트에 광고를 비롯하여 페이지 렌더링에 도움이 되는 주요 파일에 검색 엔진이 액세스하지 못하게 하는 robots.txt를 사용하면 안 됩니다. Googlebot이 CSS나 자바스크립트, 이미지 등 페이지 리소스에 액세스하지 못하면 Google에서 페이지가 모바일 브라우저에 표시되고 제대로 작동하도록 구축되었다는 것을 감지하지 못할 수 있습니다. 즉, Google에서 페이지가 ‘모바일 친화적’인지 감지할 수 없으므로 모바일 검색 사용자에게 올바로 게재되지 않을 수 있습니다.
3. 모바일 방문자의 불만을 야기하는 흔히 발견되는 실수를 방지하세요. 예를 들어 페이지의 주요 콘텐츠로 플래시 동영상을 사용하는 등 재생할 수 없는 동영상을 포함하면 안 됩니다. 검색 사용자의 불만을 초래하는 모바일 페이지가 있으면 순위가 낮아질 수 있고 모바일 검색결과에 경고와 함께 표시될 수 있습니다. 흔히 발생하는 실수 섹션에서 자세히 알아보세요.

기기 간 차이점 이해하기

모바일: 이 도움말에서 ‘모바일’ 또는 ‘휴대기기’란 Android를 실행하는 기기나 iPhone, Windows Phone 등의 스마트폰을 말합니다. 모바일 브라우저는 광범위한 HTML5 사양을 렌더링 할 수 있다는 점에서 데스크톱 브라우저와 유사하지만 화면 크기가 더 작고 대부분 기본 방향이 세로입니다.

태블릿: Google에서는 태블릿을 별도의 기기 유형으로 간주하므로 휴대기기를 이야기할 때는 대개 태블릿이 정의에 포함되지 않습니다. 태블릿의 화면은 보통 더 크므로 태블릿에 최적화된 콘텐츠를 제공하지 않는 한 사용자는 스마트폰 브라우저가 아닌 데스크톱 브라우저에서 사이트를 볼 것으로 기대하게 됩니다.

멀티미디어 휴대전화: XHTML 표준에 맞게 코딩된 페이지를 렌더링하고 HTML5 마크업, 자바스크립트/ECMAscript를 지원할 수 있지만 HTML5 표준의 일부 확장 API를 지원하지 못할 수 있는 브라우저가 포함된 휴대전화입니다. 이는 일반적으로 스마트폰이 아닌 대부분의 3G 지원 휴대전화의 브라우저를 가리킵니다.

피처폰: 피처폰의 브라우저는 표준 HTML을 사용하여 코딩된 일반 데스크톱 웹페이지를 렌더링 하는 기능이 없습니다. 여기에는 cHTML(iMode), WML, XHTML-MP 등만 렌더링하는 브라우저가 포함됩니다.

반응형 웹 디자인(RWD)은 서버가 항상 모든 기기에 동일한 HTML 코드를 보내어 CSS를 사용해 기기의 페이지 렌더링을 조정하는 설정입니다. 모든 Googlebot 사용자 에이전트가 페이지와 애셋(CSS, 자바스크립트, 이미지)을 크롤링하도록 허용된 경우 Google 알고리즘은 이 설정을 자동으로 감지할 수 있습니다.

요약

• meta name="viewport" 태그를 사용하여 콘텐츠 조정 방법을 브라우저에 알립니다.
• 자세한 문서는 웹 기초 사이트를 확인하세요.

meta name=”viewport” 사용

페이지가 모든 기기에 맞춰 조정된다는 것을 브라우저에 알리려면 다음과 같이 문서의 헤드에 메타태그를 추가해야 합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

메타 표시 영역 태그는 페이지의 크기와 배율을 기기 너비에 맞춰 조정하는 방법을 브라우저에 알립니다. 메타 표시 영역 요소가 없으면 모바일 브라우저가 기본적으로 페이지를 데스크톱 화면 너비로 렌더링 합니다(대개 약 980px이지만 기기에 따라 다름). 그런 다음 모바일 브라우저는 글꼴 크기를 늘리고 화면에 맞춰 콘텐츠를 확장하거나 화면 내에 맞도록 콘텐츠의 일부만 표시하여 콘텐츠를 보기 좋게 조정합니다.

이로 인해 글꼴 크기의 일관성이 없어지게 되면 사용자가 콘텐츠와 상호작용하기 위해 두 번 탭 하거나 손가락으로 확대해야 할 수 있습니다. 휴대기기에서 이 유형의 상호작용이 필요하면 Google에서는 이러한 페이지를 모바일에 최적화된 것으로 판단하지 않을 수 있습니다.

반응형 이미지에는 <picture> 요소를 포함시킵니다.

일반적으로 사이트가 Chrome 또는 Apple Mobile Safari 등 최신 브라우저에서 작동한다면 Google 알고리즘과도 잘 작동합니다.

반응형 디자인의 장점

다음과 같은 이유로 반응형 웹 디자인을 사용하는 것이 좋습니다.

사용자가 단일 URL로 손쉽게 콘텐츠를 공유하고 연결할 수 있습니다.

• 데스크톱/모바일 페이지의 존재를 알리지 않고도 Google의 알고리즘이 페이지에 정확하게 색인 생성 속성을 지정하는 데 도움이 됩니다.
• 같은 콘텐츠에 여러 페이지를 유지하기 위한 엔지니어링 시간이 절약됩니다.
• 모바일 사이트에 영향을 미치는 흔히 발생하는 실수의 발생 가능성이 감소합니다.
• 기기에 최적화되어 있어 사용자에게 표시하기 위한 리디렉션이 필요하지 않으므로 로드 시간이 줄어듭니다. 또한 사용자 에이전트 기반 리디렉션은 오류가 발생하기 쉬우며 사이트의 사용자 환경을 저하할 수 있습니다(자세한 내용은 사용자 에이전트 감지 시 문제점 섹션 참조).
• Googlebot이 사이트를 크롤링할 때 리소스가 절감됩니다. 반응형 웹 디자인 페이지에서는 콘텐츠의 모든 버전을 가져오기 위해 다른 Googlebot 사용자 에이전트로 여러 번 크롤링하는 것이 아니라 단일 Googlebot 사용자 에이전트가 페이지를 한 번만 크롤링하면 됩니다. 이러한 크롤링 효율성 향상으로 Google에서 사이트 콘텐츠의 색인을 더 많이 생성하고 최신 상태로 적절히 유지하는 데 도움을 줄 수 있습니다.

이 설정에서는 각 데스크톱 URL에 모바일에 최적화된 콘텐츠를 게재하는 관련 URL이 별도로 존재합니다.

일반적인 설정의 경우 데스크톱 사용자에게 게재되는 www.example.com의 페이지와 상응하는 페이지인 m.example.com에서 모바일 사용자에게 게재됩니다. Google에서는 Googlebot 사용자 에이전트가 액세스만 할 수 있다면 특정 URL을 더 선호하지는 않습니다.

요약

• rel=”canonical” 및 rel=”alternate” 요소로 <link> 태그를 지정하여 두 URL 간의 관계를 알립니다.
• 사용자 에이전트 문자열을 감지하고 적절하게 리디렉션합니다.

데스크톱과 모바일 URL의 사이트 설정

Google 알고리즘이 별도 모바일 URL을 이해하도록 하려면 다음 사이트 설정을 사용하는 것이 좋습니다.

데스크톱 페이지에 해당 모바일 URL을 가리키는 특별한 link rel=”alternate” 태그를 추가합니다. 이렇게 하면 Googlebot이 사이트의 모바일 페이지 위치를 찾을 수 있습니다.

1. 모바일 페이지에 해당 데스크톱 URL을 가리키는 link rel=”canonical” 태그를 추가합니다.

Google에서는 이 사이트설정을 페이지 자체의 HTML에 포함하거나 사이트맵에 포함하는 등 2가지 방식을 지원합니다. 예를 들어 데스크톱 URL이 http://example.com/page-1이고 해당하는 모바일 URL이 http://m.example.com/page-1이면 사이트 설정은 다음과 같습니다.

HTML에서 사이트설정

데스크톱 페이지(http://www.example.com/page-1)에 다음을 추가하고

<link rel="alternate" media="only screen and (max-width: 640px)"
 href="http://m.example.com/page-1">

모바일 페이지(http://m.example.com/page-1)의 필수 사이트 설정을 다음과 같이 구성합니다.

<link rel="canonical" href="http://www.example.com/page-1">

모바일 URL에서 데스크톱 페이지를 가리키는 rel=”canonical” 태그는 필수입니다.

사이트맵에서 사이트설정

Google에서는 다음과 같이 사이트맵에 데스크톱 페이지에 대한 rel=”alternate” 사이트설정을 포함할 수 있도록 지원합니다.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>http://www.example.com/page-1/</loc>
<xhtml:link
rel="alternate"
media="only screen and (max-width: 640px)"
href="http://m.example.com/page-1" />
</url>
</urlset>

모바일 URL에 필요한 rel=”canonical” 태그를 모바일 페이지의 HTML에도 추가해야 합니다.

데스크톱과 모바일 사이트의 관계 세부 설정

데스크톱 페이지의 링크 태그 속성은 다음과 같습니다.

• rel=”alternate” 속성은 이 태그가 데스크톱 페이지로 연결되는 대체 URL을 지정하고 있음을 알립니다.
• 미디어 속성의 값은 Google에서 대체 URL을 사용해야 할 때를 설명하는 미디어 기능을 지정하는 CSS 미디어 쿼리 문자열입니다. 이 경우 Google에서는 대개 휴대기기를 타겟팅하는 데 사용되는 미디어 쿼리를 사용합니다.
• href 속성은 대체 URL의 위치, 즉 m.example.com의 페이지를 지정합니다.

이러한 양방향 사이트 설정은 Googlebot이 콘텐츠를 찾고 Google 알고리즘이 데스크톱 페이지와 모바일 페이지 간의 관계를 이해하고 이에 맞게 처리하는 데 도움을 줍니다. 서로 다른 URL을 사용하여 다른 형식으로 같은 콘텐츠를 게재하면 사이트설정은 2개의 URL에 같은 콘텐츠가 있으며 2개가 아닌 하나의 요소로 처리되어야 한다는 사실을 Google 알고리즘에 알립니다. 페이지의 데스크톱 버전과 모바일 버전이 별도의 요소로 처리되면 데스크톱과 모바일 URL이 모두 데스크톱 검색 결과에 표시될 수 있으며 Google에서 2가지 관계를 알고 있는 경우에 비해 순위가 낮아질 수 있습니다. 또한 다음과 같이 이 설정에서 흔히 발견되는 몇 가지 실수에 유의하시기 바랍니다.

• rel=”alternate” 및 rel=”canonical” 마크업을 사용할 때는 모바일 페이지와 데스크톱 페이지 간 비율을 1:1로 유지해야 합니다. 특히 단일 모바일 페이지를 여러 데스크톱 페이지가 참조하도록 사이트설정을 수행해서는 안 되며 반대의 경우에도 마찬가지입니다.
• 리디렉션을 확인합니다. 실수로 데스크톱 페이지가 관련 없는 단일 모바일 페이지로 리디렉션되지 않는지 확인합니다.

자동 리디렉션

서로 다른 URL을 사용하여 데스크톱과 모바일 브라우저에 웹사이트를 게재하도록 설정하는 경우 웹마스터는 사용자가 웹사이트를 가장 잘 볼 수 있는 URL로 자동 리디렉션 하는 것이 좋습니다. 웹사이트에서 자동 리디렉션을 사용하는 경우 모든 Googlebot을 다른 사용자 에이전트처럼 처리하고 적절하게 리디렉션해야 합니다.

지원되는 리디렉션 기술

Googlebot은 다음과 같은 2가지 리디렉션 실행을 지원합니다. HTTP 리디렉션 / 자바스크립트 리디렉션

HTTP 리디렉션 사용

HTTP 리디렉션은 대개 클라이언트를 기기별 URL로 리디렉션하는 데 사용됩니다. 일반적으로 리디렉션은 HTTP 요청 헤더의 사용자 에이전트에 따라 수행됩니다. 페이지의 link rel=”alternate” 태그 또는 사이트맵에 지정된 대체 URL과 리디렉션의 일관성을 유지하는 것이 중요합니다.

이런 이유로 서버에서 HTTP 301 또는 302 중 어떤 상태 코드로 리디렉션 하는지는 중요하지 않지만 가능한 경우 302를 사용하는 것이 좋습니다.

자바스크립트 리디렉션

HTTP 리디렉션을 구현하기 어려운 경우 자바스크립트를 사용하여 link rel="alternate" 태그를 통해 가리키는 URL로 사용자를 리디렉션 할 수 있습니다. 이 기술을 사용하려면 먼저 페이지를 다운로드한 다음 자바스크립트를 파싱 하고 실행한 후 리디렉션을 실행해야 하기 때문에 리디렉션의 클라이언트 측에서 발생하는 지연에 대해 알고 있어야 합니다.

자바스크립트 기반 리디렉션 구현에는 다양한 방법이 있습니다. 예를 들어, 자바스크립트를 사용하여 사이트에서 이미 matchMedia() 자바스크립트 함수를 사용하는 페이지의 링크 사이트 설정에 사용하는 미디어 쿼리를 실행할 수 있습니다.

양방향 리디렉션 및 단방향 리디렉션

웹사이트는 저마다 다른 리디렉션 정책을 구현합니다. 어떤 웹사이트는 데스크톱 페이지를 방문하는 모바일 사용자만 모바일 페이지로 리디렉션 하고(‘단방향’ 리디렉션), 다른 웹사이트는 모바일 및 데스크톱 사용자가 페이지를 방문하는 경우 각각 데스크톱 사이트와 모바일 사이트로 리디렉션 합니다(‘양방향’ 리디렉션).

Googlebot의 경우 선호하는 정책이 없으므로 웹마스터가 사용자를 고려하여 리디렉션 정책을 결정하는 것이 좋습니다. 가장 중요한 것은 데스크톱 사이트 또는 모바일 사이트의 해당 콘텐츠로 일괄되고 올바르게 리디렉션 하는 것입니다. 설정이 잘못되면 일부 사용자가 콘텐츠를 전혀 보지 못할 수 있습니다.

또한 사용자에게 리디렉션 정책을 재정의할 수 있는 방법을 제공하는 것이 좋습니다. 즉 모바일 사용자가 원하는 대로 데스크톱 페이지를, 데스크톱 사용자도 원하는 경우 모바일 페이지를 볼 수 있도록 허용합니다.

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

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

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

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

1. Google Search Console의 robots.txt를 확인하고 테스트합니다.
2. 모바일 친화성 테스트로 모바일 페이지를 테스트하여 Google 시스템에서 내 웹사이트가 모바일 사용자에게 적합하다고 판단하는지 확인합니다.
3. 모바일 페이지에 별도의 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에 액세스 하는 데스크톱 사용자에게는 콘텐츠를 게재하고 모바일 사용자에게는 오류 페이지를 표시합니다.

최적의 사용자 환경을 제공하려면 사용자가 휴대기기에서 데스크톱 페이지에 방문하는 것을 인식하고 다른 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를 참조하여 페이지의 속도를 늦추는 문제가 있는지 확인하고 ‘속도’ 하위 섹션을 주의 깊게 읽어 보세요. ‘수정 필요’라고 표시된 문제를 해결합니다.

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

• 모바일 페이지 렌더링 시간을 1초 이내로 단축
• 모바일 웹 속도 향상
• 모바일에 최적화

표시 영역을 제대로 설정

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

– 고정 너비 표시 영역을 사용하는 경우 페이지가 모든 기기 크기에 맞게 잘 조정되지 않습니다(기기의 종류는 정말 다양합니다).

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

글꼴 크기가 작음

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

터치 요소가 너무 가까움

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