【보존판】구글 모바일 검색엔진최적화 모바일SEO 바이블 소개

 google mobile seo guide cover

Q: 모바일 검색엔진최적화를 적용하고자 합니다만, 정리된 자료가 없을까요?

A: 구글에서 나온 구글모바일검색엔진최적화 자료가 온라인에 게재되어있습니다. URL과, 상세 내용을 설명 드립니다.

한국의 경우 모바일이 웹의 대세로 자리잡았고, 글로벌로도 모바일을 중심으로 웹의 중심축이 많이 이동했습니다. 
특히 4월의 모바일 프렌들리 알고리즘의 적용으로(실제로 커다란 변화는 체감하지 못했지만)인해 모바일 사이트에 대한 대응도 상당부분 진전이 있었을 것입니다. 

모든 사이트가 모바일을 필요로 하지만, 그중에 특히 더 필요한 분야가 바로 쇼핑몰 EC사이트 계열이라고 생각합니다. 
매출이 PC 에서 모바일로 이동하여, 쇼핑몰을 진행하시는 분들은 이미 모바일사이트가 기본이라고 생각하고 있지요. 

이렇게 중요한 모바일사이트 이지만, 검색엔진최적화 부분에서는 아직 대응이 미흡한 것이 현실입니다.
특히 한국의 웹현황을 볼때, PC도 제대로 방향을 잡지 못하고 있는데, 이제 모바일까지 최적화를 한다고 하니 더욱 큰 일이 아닐수 없습니다. 
다행히 한국은 구글 위주의 마케팅보다 네이버위주의 마케팅(트래픽이 많기때문)이 주를 이루고 있기 때문에 로컬 비지니스를 하시는 분들은 상관없겠지만,
글로벌 EC를 운영하시는 분들이라면 필히 알아두어야 하는 것이 모바일 검색엔진최적화라고 생각합니다. 

몇달전 정보를 리서치 하던중, 아주 중요한 자료를 구글에서 만들어 놓았기 때문에 공유를 하려고 합니다.
정보는 아주 알기쉽게 정리되어있어 초보자라도 어느정도 이해 할 수 있을것 같습니다만, 몇가지 추가 내용을 덧붙여 글을 작성합니다. 
모바일 검색엔진최적화를 필요로 하시는 분들과, 사이트를 막 제작하려고 하시는 분들에게 도움이 많이 되었으면 합니다. 

자료의 출처 구글자료 : https://goo.gl/D9nvyd

모바일 검색엔진최적화 가이드 라인

google mobile seo guide 0001

 google mobile seo guide 0002

홈페이지를 접속하게 되면 상기와 같은 내용이 나옵니다. 

모바일 설정 선택 / 모바일 사이트 타입 / 흔히 발견되는 실수 / 다른기기용 설정

이부분에서 필요한 부분만을 설명드립니다.  나머지 부분은 상기 가이드라인을 직접 참고 바랍니다.

모바일 검색엔진최적화의 배경

모바일의 랭킹 알고리즘은 PC검색결과의 랭킹을 기반으로, 그 결과값을 모바일에 반영하는 구조입니다.  여기에 더해 최근에는 모바일사이트의 로딩속도및 유저빌리티에 대한 대응이 잘못될 경우 모바일의 순위만 낮추는 알고리즘이 적용되고 있습니다.  
따라서 PC의 사이트와 모바일 사이트를 연동하는 테그들의 셋팅이 잘 되어 있어야 합니다. 그리고  PC의 각페이지와 모바일의 각 페이지가 1:1 대응되는 것을 구글이 잘 파악할 수 있도록 셋팅해 두어야 한다는 점입니다.
그 테그는 구체적으로 Canonical 테그, 타이틀, 메타디스크립션, 메타 키워드, alternate, 등의 테그 및 메타뷰포트, vary http등 입니다. 
이점을 기억하고 하기의 내용을 이해 하여야 합니다. 

모바일 검색엔진최적화는 어려울 것이 없습니다. 먼저 이 글을 따라 흐름을 이해한 후 메뉴얼을 보시면 더 이해에 도움이 될것 입니다.

