프로그레시브 웹 앱(PWA) 및 검색 엔진 최적화(SEO)

PWA(Progressive Web App)는 웹을 통해 제공되는 애플리케이션 소프트웨어입니다. HTML, CSS, JavaScript 등과 같은 표준 웹 기술을 사용하여 구축되었습니다. PWA는 일반적으로 웹 사이트의 전환율과 트래픽을 높이는 데 사용됩니다. 2021년부터 PWA는 Google Chrome, Apple Safari, Android용 Firefox 및 Microsoft Edge에서 (전체 또는 부분적으로) 지원됩니다.

상대적으로 새로운 개발이기 때문에 PWA 최적화는 대부분의 경우 여전히 긍정적인 결과를 가져오고 놀라운 통계를 가지고 있습니다. PWA Stats는 PWA를 구현한 서비스가 달성한 이점에 대해 지속적으로 보고합니다.

일반적으로 상위 30개 PWA 보고서에 따르면 "프로그레시브 웹 앱의 평균 전환율은 기본 모바일 앱보다 36% 더 높았습니다."

PWA는 온라인 마케팅과 관련하여 훌륭한 도우미입니다. 그래서 그들은 SEO 군중들 사이에서 인기가 있습니다. 그러나 React 및 SEO와 마찬가지로 PWA SEO 조합에도 어려움이 있습니다. 이 기사에서는 PWA가 SEO와 작동하는 방식에 대해 설명합니다.

PWA의 예 및 주요 이점

모든 웹 서비스는 PWA가 될 수 있습니다. 이에 대한 세 가지 주요 요구 사항이 있습니다.

1. HTTPS에서 실행됩니다.
2. 웹 앱 매니페스트를 포함합니다.
3. 서비스 작업자를 구현합니다.

PWA의 주요 목적은 모든 사용자에게 우수한 기능을 제공하는 것입니다. 다음은 PWA가 제공하는 주요 이점 목록입니다.

1. PWA는 문자 그대로 모든 비즈니스에 새로운 기회와 성장을 제공합니다. 최고의 앱과 웹 품질을 결합하고 반응이 빠르고 모든 장치에서 작동할 수 있으며 반드시 빠른 네트워크가 필요하지 않습니다.
2. 전송 계층 보안은 보안을 유지합니다.
3. 서비스 워커(브라우저가 백그라운드에서 실행하는 특수 스크립트)를 사용하면 PWA가 오프라인 모드에서 작동할 수 있습니다.

PWA 채택의 몇 가지 가장 좋은 예를 살펴보겠습니다.

권장 사항: 프로그레시브 웹 앱(PWA) 구축을 위한 가장 인기 있는 프레임워크.

1. 스타벅스

스타벅스 주문 시스템의 PWA는 간단하고 사용자 친화적입니다. 기본 앱처럼 보이지만 사용자가 메뉴를 탐색하고 카트에 항목을 추가할 때 오프라인으로 실행할 수 있는 기능이 있습니다. 이러한 솔루션의 가장 큰 이점은 PWA가 Starbucks의 표준 앱보다 거의 두 배 작다는 사실입니다. 그로 인해 회사는 웹 사용자 수를 크게 늘렸습니다.

2. 핀터레스트

Pinterest 모바일 사용자의 1%만이 성능이 좋지 않아 앱을 다운로드하고 로그인한다는 사실이 밝혀진 후 모바일 앱은 PWA 기술을 기반으로 재구축되었습니다. 그 덕분에 소요 시간, 광고 수익 및 핵심 참여와 같은 지표가 최대 40% – 60% 증가했습니다.

3. 우버

Uber 웹 앱은 저속 네트워크와 기본 Uber 앱과 호환되지 않는 구형 스마트폰에서 빠른 서비스를 제공하기 위해 PWA로 재구축되었습니다. 덕분에 초경량 코어 앱이 2G 네트워크에서 약 3초 안에 로드됩니다.

SEO의 중요성

SEO는 검색 엔진(SE)에 맞게 웹 사이트를 최적화하는 것입니다. 주요 목적은 검색 결과에서 웹 사이트의 순위를 높이고 방문자를 참여시키는 것입니다. SE 알고리즘을 기반으로 하며 키워드를 사용하여 검색 엔진이 관련 콘텐츠를 표시하고 대상 고객을 웹 사이트로 끌어들이도록 돕습니다. 이것은 SEO가 귀하의 웹사이트에 최고의 유기적 트래픽을 가져올 수 있는 방법입니다. 직접 및 유료 트래픽과 달리 대부분의 방문자를 클라이언트 및 고객으로 전환할 수 있습니다.

프로그레시브 웹 앱을 위한 SEO: 무엇이 문제인가?

PWA가 제공하는 모든 이점에도 불구하고 많은 웹사이트 소유자는 여전히 기술 구현을 주저합니다. 여기에는 두 가지 주요 이유가 있습니다.

1. 이미 잘 돌아가는 기존 시스템을 바꾸는 것에 대한 두려움.
2. PWA가 SEO와 작동하는 방식에 대한 이해가 부족합니다.

