모바일 디자인을 위한 치트 시트: 반응형 디자인, 동적 검색 및 모바일 사이트

편집자 업데이트(2015년 7월): 2015 년 4월, Google은 모바일 검색 결과의 순위를 매기는 알고리즘에 대한 업데이트를 미리 발표했습니다. 웹사이트의 모바일 친화도는 모바일 검색 순위에 대한 확인된 순위 신호입니다. 다음 문서를 참고하여 웹사이트를 모바일 친화적으로 만드십시오.

우리 모두는 통계를 들었습니다. 2014년은 컴퓨터나 노트북보다 스마트폰으로 인터넷에 액세스하는 사람이 더 많은 해입니다. 모바일 디자인은 미래입니다. 사이트를 남겨두고 싶지는 않지만 점점 더 모바일화되는 인터넷을 위해 정확히 어떻게 프로그래밍합니까? 각각의 장점과 단점이 있는 세 가지 주요 옵션이 있습니다. 이 게시물에서는 모바일 준비 옵션을 분석하여 웹사이트 및 SEO 전략을 위한 최선의 경로를 선택하는 데 도움이 되도록 각 옵션의 장단점을 알려드리겠습니다.

옵션 1: 반응형 디자인

반응형 디자인은 미디어 쿼리를 사용하여 페이지가 표시되는 화면의 해상도를 결정한 다음 페이지의 크기와 레이아웃을 적절하게 조정합니다. Google은 반응형 웹 디자인을 선호한다고 밝혔으므로 이 토론에서 비중이 높습니다.

장점 :

1. 각 페이지에는 하나의 버전만 있습니다. 동일한 페이지가 이를 표시하는 장치 유형에 맞게 조정됩니다(장치 유형을 감지한 다음 이를 기반으로 다른 콘텐츠를 제공하는 대신). 모든 장치에서 동일한 HTML 및 URL을 사용하면 사이트 유지 관리가 간소화됩니다.
2. 반응형 디자인은 다른 두 옵션처럼 사용자 에이전트 감지에 의존하지 않습니다. 사용자 에이전트 감지(즉, 어떤 브라우저 또는 장치가 웹 페이지를 요청하는지 감지) 자체는 나쁘지 않지만 완벽하지 않으며 프로세스에 결함이 있는 경우 사용자에게 잘못된 버전의 사이트가 제공될 수 있습니다. 또한 이렇게 하면 검색 엔진 스파이더가 여러 다른 사용자 에이전트로 사이트를 크롤링하지 않아도 됩니다. 즉, 더 많은 사이트가 크롤링됩니다.
3. 반응형은 일반적으로 브라우저에서 더 빨리 로드됩니다. 모든 장치가 동일한 콘텐츠를 받기 때문에 요청 사용자 에이전트 감지 가능한 리디렉션 프로세스가 없습니다. 배고파서 스마트폰으로 맛있는 식당을 찾아본 사람이라면 누구나 속도가 중요하다는 것을 알고 있습니다.

단점:

1. 기존 사이트를 재설계하는 것은 길고 집중적인 프로세스일 수 있습니다. 따라서 사이트가 큰 경우 반응형으로 전환하는 것이 최선의 선택이 아닐 수 있습니다.
2. 사이트 레이아웃에 따라 모바일 화면에 콘텐츠를 꽉 채우는 것이 너무 어려울 수 있습니다. NYTimes.com과 같은 사이트는 콘텐츠를 한 페이지에 넣는 것보다 분할하는 것이 더 쉽기 때문에 별도의 모바일 사이트를 유지 관리합니다.
3. 탐색 요소의 크기가 항상 잘 조정되는 것은 아닙니다. 마우스 오버 요소는 터치 스크린에서 전혀 작동하지 않습니다. 따라서 반응형이 된다는 것은 탐색을 변경하는 것을 의미할 수 있습니다.
4. 반응형 디자인에서는 이미지가 많은 반응형 페이지가 더 느리게 로드되는 경우가 있었습니다. 나는 이것이 정상이 아니라는 점을 강조해야 하지만 실제로 일어난 일입니다.

반응형 디자인을 선택하는 경우 이미지를 최적화하고 사이트를 라이브로 푸시하기 전에 다양한 브라우저 및 장치에서 테스트(또는 우수한 사용자 에이전트 에뮬레이터 사용)해야 한다는 점을 염두에 두십시오.

옵션 2: 동적 게재

사용자 에이전트 "스니핑"이라고도 하는 동적 서비스는 두 가지 방법으로 수행할 수 있으며 구현하기 까다롭습니다. 실제로 Google은 동적 검색과 관련된 몇 가지 일반적인 실수에 대해 설명합니다. 이 기술이 하는 일은 방문자의 사용자 에이전트(즉, 방문자가 사이트를 보기 위해 사용하는 장치)를 감지한 다음 서버 수준에서 리디렉션하는 것 입니다. 동적 게재를 구현하는 한 가지 방법은 단방향 리디렉션 입니다. 이 경우 사이트에 대한 링크는 기본적으로 데스크톱 사이트로 연결되지만 휴대기기는 데스크톱 사이트에서 모바일 사이트로 리디렉션됩니다.

두 번째 유형인 양방향 리디렉션 은 데스크톱 및 모바일 사이트 모두에 코드가 있어 기기에 관계없이 모든 방문자에게 적절한 콘텐츠가 제공되도록 합니다. (이러한 코드 조각을 스위치보드 태그라고도 합니다.) 구현이란 모바일 사이트를 가리키는 데스크톱에 rel=”alternate” 태그를 추가하는 것을 의미합니다. 모바일 사이트에서 데스크톱 사이트를 가리키는 rel="canonical" 태그를 추가합니다.

