PWA SEO 챌린지: PWA 사이트가 순위를 매길 수 없는 이유는 무엇입니까?
게시 됨: 2022-08-24목차
더 빠른 속도와 더 나은 UI 및 UX로 PWA는 Google Core Web Vitals를 향상시켜 SEO를 개선할 수 있습니다. 많은 기술 블로그 및 뉴스(SimiCart 포함)에서 이를 주장했습니다.
그러나 이것이 전체 그림이 아닙니다. 사실 어떤 경우에는 PWA가 웹사이트의 SEO에 좋지 않을 수 있습니다.
10년 넘게 PWA 웹사이트를 개발하면서 SEO 성능이 실제로 PWA에 의해 부정적인 영향을 받는 여러 사례를 접했습니다.
우리는 이미 PWA 혜택에 대한 기사를 작성했습니다. 이제 빙산의 수중 부분을 볼 수 있도록 PWA를 구현할 때 상점 소유자가 직면할 수 있는 SEO에 대한 몇 가지 큰 문제가 있습니다.
PWA SEO의 주요 문제
이것은 기본 웹사이트 개발 지식인 HTML 및 Javascript로 돌아갑니다. 기술에 전혀 익숙하지 않더라도 이전에 이 두 가지 코딩 언어에 대해 제대로 들어본 적이 있을 것입니다.
간단히 말해서 HTML은 웹사이트 구조를 만드는 데 사용되는 가장 간단한 코딩 언어입니다.
한편, Javascript는 더 많은 특수 효과를 담당하는 고급 스크립트입니다.
따라서 동적 콘텐츠가 많은 웹 페이지, 멋진 스크롤 효과 또는 멋진 슬라이더가 있는 경우 해당 웹 페이지는 Javascript를 적절하게 활용합니다.
(출처: 레딧)
생동감 넘치는 UI/UX 경험으로 유명한 PWA는 짐작할 수 있듯이 자바스크립트를 많이 사용합니다.
여기 문제가 있습니다. Google 및 다른 많은 검색 엔진은 Javascript 웹사이트를 그렇게 잘 렌더링하지 않습니다. Javascript 기반 웹 사이트는 HTML 웹 사이트보다 처리하기가 더 복잡하고 무거워지는 경우가 많습니다. 사실, 검색 엔진뿐만 아니라 Twitter 또는 Facebook과 같은 소셜 미디어도 Javascript를 그다지 좋아하지 않습니다.
결과적으로 검색 엔진 봇은 PWA 사이트를 인덱싱하는 데 몇 가지 문제가 있어 SEO 성능이 저하될 수 있습니다.
따라서 SEO 친화적 인 웹 사이트를 최적화하려면 PWA를 완전히 이해하는 숙련 된 전문가가 필요합니다.
SEO를 위해 PWA를 최적화할 때의 6가지 장애물.
1. 성능 문제
"하지만 PWA는 빨라야 하는 건가요?" - 물어볼 수 있습니다.
예, 그렇습니다. 그러나 PWA에 성능 문제가 없다는 의미는 아닙니다.
PWA에는 여전히 몇 가지 두드러진 속도 관련 문제가 있습니다. 그러나 PWA가 제대로 최적화되면 번개처럼 빠를 수 있습니다.
우사인 볼트와 마찬가지로 초능력자라도 자신의 능력을 이해하고 잘 훈련시키는 코치가 없으면 챔피언이 될 수 없다.
각 문제를 자세히 살펴보겠습니다.
문제
Javascript 파일은 구문 분석, 컴파일 및 실행에 많은 리소스를 사용합니다. 또한 서버 성능이 좋지 않아 검색 엔진 버그로 인해 Javascript 파일을 빠르게 렌더링할 수 없습니다.
결과적으로 첫 번째 의미 있는 페인트 및 첫 번째 내용 있는 페인트와 같은 일부 페이지 속도 측정항목에 영향을 미칠 수 있습니다. 이 두 가지 측정항목은 중요한 순위 요소이므로 SEO에 좋지 않습니다. 또한 느린 사이트는 사용자 경험에도 결코 좋지 않습니다.
게다가 PWA의 서비스 워커가 작동하려면 HTTPS 및 SSL 인증서가 필요하기 때문에 웹사이트가 HTTP 버전보다 느려질 수 있습니다.
솔루션
속도 향상을 위한 몇 가지 일반적인 방법은 PWA와 함께 AMP(가속 모바일 페이지)를 구현하고 HTTP와 함께 HTTP/2를 사용하는 것입니다.
PWA는 전자 상거래 환경에서 고급 및 틈새 기술이므로 경험 많은 PWA 개발자가 사이트 속도를 최적화하도록 하는 것이 좋습니다.
2. 자바스크립트 오류
문제
구문 분석할 때 Google Chrome과 같은 브라우저는 태그 닫기와 같은 HTML 구문을 자동으로 수정할 수 있습니다. 그러나 이것은 Javascript 오류와 동일하지 않습니다.
결과적으로 Javascript의 오류로 인해 검색 엔진 스파이더가 웹 페이지를 크롤링하고 색인을 생성하지 못할 수 있습니다.
솔루션
나중에 많은 시간이 소요되는 수정을 피하기 위해 개발자가 사이트에 대해 명확하고 구조화된 Javascript 코드를 작성하도록 하는 것이 중요합니다.
사이트에서 자바스크립트 오류가 발생하면 개발자는 수동으로 오류를 정리하고 수정한 후 검색 엔진에 알려야 합니다.
3. 콘텐츠 클로킹으로 인해 하이퍼링크/이미지가 크롤링되지 않음
클로킹 콘텐츠는 사람의 눈으로 볼 수 있지만 검색 엔진에서는 볼 수 없는 콘텐츠입니다. 예를 들어, "더보기" 버튼 뒤에 숨겨진 텍스트 또는 지연 로딩 메뉴 링크. 이들은 종종 Javascript로 작성된 동적 콘텐츠 및 링크입니다.
문제
Google은 여전히 Javascript를 이해하는 데 어려움을 겪고 있기 때문에 Google에서 액세스할 수 없는 일부 PWA의 Javascript 콘텐츠가 있을 수 있습니다.
귀하의 콘텐츠(예: 중요한 링크, 제품 이미지)가 검색 엔진에 보이지 않으면 색인을 생성할 수 없습니다. 결과적으로 SEO 순위에 나쁜 영향을 미칩니다.
해결책
Sitechecker 또는 Small SEO 도구와 같은 도구를 사용하여 웹 페이지에 숨겨진 콘텐츠가 있는지 확인할 수 있습니다. 사용자에게 전달되는 텍스트, 이미지, 링크와 같은 모든 주요 콘텐츠가 Googlebot에 제공되는 내용과 일치하는지 확인하세요.
4. 모듈 호환성
문제
비교적 새로운 기술인 PWA는 종종 최신 모듈을 활용합니다. 이것은 일반적으로 덜 현대적인 모듈에 의존하는 Google 또는 다른 브라우저와 충돌할 수 있습니다. 이에 대한 몇 가지 주목할만한 예는 ES6, Fetch API 또는 새로운 구문이나 메서드입니다.
해결책
구현하기 전에 호환성을 확인해야 합니다. PWA의 일부 모듈이 Googlebot과 작동하지 않아도 큰 문제가 되지 않습니다. 이 문제를 해결하는 도구나 폴리필이 있기 때문입니다.
Polyfill은 구형 브라우저가 기본적으로 해당 기능을 지원하지 않더라도 최신 기능을 사용할 수 있도록 하는 일부 Javascript 코드 라인입니다.
Googlebot이 충돌하는 모듈에 따라 이를 위한 트랜스파일 도구도 있을 수 있습니다.
참고로 트랜스파일(번역 + 컴파일)은 프로그래밍 언어를 다른 프로그래밍 언어로 번역 및 해석하는 것을 의미합니다. ES6 모듈을 예로 들어 보겠습니다. Babel과 같은 서비스는 최신 C6 Javascript 파일을 ES5로 변환할 수 있으므로 이전 브라우저에서 원활하게 실행할 수 있습니다.
5. 서버 측 렌더링 문제
자바스크립트 기반 웹사이트를 더 잘 렌더링하기 위해 Googlebot은 서버 측 및 클라이언트 측 렌더링을 모두 사용합니다.
간단히 말해서 렌더링 프로세스는 다음과 같습니다.
- Googlebot이 웹사이트를 크롤링하여 처음으로 링크 및 콘텐츠를 찾습니다.
- 서버는 첫 번째 크롤링 후에 찾은 링크 및 콘텐츠를 렌더링합니다. 이 링크 및 콘텐츠는 곧 색인이 생성됩니다.
- Google은 두 번째, 세 번째 등으로 웹사이트를 계속 크롤링합니다.
- 이제부터 나머지 링크 및 콘텐츠는 클라이언트에서 렌더링되므로 사용자의 장치에서 렌더링됩니다.
- 렌더링이 완료되면 Google에서 웹페이지의 색인을 생성합니다.
문제
처음에는 Googlebot의 렌더링 흐름이 꽤 그럴듯해 보이지만 몇 가지 주요 단점이 있습니다.
- 낮은 인덱싱 속도 :
Google은 서버 측 렌더링으로 HTML 파일을 빠르게 색인화할 수 있지만 클라이언트 측 렌더링으로 Javascript 파일을 색인화하는 데 며칠이 걸릴 수 있습니다.
- 잘못된 페이지 우선순위 지정 :
다른 페이지로 연결되는 웹 페이지가 있다고 상상해 보십시오. 이를 내부 링크라고 합니다. Google은 이러한 내부 링크의 구조에 따라 링크 간의 관계와 우선 순위를 지정해야 하는 링크를 이해합니다.
그러나 Javascript 삽입 링크의 경우 Google은 색인 생성을 시작하기 전에 클라이언트 측 렌더링이 완료될 때까지 기다려야 합니다. 다시 말해 Google은 클라이언트 측 렌더링이 완료된 후에야 웹사이트의 내부 링크 구조를 완전히 평가할 수 있습니다.
결과적으로 클라이언트 측 렌더링이 필요하지 않은 일부 중요하지 않은 링크가 먼저 크롤링되고 더 자주 크롤링될 수 있습니다. 따라서 Google은 귀하의 마이너 페이지에 우선 순위를 지정하고 판매 페이지를 무시할 수 있습니다.
- 서버 측 렌더링과 클라이언트 측 렌더링 간의 충돌:
종종 서버 측 렌더링과 클라이언트 측 렌더링 사이에 문제가 있습니다. 예를 들어, 일부 중요한 페이지 요소(메타 태그, 표준 태그)는 인덱싱되지 않습니다. 또한 두 단계에서 혼합된 신호를 Google에 보낼 수 있으므로 검색 엔진은 페이지를 처리하는 방법을 모릅니다.
해결책
보다 효율적인 서버는 이러한 문제에 대한 주요 수정 사항입니다. 개발자는 딥 링크 요청에 즉시 응답하도록 서버를 최적화해야 할 수 있습니다. 또한 잘 렌더링된 HTML 파일, 특히 탐색, 링크, 콘텐츠, 메타 태그 및 이미지와 같은 중요한 페이지 요소에 대해 작동해야 합니다.
현대 기술은 Javascript와 웹 브라우저 간의 충돌을 해결하는 데도 도움이 될 수 있습니다. 예를 들어, 동형 기술을 사용하면 브라우저에서 Javascript 파일을 더 쉽게 렌더링할 수 있습니다.
6. SEO의 일반적인 실수
200가지가 넘는 SEO 순위 요소가 있으며, 그 중 일부는 표준 태그, rebot.txt 등과 같이 고도로 기술적인 요소입니다. 이러한 이유로 판매자는 이러한 구성을 쉽게 무시할 수 있으므로 결국 웹사이트의 SEO에 피해를 줄 수 있습니다.
PWA SEO를 수정하기 전에 현재 사이트가 최고의 SEO 관행을 따르는지 확인하는 것이 가장 좋습니다.
>> 더 보기: 최고의 Magento SEO 사례
이제 가장 간질간질한 질문이 나옵니다.
PWA로 업그레이드해야 합니까?
... 내 웹사이트의 SEO를 해치고 싶지 않다면.
특히 자연 검색이 중요한 웹사이트 트래픽 채널인 경우 PWA 구현을 생각하는 판매자에게는 매우 혼란스러울 것입니다.
그러나 이러한 문제가 Google 봇이 PWA 사이트를 크롤링할 수 없거나 프로그래밍 언어 때문에 PWA 사이트의 순위를 다르게 지정할 수 없다는 것을 의미하지는 않습니다.
판매자는 SEO 친화적인 PWA 사이트를 구현할 때 몇 가지 기술적인 문제를 알고 있어야 합니다.
사실, PWA 웹사이트는 동등한 비 PWA 웹사이트보다 좋지는 않더라도 검색 엔진에서 절대적으로 좋은 순위를 차지할 수 있습니다. 앞서 언급했듯이 웹 앱은 SEO의 핵심 Web Vitals를 향상시킵니다.
따라서 SEO 측면에서 PWA는 영웅입니까 아니면 0입니까? 개발자가 PWA 기술 및 웹 사이트 개발을 깊이 이해하는지 여부에 달려 있습니다.
테이크아웃
PWA는 웹사이트의 SEO 순위에 대해 양날의 칼이 될 수 있습니다. 반면에 향상된 속도와 고객 경험은 SEO의 핵심 웹 바이탈을 높이는 데 도움이 될 수 있습니다. 어두운 면에서 PWA는 풍부한 자바스크립트 콘텐츠를 포함하고 있어 Google과 같은 검색 엔진이 작업하기 더 복잡합니다. 따라서 PWA에 대한 깊은 이해 없이 구현하지 못하면 순위가 급락할 수 있습니다.
SEO 친화적인 PWA 웹사이트를 만드는 것은 완전히 가능합니다. 핵심은 이러한 문제에 익숙하고 신속하게 해결하는 방법을 알고 있는 PWA 개발자를 찾는 것입니다.
우리는 Magento용 헤드리스 PWA를 만든지 10년이 되었습니다.