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

 

[시리즈001]

모바일 퍼스트 인덱스의 이해 08
(Mobile First Indexing)

: SEO를 위한 구글의 모바일 퍼스트 구조 옵션

 (본 포스팅은 Understanding Mobile-First Indexing (3/3) 의 기사를 바탕으로 작성되었습니다.)

 

 

 

 

웹을 위한 모바일 퍼스트 인덱스 옵션

 

앞 포스팅에서 다뤘던 내용처럼 인덱스의 전제 조건으로서의 URL이 사라진다는 변화와 함께,
어떻게 SEO를 염두에 둔 채 개발에 집중해야 하는지 알아내는 것은 굉장히 어려운 일입니다.

 

1년 전쯤,
구글은 모바일 퍼스트 인덱스에 꽤 적합한 새로운 모바일 사이트 개발 옵션들을 소개하고 권장하였는데,
이 옵션들은 피드와 API, 구글 호스팅에 특히 많이 의존합니다.

 

구글은 이러한 옵션들이 알고리즘적으로 선호되는 것은 전혀 아니라고 주장하지만,
이 옵션들은 이미 모바일 검색 결과에서 우선순위를 가지는 것으로 보입니다.

 

 

 

 

구글이 더 명확한 정보를 제공하기 전까지는
SEO에 있어서 실질적인 모바일 퍼스트 옵션으로서
프로그레시브 웹 앱스 (PWA), 프로그레시브 웹 AMP 페이지 (PWAMP), 구글 마이 비지니스 랜딩 페이지 (Google My Business) 그리고 구글 어시스턴트 액션 (Google Assistant Actions) 과 같은 전략을 고려해 보아야 할 것입니다.

 

이들에 대한 세부사항은 아래와 같습니다:

 

 

> 프로그레시브 웹 앱스 :

간단히 PWA라고 불리는 이것은
네이티브 앱과 같이 구동되는 HTML5와 자바스크립트로 무장된 웹 앱입니다.

이들은 웹 URL에서도 사용가능할 뿐 아니라,
네이티브 앱과 같이 모바일 홈 스크린에 다운받을 수도, 혹은 추가될 수도 있습니다.

사용자가 이 앱을 ‘다운로드’ 받을 시 그들이 사실상 다운로드 받는 것은 ‘앱 매니페스트 (App Manifest)’라는 앱 메타데이터를 위한 파일과 서비스워커 (ServiceWorker)라 불리는 파일입니다.

실행 시에는 서비스워커가 더욱 빠른 프레젠테이션과 매끄럽고 앱과 같은 UX를 위해 컨텐츠를 캐쉬하고 (cache) 환경을 설정하지만, 현실에서 서비스 워커는 두가지 부분으로 나뉩니다.

바로 캐쉬API (Cache API)를 사용하여 미리 캐쉬하기 위한 PWA 디스플레이의 탬플릿과 실행을 조정하는 앱 쉘 (앱의 겉부분), 그리고 인덱스드DB API (IndexedDB API)라 불리며 폰의 저장공간에 데이터베이스 컨텐츠의 요소 중 어떤 것이 캐쉬되어야 하는지 조정하는 부분입니다.

 

 

 

오직 특정한 텍스트, 이미지, 그리고 구조 데이터 관계만이 오프라인 데이터베이스 캐쉬에 저장될 수 있지만, 앱 쉘과 액션 스크립트는 서비스워커의 다른 부분에 저장됩니다.

 

이는 이전 디바이스에서 봤던 모든 컨텐츠를 다시 볼 수 있도록 해주며,
폰이 오프라인일 때에도 이를 가능하게 만들어 줍니다.
(구글은 실제로 이것과 관련하여 오프라인 퍼스트 디자인 (Offline-First Design)을 내부적으로 계획 중이기도 합니다.)

 

이는 모든 특별한 웹 컨텐츠들이 구글이 ‘인덱스’할 수 있는 JSON-LD 포맷의 API에서 접근이 가능해지므로 사용자뿐 아니라 구글에게도 이득입니다.

 

