별도 URL

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

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

별도의 모바일 URL은 다른 URL에서 다른 코드를 데스크톱과 휴대기기 그리고 태블릿에도 게재합니다.

요약

  • rel="canonical" 및 rel="alternate" 요소로 <link> 태그를 지정하여 두 URL 간의 관계를 알립니다.

  • 사용자 에이전트 문자열을 감지하고 적절하게 리디렉션합니다.

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

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

  1. 데스크톱 페이지에 해당 모바일 URL을 가리키는 특별한 link rel=”alternate” 태그를 추가합니다. 이렇게 하면 Googlebot이 사이트의 모바일 페이지 위치를 찾을 수 있습니다.
  2. 모바일 페이지에 해당 데스크톱 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의 경우 선호하는 정책이 없으므로 웹마스터가 사용자를 고려하여 리디렉션 정책을 결정하는 것이 좋습니다. 가장 중요한 것은 데스크톱 사이트 또는 모바일 사이트의 해당 콘텐츠로 일괄되고 올바르게 리디렉션하는 것입니다. 설정이 잘못되면 일부 사용자가 콘텐츠를 전혀 보지 못할 수 있습니다.

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

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