John Mueller(Google 분석가)가 말했듯이 "PWA는 현재 Google 검색에서 이점이 없습니다."

많은 PWA는 SEO 친화적인 특성으로 알려져 있지 않은 JS 프레임워크를 사용하여 구축됩니다.

따라서 기존의 HTML 기반 웹사이트와 달리 JavaScript에 의존하는 PWA는 SEO에 어려움이 있습니다. 그렇기 때문에 검색 가능성 측면에서 어떠한 이점도 제공하지 않습니다. 그러나 대중적인 믿음과는 달리 이것이 프로그레시브 웹 앱이 검색 엔진에 의해 색인될 수 없다는 것을 의미하지는 않습니다. 이를 위해 다른 기술을 사용해야합니다.

서버 측 렌더링 및 클라이언트 측 렌더링

대부분의 웹사이트는 SSR(Server-Side Rendering)을 사용합니다. 페이지가 브라우저에서 렌더링되는 대신 서버측에서 렌더링되는 가장 간단한 접근 방식입니다. 그러나 사용자가 페이지를 요청할 때마다 전체 HTML이 로드되므로 인터넷 연결이 안정적이지 않거나 충분히 빠르지 않을 때 문제가 될 수 있습니다.

JavaScript 기반 PWA는 콘텐츠가 클라이언트의 브라우저에서 렌더링되는 CSR(클라이언트 측 렌더링)을 사용합니다. 사용자가 페이지를 요청할 때마다 전체 HTML 페이지를 보내지는 않습니다. JavaScript 파일은 클라이언트의 브라우저 페이지에서 정보의 필요한 부분만 표시합니다. 그렇기 때문에 인터넷 연결 상태가 좋지 않아도 페이지가 더 빨리 로드됩니다.

그러나 많은 웹사이트 소유자가 여전히 CSR 사용을 거부하는 이유는 무엇입니까? 문제는 구글봇이다. HTML 문서에서 완전히 볼 수 있는 코드에서 웹 사이트의 콘텐츠를 읽을 수 있습니다. CSR의 경우에는 JavaScript를 처리하는 검색 엔진의 기능에 전적으로 의존합니다. 그렇기 때문에 CSR 앱은 인덱싱할 수 없다는 의견이 있습니다. 그러나 사실 모든 검색 엔진 중에서 Google이 JavaScript를 가장 잘 처리합니다.

그럼에도 불구하고 이것이 여전히 JavaScript 및 SEO의 문제가 해결되었음을 의미하지는 않습니다. Google은 JS 처리가 완벽하지 않다는 것을 인정합니다. 즉, JavaScript 기반 페이지를 크롤링하는 프로세스는 HTML 페이지보다 시간이 더 걸립니다. 실제로 이것은 JavaScript 콘텐츠가 검색 엔진의 결과 페이지에 나타나기까지 더 많은 시간을 기다려야 함을 의미합니다.

이 모든 것이 웹사이트 소유자가 방문자의 사용자 경험을 개선하고 콘텐츠를 검색 엔진에 최적화하는 것을 어렵게 만듭니다.

검색 엔진 최적화를 잃지 않고 PWA를 구현하는 방법은 무엇입니까?

다음을 좋아할 수 있습니다: Magento PWA Studio: Magento용 프로그레시브 웹 앱 도구!

1. 동적 렌더링 적용

동적 렌더링은 다양한 소스에 다양한 버전의 콘텐츠를 보여줍니다. 방문자는 CSR 버전을 받고 크롤러는 서버측 렌더링 버전을 받습니다. 이를 통해 Google 봇이 JavaScript 기반 페이지의 색인 생성을 개선할 수 있습니다. 이렇게 하면 웹 사이트의 SEO 위험 없이 고객에게 가장 편리한 사용자 경험을 제공할 수 있습니다.

2. SSR과 CSR의 결합

크롤러가 서버 측 렌더링을 사용하여 콘텐츠의 가장 중요한 부분(확실히 검색 엔진으로 전달되어야 함)을 볼 수 있는지 확인하십시오. 이 정보는 크롤러가 페이지를 발견하는 즉시 선택합니다. 나머지 정보는 프로세스의 두 번째 단계에서 클라이언트 측 렌더링을 통해 자동으로 처리됩니다.

3. SEO 친화적인 JavaScript 프레임워크를 사용하여 PWA 구축

우리의 추천은 GatsbyJS입니다. 이 프레임워크를 사용하여 PWA 웹사이트를 구축하는 것은 매우 쉽습니다(또한 기존 Gatsby 웹사이트를 PWA로 전환하는 것). 인터넷 연결이 느린 경우에도 훌륭하고 지연 없는 성능을 위해 빌드 단계에서 웹 사이트를 사전 렌더링합니다. 덕분에 방문자는 앱과 같은 브라우징 경험을 얻을 수 있습니다.

4. 즉시 사용 가능한 PWA 솔루션에 의존