1) 현재 자신의 PC와 모바일 사이트를 새로 구축하려는 경우
2) 현재 자신의 PC사이트가 있는데, 모바일 사이트먼 구축할 경우

크게는 이 2개의 부분으로 압축 될 것 같습니다. 

사이트를 새로 구축할 때 필요한 최적화

먼저 1)번 에 대한 설명을 드립니다.

사이트의 URL 유형을 결정해야 합니다.
a.반응형 웹 디자인(리스폰시브웹,레스웹) / b.동적 게재 /c. 별도 URL 의 3가지 형태 입니다. 

쉽게 예기하면  URL의 형태가

a,b는(URL형태가 동일) PC : www.abcde.com  모바일 : www.abcde.com  의 형태이고,
c는(URL형태가 동일하지 않음) PC : www.abcde.com  모바일 : m.abcde.com OR www.abcde.com/m/
이렇게 PC와 모바일의 URL에 따라 각기 다른 셋팅방법이 있기 때문에, 구글에서 추천하는 셋팅을 진행하면 됩니다.  

  참고로, 검색상위노출에서 구글은 a,b,c의 타입에 의한 검색노출 차등을 두지 않기 때문에, 선택하고자 하는 형태의 타입으로 진행하시면 됩니다. 

사이트를 새로 구축하시는 분들은 a,b의 형태를 추천 드립니다.

캐노니칼 태그 :  a,b,c에 모두 적용해야 합니다. a,b의 경우 URL이 동일하기 때문에 PC와 모바일 사이트에 동일한 캐노니칼 테그가 <link rel=”canonical” href=”URL”>들어가고, c의 경우에는 URL이 다르므로 2개의 URL중 PC URL을 넣은 캐노니칼테그를 PC와 모바일 페이지모두에 적용하되 1:1 페이지로 적용해 주어야 합니다.  <link rel=”canonical” href=”PC URL“>    ※주의:캐노니컬 태그는 전페이지에 동일한 URL로 넣는것은 절대 해서는 안됩니다.

리스폰시브 웹 : 동일한 URL이기 때문에 접속하는 유저에이전트를 확인하여 PC와 모바일 사이트에 대한 피드백을 주게 됩니다. 이때 a(레스폰시브웹) 의 설정방법은 https://goo.gl/XojrRB 서 참고 바랍니다.  반응형 웹 디자인(RWD)은 서버가 항상 모든 기기에 동일한 HTML 코드를 보내어 CSS를 사용해 기기의 페이지 렌더링을 조정하는 설정이기 때문에, <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> 를 셋팅해 두면 됩니다. 


동적게재 : 동적 게재는 페이지를 요청하는 user-agent에 따라 동일한 URL에서 서버가 다른 HTML(및 CSS)로 응답하는 설정입니다.

리스폰시브웹과, 동적게재는 조금 혼동하기 쉽습니다. 이유는 URL이 같기 때문입니다. 하지만 작동 방법이 달라 구글에서 PC봇과 모바일봇이 크롤링하러 올때 서버 셋팅이 잘 되어있지 못하면 혼동이 생길수 있습니다. 
리스폰시브 웹은 메타뷰포트 Meta view port 셋팅을 해두어야 합니다.
동적게재의 경우, Vary HTTP 헤더는 다음과 같이 요청에 대한 서버 응답을 Vary:User-Agent로 셋팅해 둡니다. 그예는 하기와 같습니다.

GET /page-1 HTTP/1.1
Host: www.example.com
(...rest of HTTP request headers...)

HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(... rest of HTTP response headers...)