장점:

1. 리디렉션은 서버 수준에서 수행되기 때문에 페이지당 하나의 URL만 필요합니다.
2. 동적 검색은 피처폰 에서도 잘 작동합니다. PCMag.com에서 정의한 피처폰은 "음성 통화 및 문자 메시지 외에 고정된 기능 집합을 포함하지만 스마트폰만큼 광범위하지는 않은 휴대폰"입니다. 예를 들어, 피처폰은 일반적으로 앱을 다운로드할 수 없지만 일반적으로 일부 웹 브라우징 기능이 있습니다. 구글에 따르면 가장 큰 차이점은 피처폰은 CSS를 처리할 수 없기 때문에 반응형 디자인을 잘 처리할 수 없다는 것입니다. 따라서 청중과 그들이 사용하는 모바일 장치 유형을 아는 것이 중요합니다.
3. 모바일 사용자를 위한 별도의 키워드 세트를 원하는 경우 모바일 사용자와 데스크톱 사용자가 각각 고유한 HTML을 보기 때문에 이 옵션을 사용하면 그렇게 할 수 있습니다. (Search Engine Land에는 모바일 전용 키워드에 대해 설명하는 훌륭한 기사가 있습니다.)

단점:

1. 동적 리디렉션은 별도의 SEO 프로젝트가 필요한 별도의 인덱싱된 HTML 세트와 함께 모바일용으로 별도의 사이트를 설정하기 때문에 사이트 유지 관리 작업을 두 배로 늘립니다.
2. 사용자 에이전트 문자열의 필수 목록은 새 모바일 장치가 출시될 때마다 새 문자열을 추가해야 하므로 지속적인 유지 관리가 필요합니다.
3. 마지막으로 사이트에서 콘텐츠를 동적으로 제공하는 경우 "Vary HTTP-User Agents" 헤더를 사용해야 합니다. 헤더는 콘텐츠가 제대로 제공되고 엔진이 콘텐츠를 적절하게 캐시하는 데 도움이 됩니다. Google은 이 헤더를 추가하는 방법에 대한 세부정보를 제공합니다.

옵션 3: 모바일 사이트

이름에서 알 수 있듯이 이 옵션에는 모바일 사용자를 위해 특별히 별도의 도메인을 만드는 작업이 포함됩니다. 가장 일반적인 예는 m.domain.com 또는 mobile.domain.com 입니다. 대형 소매업체에게 인기 있는 옵션입니다. Bridget Randolph는 "Quantcast 상위 100,000개 사이트에 선정된 웹사이트의 73%가 URL을 모바일 전용 URL로 리디렉션하는 것을 사용했습니다"라고 지적합니다. 동적 게재와 마찬가지로 이 기술에는 모바일 장치를 사용하는 방문자를 위한 콘텐츠 개발이 포함됩니다. 그러나 별도의 모바일 사이트의 URL은 고유하므로 서버 수준 리디렉션이 없습니다.

장점:

1. 페이지 수가 수십만 또는 수백만인 대규모 사이트의 경우 반응형 디자인을 구현하는 것은 너무 많은 작업일 수 있습니다. 모바일 사이트를 사용하면 사용자 경험을 맞춤화하고 고유한 모바일 경험을 천천히 구축할 수 있습니다.
2. 동적 게재와 마찬가지로 모바일 사이트는 반응형 디자인보다 피처폰에 더 적합합니다. 사이트의 인구 통계에 따라 기준이 아닐 수 있습니다. 그러나 일부 기업의 경우 중요한 고려 사항입니다.

단점 :

1. 모바일 사이트는 데스크톱 사이트가 구축한 긍정적인 백링크 프로필의 이점을 얻지 못합니다(양방향 리디렉션을 구현하지 않는 한). 따라서 모바일 사용자가 자연 검색에서 귀하를 찾도록 하려는 경우 이는 큰 어려움이 될 수 있습니다.
2. 모바일 사이트에는 추가 SEO 작업이 필요합니다. 별도의 XML 사이트맵을 Google 및 Bing 웹마스터 도구에 제출해야 합니다. 또한 작은 화면은 더 작은 SERP를 의미하므로 메타 태그를 편집해야 할 수도 있습니다. 모바일 전용 메타 태그는 데스크톱 사이트의 메타 태그보다 짧아야 합니다.

보시다시피, 콘텐츠는 모바일 장치에서 읽을 수 있도록 극적으로 재구성되고 축소되었습니다.

사이트에 대한 올바른 선택을 하기 위해 이 모든 정보를 검토할 때 얼마나 많은 방문자가 모바일 장치를 사용하여 사이트에 액세스하는지 자문해 보십시오. 분석을 확인하십시오. 모바일 트래픽의 총 비율이 5% 미만이면 모바일 디자인 구현을 기다릴 수 있습니다. 지금은. 예측이 맞다면 모바일 사용은 계속해서 더 많은 인터넷 트래픽을 요구할 것입니다.

속도와 모바일 SEO를 위해 페이지를 최적화하는 방법에 대한 정보는 다음 리소스부터 시작하는 것이 좋습니다.

• 올인원 모바일 SEO 및 디자인 체크리스트
• 7 모바일 친화적 탐색 모범 사례
• SEO 가이드: 모바일 SEO 및 UX 최적화
• 이미지 최적화: 모바일 UX를 개선하기 위해 할 수 있는 #1
• Google 개발자의 웹마스터 모바일 가이드