[시리즈001] 모바일 퍼스트 인덱스의 (Mobile First Indexing) 이해 01

[시리즈001]

모바일 퍼스트 인덱스의 (Mobile First Indexing) 이해 01
: SEO에 직접적으로 미치는 영향

(출저 : https://www.mobilemoxie.com/blog/understanding-mobile-first-indexing-13-immediate-impact-seo/)

 

 

 

안녕하세요!  IT아웃소싱 플랫폼 프리모아입니다.
SEO에 영향을 미치는 모바일 메인 화면에 대해 궁금하지 않으세요?

이 컨텐츠는 이미 모바일이 주가되고 있는 이 UI, UX 시장에서
최신 트렌드와 정보를 따라잡을 수 있도록
프리모아에서 야심차게 준비한 컨텐츠 입니다.

모바일 첫 화면에서 어떤 요소가 직접적으로, 오랜시간동안, 첫째되는 요소인지
차근차근 알아가 보도록 하겠습니다! ^0^

 

 

 

 

 

 

 

서론

─

 

구글이 발표한 모바일 퍼스트 인덱스 (Mobile-First Indexing)는 커다란 반향을 불러일으켰고,
아직까지는 그 누구도 이것에 대한 우려는 하지 않고 있는 것으로 보입니다.
이는 구글이 1년 정도 기업 전반에 걸쳐 다양한 ‘모바일 퍼스트’ 도입에 대한 많은 장점을 어필했기 때문이기도 하지만,
구글이 런칭 업데이트, 혹은 최소한 ‘모바일’ 업데이트에 대한 과정을 변화시켜 왔기 때문일 것인데요,
만일 최근 일어난 일들이 미래를 알 수 있는 지표라고 한다면,
구글의 새로운 프로세스는 다음과 같으리라 예상합니다.

 

• 변화에 대해 미리 공개적으로 공지한다 (때에 따라 일정과 기한까지도 공개 가능)
•  (몰아서 한 번에 하기 보다는) 순위를 서서히 조정한다
• 필요 시 조정 및 관련 업데이트에 관해 미리 공지한다

 

이 패턴은 모바일 친화적 업데이트 (Mobilegeddon)로 시작하여 앱 사이의 연계적 변화,
HTTPS, 딥 링크 및 AMP에 대한 다양한 공지로 이어졌습니다.

 

이 새로운 전략은 기계 학습이 알고리즘적 평가에 미치는 영향 때문일 가능성이 크지만,
SEO가 얻게 되는 가장 큰 이점은 알고리즘의 변화가 실행된 직후에도 더 이상 순위에 크게 영향을 미치지 않는다는 것입니다.
이렇게 서서히 일어나는 변화로 인해 사람들은 최근에 있었던 많은 업데이트들의 영향이 너무 적다고 비난했지만 시간이 지나면서 이 모든 변화들은 사실 꽤 만족스러웠다는 것이 입증되었습니다.
모바일 퍼스트 인덱스로의 변화도 예외는 아닙니다.

본 기사는 구글의 모바일 퍼스트 인덱스가 SEO 전략과 베스트 프랙티스 (Best Practice)에 미치게 될 장단기적 영향을 이해하는 데 도움을 주고자 쓴 3개의 기사 중 하나입니다.
이 글에서는 먼저 모바일 인덱스에 관한 역사를 간략히 알아본 후,
SEO가 어떻게 기존의 사이트를 모바일 퍼스트 인덱스에 맞추어 만들어낼 수 있는지에 대해 설명할 것입니다.

두 번째 글에서는 모바일 퍼스트 인덱스가 URL과 해당 컨텐츠 간에 만들어내는 거리, 구글 클라우드에서 컨텐츠를 호스트하기 위해 급증하는 수요, 그리고 앞으로 이러한 개념들이 웹에 있어 전체적으로 미치게 될 영향에 대해 논의해 볼 것입니다.

이 시리즈의 마지막 글에서는 구글이 선천적인 모바일 퍼스트라고 간주하는 다양한 개발 옵션들과 언제 이들이 사용되어야 하는지, 그리고 이 모든 것들을 아우를 수 있는 더욱 큰 주제들이 무엇인지에 대해 다룰 것입니다.

 

 

 

 

 

 

 

모바일 SEO 및 모바일 인덱스의 간략한 역사

─
 

 

Thanks to Peter Campbell for the awesome image. http://www.petecampbell.com/seo/mobile-seo-guide/

 

구글은 역사적으로 다양한 모바일 인덱스와 모바일 크롤러 (mobile crawler)로 인해 어려움을 겪었습니다. 간단히 설명하자면, 구글은 모바일 전용 WAP 사이트의 시기 모바일 전용 인덱스를 가지고 있었는데 모바일 사이트 디자인에 일반적으로 색과 이미지가 적용되자마자 모바일 검색 결과는 모바일과 데스크탑 페이지를 모두 포함하게 되었습니다.

모바일 ‘닷컴’ 서브도메인 (subdomain)이 인기를 끌었을 시기, 모바일 페이지들은 ‘사용자-에이전트 탐색 및 전향’ (User-Agent Detection & Redirection) 이라고 불리는 한 종류의 서버 세팅에 의해 결정된 데스크탑 페이지에 대한 관련성을 기반으로 인덱스 되었습니다.

사이트맵이 모바일 URL과 함께 나오거나 누군가 적극적으로 데스트탑 페이지에서 모바일 전용 페이지로 링크를 걸지 않는 한, 구글로서는 해당되는 데스크탑 페이지에 연관된 모바일 페이지들을 찾고 배열하는 데에 어려움을 겪었습니다.
알고리즘적으로는 정확히 동일한 컨텐츠로 보여짐에도 불구하고 모바일 컨텐츠가 그보다 더욱 오래되고 긍정적인 SEO 순위 시그널을 가진 데스크탑 컨텐츠를 종종 순위 밖으로 밀어냈기 때문에, 구글은 언제 모바일 페이지들의 순위를 매겨야 하는지 정하기가 어려웠습니다.
 

 

 

적합한 사용자 에이전트 탐색 및 전향에 대한 구글의 다이어그램
: https://developers.google.com/webmasters/mobile-sites/mobile-seo/common-mistakes

 

 

이 문제를 해결하기 위해서, 구글은 웹마스터들에게 데스크탑 페이지가 대체 모바일 버전을 가지고 있을 시에는 ‘rel=alternate’ 와  ‘rel=canonical’ 링크를 두 가지 페이지의 HTML에 모두 추가하여 나타내도록 권장했습니다. 데스크탑 페이지의 ‘rel=alternate’ 태그가 인덱스되어 모바일 크롤러가 태그에 나타나 있는 모바일 버전의 페이지를 방문하기 때문에, 이 페이지도 또한 크롤링되고 인덱스될 수 있는것이죠.
이 모바일 버전의 페이지는 동일한 컨텐츠라고 간주되지 않으며, 데스크탑 버전의 페이지에 링크되어 있는 ‘rel=canonical’ 태그를 사용하여 자신의 SEO 가치를 데스크탑 페이지에 넘기게 되는 것입니다.

 

이러한 과정은 에러가 자주 나고 많은 공수를 필요로 했기 때문에, 이 문제를 최소화하기 위해 구글은 웹마스터들에게 그들의 웹사이트를 반응형 디자인 (Responsive Design)으로 업데이트할 것을 적극적으로 권장했습니다.
이 지침이 하나의 반응형 웹사이트가 모바일과 데스크탑 디바이스에서 모두 가능하도록 만들어졌기 때문에, 구글은 모바일 전용 크롤러의 사용을 중단하고 스마트폰과 같은 모든 것 (데스크탑과 모바일 컨텐츠 모두) 크롤링하기 시작했습니다. (이 시점에서 크롤링은 모바일이나, 인덱싱은 여전히 이전의 데스크탑 표준을 기반으로 했습니다.) 반응형 디자인은 크롤링과 인덱싱의 복잡성에 관한 문제를 어느정도 해결했지만, 이로 인해 새로운 문제들도 생겨나게 되었죠.

 

하나의 URL로 컨텐츠를 서로 다른 다양한 스크린 사이즈에 맞추기 위해 CSS 미디어 쿼리 (CSS media queries)와 자바 스크립트를 (JavaScript) 사용하면 대부분의 웹사이트가 급격히 느려지게 됩니다.
특히 모바일 폰에서는HTML에 포함된 다양한 종류의 컨텐츠들을 위한 서버에 많은 수의 왕복 리퀘스트가 있기 때문에 더욱 그렇습니다.

이후 구글은 모바일 SEO와 스피드에 관한 개발 지침에 집중하여 웹마스터들이 강력한 크리티컬 패스 렌더링 (Critical Path Rendering)으로 깔끔하고 효율적인 사이트를 만들어내도록 가르치고 설득하고자 합니다. (크리티컬 패스 렌더링이란 출력 시간을 최적화하기 위해 내부 및 외부 페이지 요소들을 전략적으로 나열하는 것을 뜻합니다.)
이는 더딘 모바일 네트워크 상황에서도 사이트가 더욱 빠르고 활용성을 가질 수 있도록 돕고자 하기 위함이었으나, 반응형 디자인이 표준적인 요구조건이 되어감에 따라 결국 구글은 지속적인 크리티컬 패스 렌더링이 대부분의 웹마스터들과 숙련된 개발팀에게는 미칠 수 없는 범위임을 깨달았다. 페이지들을 반응형으로 만들기 위해 추가해야 하는 요소들에 필요한 모든 코드들로 인해 페이지들이 더욱 커지고 느려져 버렸던 것입니다.

 

 

 

 
웹사이트와 웹 앱의 차이점 Thanks to Louis Holzman for the Illustration showing the difference 
: https://www.linkedin.com/pulse/web-application-vs-website-whats-difference-louis-holzman

 

 

웹사이트: 정적인 페이지 (모든 사용자가 같은 정보를 본다
웹 앱: 역동적 페이지 (모든 사용자가 그들이 어떤 인풋 (input)을 하느냐에 따라 다른 정보를 본다

시간이 흐르면서, 구글은 크리티컬 패스 렌더링이 강력하게 적용될 때조차 반응형 디자인 페이지의 모바일 및 데스크탑 렌더링은 여전히 극심한 캐시와 (caching) 압축 문제로 어려움을 겪는다는 사실, 그리고 이것이 종종 CND (컨텐츠 전송 네트워크, Content Distribution Network)으로 인해 발생된다는 사실도 발견했습니다. SEO 및 개발 팀들은 이러한 캐시 및 압축 문제를 해결하는 데 어려움을 겪었으며 몇몇 문제는 너무도 심각한 나머지 모든 크리티컬 패스 렌더링 작업을 거의 무용지물로 만들어버리기도 했습니다. 몇몇의 똑똑한 웹마스터들은 발전된 형태의 렌더링 프로토콜을 사용하여 더 일을 빠르게 진행시키기 시작했지만 (프리 캐시/pre-cache, 프리페치/pre-fetch, 프리렌더/pre-render), 대부분의 웹마스터들은 그저 더욱 느려지기만 하는 웹사이트들을 만들어냈습니다.

 

오늘날의 사용자들은 더욱 빠른 네이티브 앱 (native app)과 동일하게 보이고 실행되는 굉장한 속도의 웹사이트를 원하고 있습니다. 그들은 ‘모바일 웹 사이트’가 아닌 ‘모바일 웹 앱’을 원하는 것입니다. 이러한 웹사이트를 더욱 앱과 같이 느껴지게 만드는 자바스크립트로 인해 사이트의 로딩에는 더욱 많은 시간이 걸리기 때문에, 이러한 수요는 개발자들에게 커다란 제한 요인이 되었습니다. 몇 가지 코드를 줄이기 위해, 웹마스터들은 선택적 서빙과 (selective serving) 프로그레시브 렌더링 (progressive rendering)을 택하여 사용자에 의해 요구될 때까지 페이지 컨텐츠가 서버에 남도록 하고 있습니다. 자바스크립트와 HTML5는 서버로부터 컨텐츠를 요구하기 위해 사용되지만 필요시에만 검색된다. 이는 사이트 로딩 시간을 줄이는데 일조하지만, 이러한 프레임워크는 특별한 컨텐츠가 특별한 URL을 가지는 것을 요구하지 않기 때문에 SEO에 대해 지나치게 신경쓰지 않는 채 만들어진 모바일 웹 앱은 구글이 인덱스하기 굉장히 어려울 수도 있습니다. 바로 이러한 모든 복잡한 요소들의 상호 작용이 모바일 퍼스트 인덱스에 대한 필요성을 만들어 낸 것입니다.

 

 

여기까지 모바일 SEO 및 모바일 인덱스의 간략한 역사에 대해 알아보았습니다.
계속해서 모바일 퍼스트 인덱스의 (Mobile First Indexing) 이해에 관한 두번째 포스팅이 게시될 예정입니다.

많은 기대 부탁드립니다!

 

모바일웹/앱을 만들고 싶으세요?

‘프리모아’를 통해 전문 개발자와 디자이너를 만나보세요!

프리모아는 항상 귀하의 프로젝트를 기다리고 있답니다!