이렇게 해둠으로서 동적게재의 사이트에는 모바일 크롤러가 오더라도 , 제대로된 모바일 HTML소스를 건네주게 되고 구글이 사이트를 제대로 색인해 갈 수 있게 됩니다. (상세 사항은 https://goo.gl/uu2Wer를 참고)

해당페이지의 Vary user agent 설정을 확인하는 방법은 하기와 같습니다. 
크롬에서 해당페이지를 접속후, 마우스 우클릭 > 요소검사 > 메인페이지를 클릭 (하기의 경우, home/ 부분) > 메뉴의 “Headers” 를 클릭 > response headers 부분에 Vary : User-Agent 항목을 확인
이부분이 보통 Vary: Accept-Encoding 로 되어있는 경우도 많이 있으나, 서버 셋팅에서 이것을 User-Agent 로 변경하면 됩니다. 

google mobile seo guide 0007

 

PC사이트가 있는데 모바일을 구축하고자 하는경우

2)의 경우 보통 c형태를 진행하는 경우가 많습니다. 왜냐하면 모바일을 염두해두고 사이트를 구축하지 않은 관계로, 새로운 URL에 새로운 모바일 사이트를 만들어 DB를 연동하는 방법을 일반적으로 선택하기 때문입니다.
물론 레스폰시브로 한다면 더 좋습니다. (사이트 URL 타입의 상호간에 우열이 있는것은 아님, 개발 및 셋팅에서 좀더 심플하기 때문임)

이때는 동일한 사이트가 URL이 다르기 때문에, 최적화 이슈는 바로 URL에 들어가는 Canonical  Alternate 테그의 배치가 중요합니다.
이것을 통해 구글에 이 사이트의 PC와 모바일에 페이지별고 1:1매칭을 시킬수 있게 됩니다. 그러면 구글 검색에서의  PC의 순위에 해당하는 모바일페이지를 모바일 검색자에게 노출시킬 수 있습니다.   

데스크톱과 모바일 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" >
<link rel="canonical" href="http://www.example.com/page-1" >

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

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

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

상세 설정 내용 :  https://goo.gl/5JXC2k

여기서 캐노니칼의 역할은  PC와 모바일 두개 페이지중 원본은 PC URL임을 알려줍니다.  
얼터네이트는 PC사이트에서 이 페이지에 해당하는 모바일 페이지는 이URL입니다 라는 신호입니다.
따라서 PC->모바일 URL을 가리키고, 모바일에서 캐노니칼은 PC URL이 원본이라는 신호를 보내고 있으며 이것이 서로 맞아 떨어지기 때문에 구글은 PC와 모바일의 페이지를 잘 인식 할 수 있게 됩니다.  
(전페이지의 캐노니칼테그가 동일한 URL로 들어갈 경우, 모든페이지가 메인페이와 동일한 페이지입니다라는 시그널이므로 잘못되어도 한참 잘못된 셋팅이 되어버리는 것입니다. ) 

 

요약 

1. PC와 모바일에 대한 URL의 차이로 인해, 구글에게 PC의 각 URL에 해당하는 모바일페이지의 URL을 정확히 인지 시켜야 합니다.(캐노니칼 셋팅)
2. 구글봇이 사이트를 잘 색인 하고 이해 할 수 있도록 서버셋팅과 사이트 셋팅시 오류 없이 올바른 정보를 제공하도록 설정해야 합니다.  (메타뷰포트, Vary Http헤더, 캐노니칼,얼더네이트) 

이것이 모바일 검색엔진 최적화의 2개의 큰축 입니다.  구글의 자료가 정말 쉽게 작성된 자료이므로 모바일 검색엔진최적화에 많은 도움이 될 것입니다. 

해외검색엔진최적화 문의 >>

출처 : https://developers.google.com/webmasters/mobile-sites/mobile-seo/?hl=ko
상기의 이미지및 일부 내용은 구글 디벨로퍼 모바일사이트 최적화 가이드에서 인용함.

Summary
Reviewer
RYU
Review Date
Reviewed Item
모바일 검색엔진최적화를 이해하는데 좀더 참고 할 수 있었습니다.
Author Rating
5
Please follow and like us:

Social media & sharing icons powered by UltimatelySocial
RSS
Facebook
Facebook
Google+
Google+
http://www.aun-korea.com/%E3%80%90%EB%B3%B4%EC%A1%B4%ED%8C%90%E3%80%91%EA%B5%AC%EA%B8%80-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EA%B2%80%EC%83%89%EC%97%94%EC%A7%84%EC%B5%9C%EC%A0%81%ED%99%94-%EB%B0%94%EC%9D%B4%EB%B8%94-%EC%86%8C/">
SHARE
YouTube
YouTube
NaverPost
NaverBlog