다른 기기용 모바일 검색엔진 최적화

태블릿

모바일 사용자를 위한 웹사이트 설정 방법을 구상할 때는 흔히 태블릿 기기를 사용하여 사이트에 액세스하는 방문자도 고려하게 됩니다. Google에서는 검색 엔진에 친화적이며 태블릿에 최적화된 웹사이트 구축을 위한 구체적인 권장사항을 제시하지는 않지만 데스크톱, 스마트폰, 태블릿 사용자에게 게재되는 웹사이트 구축을 위한 몇 가지 도움말을 제공합니다.

반응형 웹 디자인

가능하면 반응형 웹 디자인을 사용하는 것이 좋습니다. 즉, 웹사이트 서버는 모든 기기에 동일한 HTML 코드를 다른 CSS 스타일 규칙과 함께 게재하여 데스크톱과 스마트폰, 태블릿에서 사이트의 인터페이스를 최적화합니다.

웹사이트에서 반응형 웹 디자인을 사용한다면 스마트폰처럼 태블릿도 크기와 화면 해상도가 다양하다는 점을 고려하여 다양한 태블릿에서 렌더링이 제대로 되는지 테스트해야 합니다.

기기별 콘텐츠

웹사이트는 기기에 따라 다른 페이지(다른 HTML, CSS, 자바스크립트 등)를 표시할 수 있습니다. 이러한 페이지는 동일한 URL에 게재(동적 게재)되거나 별도의 전용 URL에 게재될 수 있습니다.

웹사이트에 데스크톱과 스마트폰 사용자에게 게재할 페이지는 있으나 태블릿 사용자를 위한 페이지가 없는 경우 Google의 경험에 비춰볼 때 태블릿 사용자는 대개 스마트폰 페이지가 아닌 데스크톱 사이트가 표시될 거라고 예상합니다.

태블릿에 최적화된 사이트가 웹사이트에 있는 경우 사이트 설정에 도움을 받을 수 있는 다음 가이드라인을 참조하세요.

  • 동적 게재: 사용자 에이전트에 따라 다른 HTML(및 CSS)을 게재하여 데스크톱, 스마트폰, 태블릿 사용자에게 동일한 URL을 게재합니다. 스마트폰 웹사이트 권장사항에 설명된 대로 Vary HTTP 헤더를 사용하는 것이 좋습니다.
  • 별도의 태블릿 전용 URL: 이 경우 Googlebot이 태블릿 URL을 크롤링하도록 허용하고 각 태블릿 URL에 rel="canonical"을 사용하여 해당하는 데스크톱 URL을 가리키도록 하는 것이 좋습니다.

피처폰

스마트폰 사용자에게 게재되는 사이트는 가능하면 반응형 웹 디자인을 사용하는 것이 좋습니다. 하지만 피처폰에는 CSS 미디어 쿼리를 따를 수 있는 기능이 없기 때문에 피처폰을 지원하려는 웹마스터는 동적 게재 또는 별도 URL 중 하나를 사용하여 피처폰에 콘텐츠를 게재하도록 설정해야 합니다.

또한 피처폰을 대상으로 하는 모든 페이지에 아래에 설명된 것처럼 <link rel="alternate" media="handheld"> 태그를 삽입하는 것이 좋습니다.

이 섹션에서는 이러한 각각의 설정을 구현하는 방법을 설명합니다.

동적 게재

서로 다른 기기에 게재되는 동일한 URL에 피처폰에 최적화된 콘텐츠를 동적으로 게재하도록 서버를 설정할 때는 스마트폰에 게재할 때와 동일한 구현을 사용합니다. 서버에 'Vary: User-Agent' HTTP 응답 헤더를 포함하고 사용자 에이전트 감지 관련 일반적인 문제점에 유의합니다. 또한 페이지에 다음 태그를 포함하시기 바랍니다.

<link rel="alternate" media="handheld" href="[current page URL]" />

별도 URL

웹마스터가 데스크톱, 스마트폰, 피처폰 사용자에게 다른 URL을 게재할 때에는 지원되는 설정이 3가지 있습니다. 이 설정에서는 이전에 피처폰 및 스마트폰에 최적화된 사이트를 구축하는 방법과 관련하여 설명한 사이트설정을 사용합니다.

전용 URL 설정

이 설정은 다음과 같이 구성됩니다.

  • http://www.example.com/page-1은 데스크톱 사용자에게 게재
  • http://m.example.com/page-1은 스마트폰 사용자에게 게재
  • http://phone.example.com/page-1은 피처폰 사용자에게 게재

이 설정에서는 다음과 같은 사이트설정을 추가하여 Google 알고리즘이 각기 다른 기기를 타겟팅하는 관련 페이지 간의 관계를 이해할 수 있도록 하는 것이 좋습니다.

www.example.com/page-1 페이지에 다음 사이트설정 추가:

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

m.example.com/page-1 페이지에 다음 사이트설정 추가:

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

phone.example.com/page-1 페이지에 다음 사이트설정 추가:

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

데스크톱 및 모든 모바일 URL 설정

이 설정을 이용하면 하나의 URL에서 웹사이트가 데스크톱 기기에 게재되고 별도 URL에서 모든 휴대기기(예: 스마트폰 및 피처폰)에 게재됩니다. 예를 들면 다음과 같습니다.

  • http://www.example.com/page-1은 데스크톱 사용자에게 게재
  • http://m.example.com/page-1은 스마트폰 및 피처폰 사용자에게 게재

이 경우 http://www.example.com/page-1 페이지의 사이트설정은 다음과 같습니다.

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

m.example.com 페이지에 다음 사이트설정 포함:

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

피처폰 페이지든 스마트폰 페이지든 관계없이 rel="canonical"을 포함해야 합니다.

서버는 응답에 HTTP Vary: User-Agent 헤더를 포함해야 합니다. 이렇게 하면 인터넷 캐시와 Googlebot에 서버의 응답이 사용자 에이전트에 따라 다를 수 있다는 신호를 보냅니다. Googlebot은 크롤링할 때 이 신호를 사용합니다.

별도 피처폰 URL 설정

이 설정을 사용하면 웹사이트는 반응형 웹 디자인 또는 동적 게재를 사용하여 하나의 URL에서 데스크톱과 스마트폰에 게재되며 피처폰은 별도 URL에서 게재됩니다. 예를 들면 다음과 같습니다.

  • http://www.example.com/page-1은 데스크톱 및 스마트폰 사용자에게 게재
  • http://m.example.com/page-1은 피처폰 사용자에게 게재

이 경우 http://www.example.com/page-1 페이지의 사이트설정은 다음과 같습니다.

<link rel="alternate" media="handheld" href="http://m.example.com/page-1" />

또한 http://m.example.com/page-1에서는 다음과 같습니다.

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

리디렉션 및 HTTP Vary 헤더

사이트에서 데스크톱 사이트를 방문하는 모바일 방문자를 모바일 사이트로 자동 리디렉션하거나 또는 그 반대로 리디렉션하는 경우 Vary HTTP 헤더를 포함하도록 서버를 설정해야 합니다.

사이트맵

피처폰 사이트맵을 사용하고 스마트폰 대체 URL용 사이트맵은 변경하지 않는 것이 좋습니다.

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