오늘날 PWA는 그 어느 때보다 저렴합니다. 따라서 PWA 개발에 많은 시간과 자원을 낭비하고 싶지 않다면 SEO 원칙에 따라 만들어지고 철저한 테스트를 거친 즉시 사용 가능한 일부 PWA 솔루션을 사용할 수 있으므로 품질을 확신할 수 있습니다. 코드의.

5. PWA 스튜디오

PWA 스튜디오는 앱과 같은 경험을 제공하도록 설계된 웹 기술 표준으로 2019년에 출시되었습니다. 실제로 바로 사용할 수 있는 솔루션은 아닙니다. 오히려 PWA 개발을 위한 도구 및 기능 모음입니다. 이 솔루션은 매우 복잡하고 인상적이지만 추가 조정이 필요합니다.

6. 스칸디PWA

ScandiPWA는 React 및 Redux를 기반으로 하는 오픈 소스 솔루션입니다. 속도와 오프라인 작업 기능으로 웹 사이트를 개선하는 것을 목표로 설계되었습니다. 또한 지속적으로 업데이트되므로 항상 새로운 기능을 사용할 수 있습니다.

7. 뷰 스토어프론트

이것은 시장에서 사용할 수 있는 최초의 PWA 솔루션 중 하나입니다. 실제로 Vue Storefront는 범용 올인원 솔루션이지만 추가 유지 관리 리소스가 필요합니다.

PWA 구현 중 SEO 관련 실수를 피하는 방법은 무엇입니까?

향상된 사용자 경험을 제공하여 SEO에서 승리하는 데 도움이 되는 잘 만들어진 PWA를 개발하려면 다음을 수행해야 합니다.

1. SEO 감사를 수행합니다. 이렇게 하면 모든 SEO 관련 문제를 찾아 수정하는 데 도움이 됩니다.
2. SEO 전문가와 상의하세요. 예를 들어 React를 사용하여 PWA를 구축할 때 SEO 전문가는 React와 SEO를 결합하는 방법을 정확히 알아야 합니다. 이렇게 하면 구현 후에 나타날 수 있는 대부분의 가능한 문제를 피할 수 있습니다.
3. PWA를 개발할 때 기본 SEO 원칙을 고수하십시오. Google에서 게시한 Progressive Web Apps SEO 관련 기사에서 회사는 인덱싱 가능한 PWA를 구축하는 방법에 대한 팁을 제공합니다. 그들 중 일부는 다음과 같습니다.
   • 각 페이지는 특정 URL을 통해 사용할 수 있어야 합니다. 덕분에 각 페이지는 독립적으로 크롤링됩니다.
   • 웹사이트는 반응형 디자인이어야 하며 모바일 장치에 최적화되어 있어야 합니다.
   • 점진적 향상을 사용하십시오. 이러한 전략 덕분에 PWA는 오래된 브라우저에서도 잘 작동합니다.
   • Google이 Google Search Console을 사용하여 정기적으로 페이지를 어떻게 렌더링하는지 확인하세요. 따라서 무언가를 업그레이드하거나 변경해야 할 때를 항상 알 수 있습니다.
   • 페이지 로드 시간을 주시하십시오. Google은 모든 페이지의 로드 속도를 측정하고 페이지의 로드 속도가 느려지면 순위를 낮춥니다.

React Native vs Flutter vs PWA: Battle of Trending Mobile App Frameworks 도 좋아할 수 있습니다 .

결론

PWA 최적화는 온라인 마케팅을 위한 많은 기회를 제공하고 대다수의 비즈니스에 성장을 가져옵니다. 실제로 PWA가 일반적으로 적용하는 최고의 SEO 관행은 사용자 친화적인 인터페이스입니다. 즉, 응답성이 뛰어나고 체계적이며 빠르게 렌더링됩니다. 그러나 PWA는 여전히 SEO에 직접적인 이점을 제공하지 않으며 SEO 관련 문제로 인해 많은 판매자가 웹사이트에 PWA를 구현하지 못하고 있습니다. 그렇기 때문에 동적 렌더링, SSR과 CSR의 조합 또는 바로 사용할 수 있는 PWA 솔루션과 같은 다양한 기술을 주의해서 사용하는 것이 중요합니다. 또한 처음부터 프로세스에 SEO 전문가를 참여시켜야 합니다.

보시다시피 SEO와 PWA를 성공적으로 결합하여 사용할 수 있습니다. 또한 PWA는 젊고 혁신적인 유형의 소프트웨어이므로 개선이 기대됩니다.

 이 기사는 Ivan Jones가 작성했습니다. Ivan은 업계에서 5년 이상의 경험을 가진 Clockwise.Software의 SEO 전문가입니다. 그는 몇 년 동안 웹사이트를 Google 검색 결과 위에 유지하는 데 도움이 된 뉘앙스를 알고 있습니다. 열렬한 학습자로서 그는 SEO 결과에 도움이 될 수 있는 새로운 접근 방식을 테스트하는 데 열심입니다.