서비스워커는 컨텐츠가 이미 디자인으로부터 구분된 사이트를 위한 API가 되고, 적합한 스키마 (Schema)로 마크업되어 구글은 이것이 무엇인지 알 수 있게 됩니다.

 

 

 

> PWAmp 모바일 앱:

훌륭한 PWA를 만든 개발자들의 대부분은 더욱 나은 사용자 경험을 위한 짧은 로딩 시간을 목표로 AMP 코드도 활용하고 있습니다.

 

페이지들이 인증되기 위함이 아니라 하더라도 웹마스터들은 더 빠른 속도를 위해 모든 페이지에 AMP HTML, CSS와 자바스크립트를 사용할 수 있다는 사실을 기억하세요.

 

이 코드 업그레이드는 개발자들이 AMP URL API를 활용하여 구글이 호스트한 AMP 랜딩 페이지의 경계 속에서PWA가 작동될 수 있도록 해주는 AMP- 서비스워커 (AMP-ServiceWorker)를 사용할 수 있게 해주는데,
이 때 AMP URL API는 구글이 주도메인의 AMP 페이지에 제공하는 구글 호스트된 AMP url를 맵핑합니다.

 

이는 AMP인증된 PWAmp 페이지가 웹 앱의 나머지 부분에서 출입구 역할을 하도록 해주며, 첫 페이지가 로딩된 후 상호작용 트랙킹과 컨트롤을 더욱 개선시킵니다.

 

그림: https://ampbyexample.com/components/amp-install-serviceworker/ 캡쳐

 

 

 

> 구글 마이 비지니스 랜딩 페이지:

구글+의 비지니스 분야인 구글 마이 비지니스 (Google My Business)는 이미 모바일 퍼스트 인덱스에 최적화되어 있습니다.

 

이는 사업자들이 자신의 웹사이트를 가지고 있지 않은 상태에서 순위를 상승시킬 수 있는 주요 방법이자
스타 랭킹 및 리뷰를 모으기 위해 만들어진 구글 맵과 구글 로컬 쿼리 (Google Local Queries)의 결과를 관리하려는 사업자들을 위해 만들어졌습니다.

 

구글 마이 비지니스에 등록되는 컨텐츠는 이미 구글의 클라우드 데이터베이스에 호스트되어 있으므로 API는 필요하지 않습니다.

 

구글 마이 비지니스는 더 많은 사람들이 개발자 없이도 웹 컨텐츠를 활용할 수 있도록 가능케 하려는 그들의 목표와 일치하기 때문에,
우리는 구글이 곧 구글 마이 비지니스의 상호작용을 다시 홍보하기 시작할 것으로 예상합니다.

 

 

 

 

이러한 모든 개발 기술의 공통점은
이들이 디자인으로부터 컨텐츠를 거의 완벽히 분리시킨다는 것입니다.

 

이 분리는 어떠한 경우에도 구글이 표현 계층을 제거하지 않고서
컨텐츠를 훨씬 효율적으로 크롤하고 인덱스할 수 있게 만들어 줍니다.

 

또한 보통 상단에 나오는 앤서 (Answer), 맵, 이미지와 비슷한 결과의 경우에도
구글이 표현 계층이 되는 데 크게 일조하기도 합니다.

 

이를 고려하였을 때,
대부분의 최신 크롬 업데이트가 오프라인일 때 컨텐츠를 캐슁하기 위한 개선 작업에 집중한 것과 대부분의 최신 헤드레스 (Headless) 크롬 업데이트가 가시적인 UI 쉘을 필요하지 않도록 만든 것은 우연이 아니며, 크롬 OS와 안드로이드 OS가 상호 정보 교환이 가능해진 것도 우연이 아닐 것입니다.

 

앱과 웹이 차이는 점점 사라지고 있으며,
구글은 가능한 모든 플랫폼에서 그들의 자산이 활용되길 바라고 있습니다.

 

 

 

 

본 포스팅은 다음 포스팅
“모바일 퍼스트 인덱스의 이해 09”
에서 이어집니다.

 

 

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

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

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