지금까지 웹 개발자는 콘텐츠에 HTML, 스타일 지정에 CSS, 상호작용 요소에 JavaScript(JS)를 사용해 왔습니다. JS를 사용하면 웹 페이지에 팝업 대화 상자 및 확장 가능한 콘텐츠와 같은 기능을 추가할 수 있습니다. 요즘은 오버 모든 사이트의 98%가 JavaScript를 사용합니다. 사용자 작업에 따라 웹 콘텐츠를 수정하는 기능 때문입니다. 

JS를 웹사이트에 통합하는 비교적 새로운 추세는 단일 페이지 애플리케이션을 채택하는 것입니다. 필요할 때마다 서버에서 각각을 요청하여 모든 리소스(HTML, CSS, JS)를 로드하는 기존 웹 사이트와 달리 SPA는 초기 로드만 필요하고 서버에 계속 부담을 주지 않습니다. 대신 브라우저가 모든 처리를 처리합니다. 

이것은 더 빠른 웹사이트로 이어지며 연구에 따르면 온라인 쇼핑객은 웹사이트가 3 초. 로드 시간이 길어질수록 더 적은 수의 고객이 사이트에 머뭅니다. SPA 접근 방식을 채택하는 것은 이 문제에 대한 좋은 해결책이 될 수 있지만 잘못 수행하면 SEO에 재앙이 될 수도 있습니다. 

이 게시물에서는 SPA가 어떻게 만들어지는지 논의하고 최적화를 위해 제시하는 문제를 검토하고 SPA SEO를 올바르게 수행하는 방법에 대한 지침을 제공합니다. SPA SEO를 제대로 활용하면 검색 엔진이 SPA를 이해하고 순위를 매길 수 있습니다.

한마디로 스파

단일 페이지 애플리케이션 또는 SPA는 첫 페이지 보기 로드 후 추가 페이지 로드가 필요하지 않은 웹 사이트 개발을 위한 특정 JavaScript 기반 기술입니다. React, Angular 및 Vue는 SPA 구축에 사용되는 가장 인기 있는 JavaScript 프레임워크입니다. 지원되는 라이브러리 및 API 측면에서 대부분 다르지만 둘 다 빠른 클라이언트 측 렌더링을 제공합니다. 

SPA는 서버와 브라우저 간의 요청을 제거하여 사이트 속도를 크게 향상시킵니다. 그러나 검색 엔진은 이 자바스크립트 트릭에 대해 별로 감격하지 않습니다. 문제는 검색 엔진이 사용자처럼 사이트와 상호 작용하지 않아 액세스 가능한 콘텐츠가 부족하다는 사실에 있습니다. 검색 엔진은 콘텐츠가 동적으로 추가되고 있음을 이해하지 못하여 아직 채워지지 않은 빈 페이지를 남깁니다.

최종 사용자는 추가 페이지 로드 및 레이아웃 변경을 처리할 필요 없이 웹 페이지를 쉽게 탐색할 수 있으므로 SPA 기술의 이점을 누릴 수 있습니다. 단일 페이지 애플리케이션이 로컬 저장소의 모든 리소스를 캐시(초기 요청 시 로드된 후)하면 사용자는 불안정한 연결 상태에서도 계속 탐색할 수 있습니다. 필요한 추가 SEO 노력에도 불구하고 기술의 이점은 지속적인 존재를 보장합니다.

SPA의 예

많은 유명 웹사이트는 단일 페이지 애플리케이션 아키텍처로 구축됩니다. 인기 있는 예는 다음과 같습니다.

• Google지도

Google 지도를 사용하면 사용자가 지도를 보고 방향을 찾을 수 있습니다. 사용자가 처음 사이트를 방문하면 단일 페이지가 로드되고 추가 상호 작용은 JavaScrip을 통해 동적으로 처리됩니다. 사용자는 지도를 이동 및 확대/축소할 수 있으며 애플리케이션은 페이지를 다시 로드하지 않고 지도 보기를 업데이트합니다.

Airbnb는 사용자가 숙박 시설을 검색할 때 동적으로 업데이트되는 단일 페이지 디자인을 사용하는 인기 있는 여행 예약 사이트입니다. 사용자는 새 페이지로 이동할 필요 없이 검색 결과를 필터링하고 다양한 속성 세부 정보를 탐색할 수 있습니다.

• 페이스북 

사용자가 Facebook에 로그인하면 게시물, 사진 및 댓글과 상호 작용할 수 있는 단일 페이지가 표시되므로 페이지를 새로 고칠 필요가 없습니다. 

Trello는 SPA에서 제공하는 웹 기반 프로젝트 관리 도구입니다. 단일 페이지에서 프로젝트, 카드 및 목록을 생성, 관리 및 공동 작업할 수 있습니다.

Spotify는 인기 있는 음악 스트리밍 서비스입니다. 단일 페이지에서 음악을 찾아보고, 검색하고, 들을 수 있습니다. 페이지를 다시 로드하거나 전환할 필요가 없습니다.

단일 페이지 애플리케이션이 SEO에 좋은가요?

예, 현명하게 구현한다면.

SPA는 원활하고 직관적인 사용자 경험을 제공합니다. 다른 섹션 사이를 탐색할 때 브라우저가 전체 페이지를 다시 로드할 필요가 없습니다. 사용자는 빠른 브라우징 경험을 즐길 수 있습니다. 또한 사용자는 페이지 새로고침 또는 브라우징 경험 중단으로 인해 주의가 산만해지거나 좌절할 가능성이 적습니다. 따라서 그들의 참여도는 더 높아질 수 있습니다. 

SPA 접근 방식은 고속 작업과 신속한 개발을 제공하기 때문에 웹 개발자들 사이에서도 인기가 있습니다. 개발자는 이 기술을 적용하여 이미 만들어진 코드를 기반으로 다양한 플랫폼 버전을 만들 수 있습니다. 이를 통해 데스크톱 및 모바일 애플리케이션 개발 프로세스의 속도가 빨라져 더욱 효율적입니다.

SPA는 사용자와 개발자에게 많은 이점을 제공할 수 있지만 SEO에 대한 몇 가지 과제도 제시합니다. 검색 엔진은 전통적으로 웹 사이트를 크롤링하고 인덱싱하기 위해 HTML 콘텐츠에 의존하기 때문에 JavaScript에 크게 의존하는 SPA의 콘텐츠에 액세스하고 인덱싱하는 것이 어려울 수 있습니다. 이로 인해 크롤링 가능성 및 인덱싱 가능성 문제가 발생할 수 있습니다. 

이 접근 방식은 사용자와 SEO 모두에게 좋은 경향이 있지만 페이지를 쉽게 크롤링하고 색인을 생성하려면 올바른 단계를 수행해야 합니다. 적절한 단일 페이지 앱 최적화를 통해 SPA 웹사이트는 기존 웹사이트만큼 SEO 친화적일 수 있습니다.

다음 섹션에서는 SPA를 최적화하는 방법을 살펴보겠습니다.

SPA를 최적화하기 어려운 이유

JS가 웹 개발에서 지배적이 되기 전에 검색 엔진은 HTML에서 텍스트 기반 콘텐츠만 크롤링하고 인덱싱했습니다. JS가 점점 대중화되면서 Google은 JS 리소스를 해석하고 이에 의존하는 페이지를 이해해야 할 필요성을 인식했습니다. Google의 검색 크롤러는 수년 동안 상당한 개선을 이루었지만 단일 페이지 애플리케이션에서 콘텐츠를 인식하고 액세스하는 방법과 관련하여 여전히 많은 문제가 남아 있습니다.

다른 검색 엔진이 단일 페이지 애플리케이션을 인식하는 방법에 대한 정보는 거의 없지만 모든 검색 엔진이 Javascript 종속 웹사이트에 열중하지 않는다고 말하는 것이 안전합니다. Google 이외의 검색 플랫폼을 타겟팅하는 경우 상당히 곤란합니다. ㅏ 2017 모즈 실험 Google과 놀랍게도 Ask만이 JavaScript 콘텐츠를 크롤링할 수 있는 반면 다른 모든 검색 엔진은 JS에 대해 완전히 눈이 멀었습니다. 

현재 Google을 제외하고 어떤 검색 엔진도 JS 및 단일 페이지 애플리케이션 웹사이트를 더 잘 이해하기 위한 노력과 관련하여 주목할만한 발표를 하지 않았습니다. 그러나 일부 공식 권장 사항 do 존재하다. 예를 들어, Bing도 같은 제안을 합니다. Google과 마찬가지로 빙봇(및 기타 크롤러)이 웹 사이트의 가장 완전하고 이해하기 쉬운 버전으로 정적 HTML에 액세스할 수 있도록 하는 기술인 서버 측 사전 렌더링을 홍보합니다.

크롤링 문제

검색 엔진에서 쉽게 크롤링할 수 있는 HTML은 SPA에 대한 많은 정보를 포함하지 않습니다. 여기에 포함된 모든 것은 외부 JavaScript 파일과 유용한 src attribute. The browser runs the script from this file, and then the content is dynamically loaded, unless the crawler fails to perform the same operation. When that happens,  it sees an empty page. 

위로 2014에서, Google은 발표 JS 페이지를 더 잘 이해하기 위해 기능을 개선하는 동안 JS가 풍부한 웹 사이트의 색인 생성을 방해하는 수많은 차단기가 있음을 인정했습니다. 시 구글 I/O '18 시리즈에서 Google 분석가는 JavaScript 기반 사이트에 대한 두 가지 인덱싱 물결의 개념에 대해 논의했습니다. 즉, 필요한 리소스가 있으면 Googlebot이 콘텐츠를 다시 렌더링합니다. JavaScript에 필요한 처리 능력과 메모리 증가로 인해 크롤링, 렌더링 및 인덱싱 주기가 즉각적이지 않습니다. 

다행히 2019년에는 구글이 말했다. 그들은 JS 기반 웹 페이지가 크롤러에서 렌더러로 이동하는 데 걸리는 평균 시간 5초를 목표로 삼았습니다. 웹마스터가 색인 생성 접근 방식의 두 가지 흐름에 익숙해진 것처럼 Google의 Martin Splitt는 2020년에 말했습니다. 상황이 "더 복잡해졌고" 이전 개념이 더 이상 유효하지 않다는 것입니다.

Google은 최신 웹 기술을 사용하여 Googlebot을 계속 업그레이드하여 웹사이트 크롤링 및 색인 생성 기능을 개선했습니다. 이러한 노력의 일환으로 Google은 늘푸른 Googlebot, 최신 Chromium 렌더링 엔진(현재 버전 114)에서 작동합니다. 

Googlebot의 상시 유지 상태를 통해 최신 브라우저에서 사용할 수 있는 수많은 새 기능에 액세스할 수 있습니다. 이를 통해 Googlebot은 단일 페이지 애플리케이션을 포함하여 최신 웹사이트의 콘텐츠와 구조를 보다 정확하게 렌더링하고 이해할 수 있습니다. 그 결과 웹사이트 콘텐츠는 크롤링 및 인덱싱 보다 나은. 

여기에서 이해해야 할 주요 사항은 Google이 웹 페이지에서 JavaScript를 처리하는 방식에 지연이 있으며 클라이언트 측에 로드되는 모든 JS 콘텐츠가 제대로 인덱싱되는 것은 고사하고 완전한 것으로 표시되지 않을 수 있다는 것입니다. 검색 엔진은 페이지를 발견할 수 있지만 해당 페이지의 사본이 고품질인지 또는 검색 의도에 해당하는지 판단할 수 없습니다.

오류 404 문제

SPA를 사용하면 기존의 논리도 잃게 됩니다. 404 오류 페이지 및 기타 많은 비 200 서버 상태 코드. 모든 것이 브라우저에 의해 렌더링되는 SPA의 특성으로 인해 웹 서버는 200 HTTP 상태 코드 모든 요청에. 결과적으로 검색 엔진은 인덱싱에 유효하지 않은 페이지를 구별하는 데 어려움을 겪습니다. 

URL 및 라우팅

SPA는 최적화된 사용자 경험을 제공하지만 혼란스러운 URL 구조와 라우팅으로 인해 SPA를 중심으로 좋은 SEO 전략을 수립하기 어려울 수 있습니다. 각 페이지에 고유한 URL이 있는 기존 웹 사이트와 달리 SPA는 일반적으로 전체 애플리케이션에 대해 하나의 URL만 가지며 JavaScript를 사용하여 페이지의 콘텐츠를 동적으로 업데이트합니다.

개발자는 URL을 신중하게 관리하여 직관적이고 설명적이며 페이지에 표시된 콘텐츠를 정확하게 반영하도록 해야 합니다.

이러한 문제를 해결하기 위해 서버 측 렌더링 및 사전 렌더링을 사용할 수 있습니다. 이렇게 하면 SPA의 정적 버전이 생성됩니다. 또 다른 옵션은 히스토리 API or pushState() 메서드. 이 방법을 사용하면 개발자가 조각 식별자를 사용하지 않고 리소스를 비동기적으로 가져오고 URL을 업데이트할 수 있습니다. History API와 결합하여 페이지에 표시된 내용을 정확하게 반영하는 URL을 만들 수 있습니다.

추적 문제

SPA SEO에서 발생하는 또 다른 문제는 Google Analytics 추적과 관련이 있습니다. 기존 웹사이트의 경우 분석 코드는 사용자가 페이지를 로드하거나 다시 로드할 때마다 실행되어 각 보기를 정확하게 계산합니다. 그러나 사용자가 단일 페이지 애플리케이션에서 다른 페이지를 탐색할 때 코드는 한 번만 실행되어 개별 페이지뷰를 트리거하지 못합니다. 

동적 콘텐츠 로딩의 특성으로 인해 GA는 각 페이지뷰에 대한 서버 응답을 받지 못합니다. 이것이 GA4의 표준 보고서가 이 시나리오에서 필요한 분석을 제공하지 않는 이유입니다. 그래도 GA4의 향상된 측정을 활용하고 그에 따라 Google 태그 관리자를 구성하여 이 제한을 극복할 수 있습니다. 

쪽수 매기기 또한 검색 엔진이 동적으로 로드된 페이지가 매겨진 콘텐츠를 크롤링하고 인덱싱하는 데 어려움이 있을 수 있으므로 SPA SEO에 문제가 될 수 있습니다. 다행히 단일 페이지 애플리케이션 웹 사이트에서 사용자 활동을 추적하는 데 사용할 수 있는 몇 가지 방법이 있습니다. 

나중에 이러한 방법을 다룰 것입니다. 지금은 추가 노력이 필요하다는 점을 명심하십시오.

SPA SEO를 수행하는 방법

SPA가 검색 엔진과 사용자 모두에게 최적화되도록 하려면 전략적인 접근 방식을 취해야 합니다. 페이지에서 최적화. 여기 당신의 완전한 온페이지 SEO 가이드, 현장 최적화를 위한 가장 강력한 전략을 완전히 다룹니다.

또한 SE Ranking의 온페이지 SEO 검사기 도구. 이 도구를 사용하면 대상 키워드, 페이지 제목 및 설명, 기타 요소에 대해 페이지 콘텐츠를 최적화할 수 있습니다.

이제 SPA를 위한 SEO의 모범 사례를 자세히 살펴보겠습니다.

서버 측 렌더링

서버 측 렌더링(SSR)은 서버에서 웹 사이트를 렌더링하고 이를 브라우저로 전송하는 작업을 포함합니다. 이 기술을 사용하면 검색 봇이 JavaScript 기반 요소를 기반으로 모든 웹사이트 콘텐츠를 크롤링할 수 있습니다. 이는 크롤링 및 인덱싱 측면에서 생명의 은인이지만 로드 속도가 느려질 수 있습니다. SSR의 주목할만한 측면 중 하나는 SPA가 취하는 자연스러운 접근 방식과 다르다는 것입니다. SPA는 대부분 클라이언트 측 렌더링에 의존하며 이는 빠른 대화형 특성에 기여하여 원활한 사용자 경험을 제공합니다. 또한 배포 프로세스를 간소화합니다.

동형 JS

단일 페이지 애플리케이션을 위한 한 가지 가능한 렌더링 솔루션은 동형 또는 "범용" JavaScript입니다. Isomorphic JS는 서버 측에서 페이지를 생성하는 데 중요한 역할을 하므로 검색 크롤러가 JS 파일을 실행하고 렌더링할 필요가 없습니다. 

동형 JavaScript 애플리케이션의 "마법"은 서버와 클라이언트 측 모두에서 실행할 수 있는 능력에 있습니다. 실제로 사용자가 실제로 서버 측에서 생성된 HTML 파일을 사용하고 있을 때 사용자가 웹 사이트의 콘텐츠가 브라우저에 의해 렌더링된 것처럼 웹 사이트와 상호 작용할 수 있도록 합니다. 널리 사용되는 각 SPA 프레임워크에 대한 동형 앱 개발을 용이하게 하는 프레임워크가 있습니다. 사용하자 다음 .js 과 개츠비 예를 들어 React의 경우 전자는 각 요청에 대해 HTML을 생성하는 반면 후자는 정적 웹 사이트를 생성하고 HTML을 클라우드에 저장합니다. 비슷하게, Nuxt.js for Vue는 서버에서 JS를 HTML로 렌더링하고 데이터를 브라우저로 보냅니다.

사전 렌더링

단일 페이지 애플리케이션을 위한 또 다른 이동 솔루션은 사전 렌더링입니다. 여기에는 모든 HTML 요소를 로드하고 서버 캐시에 저장한 다음 검색 크롤러에 제공할 수 있는 작업이 포함됩니다. Prerender 및 BromBone과 같은 여러 서비스는 웹 사이트에 대한 요청을 가로채고 봇 및 실제 사용자를 검색하기 위해 페이지의 다른 페이지 버전을 표시합니다. 캐시된 HTML은 검색 봇에게 표시되는 반면 "정상적인" JS 리치 콘텐츠는 실제 사용자에게 표시됩니다. 페이지가 250개 미만인 웹사이트는 다음을 사용할 수 있습니다. 사전 렌더링 무료이며 더 큰 것은 $ 200부터 시작하는 월 사용료를 지불해야합니다. 간단한 솔루션입니다. 사이트맵 파일을 업로드하면 나머지는 자동으로 처리됩니다. 브롬본 수동 사이트맵 업로드도 필요하지 않으며 월 $129의 비용이 듭니다. 

정적 HTML을 크롤러에 제공하기 위한 시간 소모적인 다른 방법이 있습니다. 한 가지 예는 Headless Chrome을 사용하는 것입니다. 인형극 라이브러리는 페이지 경로를 HTML 파일의 계층 트리로 변환합니다. 그러나 검색 봇용 정적 HTML을 찾으려면 부트스트랩 코드를 제거하고 서버 구성 파일을 편집해야 합니다.

기능 감지를 통한 점진적 향상

기능 감지 방법을 사용하는 것은 SPA에 대한 Google의 가장 강력한 권장 사항 중 하나입니다. 이 기술에는 다양한 코드 리소스를 사용하여 경험을 점진적으로 향상시키는 작업이 포함됩니다. 크롤러와 사용자 모두가 액세스할 수 있는 기반으로 간단한 HTML 페이지를 사용하여 작동합니다. 이 페이지 상단에는 다음과 같은 추가 기능이 있습니다. CSS와 JS 브라우저 지원에 따라 추가되고 활성화 또는 비활성화됩니다. 

기능 감지를 구현하려면 필요한 각 기능 API가 각 브라우저와 호환되는지 확인하기 위해 별도의 코드 청크를 작성해야 합니다. 다행히도 다음과 같은 특정 라이브러리가 있습니다. 모 더니 저 시간을 절약하고 이 프로세스를 단순화하는 데 도움이 될 수 있습니다.

크롤링할 수 있도록 URL로 보기

사용자가 SPA를 스크롤하면 별도의 웹 사이트 섹션을 통과합니다. 기술적으로 SPA에는 하나의 페이지(단일 index.html 파일)만 포함되지만 방문자는 여러 페이지를 탐색하는 것처럼 느낍니다. 사용자가 단일 페이지 애플리케이션 웹 사이트의 다른 부분을 이동할 때 URL은 해시 부분에서만 변경됩니다(예: http://website.com/#/about, http://website.com/#/contact). . JS 파일은 조각 식별자(해시 변경)를 기반으로 특정 콘텐츠를 로드하도록 브라우저에 지시합니다. 

검색 엔진이 웹 사이트의 다른 섹션을 다른 페이지로 인식하도록 하려면 히스토리 API. 이는 브라우저 기록을 조작하기 위한 HTML5의 표준화된 방법입니다. Google Codelab 검색 엔진이 해시 변경에 의해 트리거된 콘텐츠의 다른 부분을 별도의 페이지로 인식하고 처리할 수 있도록 해시 기반 라우팅 대신 이 API를 사용할 것을 제안합니다. History API를 사용하면 탐색 링크를 변경하고 해시 대신 경로를 사용할 수 있습니다. 

구글 애널리스트 Martin Splitt도 같은 조언을 합니다.—기록 API를 사용하여 보기를 URL로 처리합니다. 그는 또한 href 속성이 있는 링크 마크업을 추가하고 각 보기에 대해 고유한 제목과 설명 태그를 만들 것을 제안합니다("약간의 추가 JavaScript" 사용).

따라서 기본 규칙은 링크를 크롤링할 수 있도록 만드는 것입니다. 링크가 따라오는지 확인하십시오. 구글 표준 SPA SEO의 경우 다음과 같이 나타납니다.

Google은 형식이 다른 링크를 구문 분석하려고 시도할 수 있지만 그렇게 하거나 성공할 것이라는 보장은 없습니다. 따라서 다음과 같은 방식으로 표시되는 링크는 피하십시오.

Google에서 기본 링크 형식으로 이해하는 HTML 요소를 사용하여 링크를 추가하는 것으로 시작하려고 합니다. 다음으로, 포함된 URL이 유효하고 작동하는 웹 주소인지, 그리고 URI(Uniform Resource Identifier) ​​표준 규칙을 따르는지 확인하십시오. 그렇지 않으면 크롤러가 웹 사이트의 콘텐츠를 제대로 인덱싱하고 이해할 수 없습니다.

오류 페이지 보기

단일 페이지 웹 사이트의 경우 서버는 오류 처리와 관련이 없으며 항상 모든 것이 정상임을 나타내는 200 상태 코드를 반환합니다(이 경우 올바르지 않음). 그러나 사용자는 때때로 잘못된 URL을 사용하여 SPA에 액세스할 수 있으므로 오류 응답을 처리할 수 있는 방법이 있어야 합니다. Google은 각 오류 코드(404, 500 등)에 대해 별도의 보기를 생성하고 JS 파일을 조정하여 브라우저를 해당 보기로 안내하도록 권장합니다.

보기의 제목 및 설명

제목 및 메타 설명 온페이지 SEO를 위한 필수 요소입니다. 잘 만들어진 메타 제목과 설명은 SERP에서 웹사이트의 가시성을 향상시키고 클릭률을 높일 수 있습니다.

SPA SEO의 경우 메타태그가 하나밖에 없기 때문에 관리가 어려울 수 있습니다. HTML 파일 전체 웹사이트의 URL입니다. 동시에 중복된 제목과 설명은 일반적인 SEO 문제.

이 문제를 해결하는 방법은 무엇입니까?

에 설정 또는 변경 메타 설명 및 SPA의 요소에서 개발자는 JavaScript를 사용할 수 있습니다. 

로봇 메타 태그 사용

로봇 메타 태그 웹 사이트의 페이지를 크롤링하고 인덱싱하는 방법에 대한 지침을 검색 엔진에 제공합니다. 올바르게 구현되면 검색 엔진이 웹 사이트의 가장 중요한 부분을 크롤링하고 색인을 생성하는 동시에 콘텐츠 중복이나 잘못된 페이지 색인 생성을 방지할 수 있습니다.

예를 들어 "nofollow" 지시어를 사용하면 검색 엔진이 특정 보기 내에서 링크를 따라가지 못하도록 방지할 수 있는 반면, robots 메타 태그의 "noindex" 지시어는 SPA의 특정 보기 또는 섹션이 인덱싱되지 않도록 제외할 수 있습니다.

자바스크립트를 사용하여 로봇 메타 태그를 추가할 수도 있지만 페이지의 로봇 메타 태그에 noindex 태그가 있는 경우 Google은 해당 페이지에서 자바스크립트를 렌더링하거나 실행하지 않습니다. 이 경우 Google에서 해당 코드를 볼 수 없기 때문에 JavaScript를 사용하여 noindex 태그를 변경하거나 제거하려는 시도는 유효하지 않습니다.

SPA에서 로봇 메타 태그 문제를 확인하려면 단일 페이지 앱을 실행하세요. SE 랭킹으로 감사. 감사 도구는 귀하의 웹사이트를 분석하고 귀하의 웹사이트가 SERP 상단에 도달하는 것을 차단하는 기술적 문제를 감지합니다.

소프트 404 오류 방지

소프트 404 오류는 웹사이트가 존재하지 않는 페이지에 대해 적절한 200(찾을 수 없음) 대신 상태 코드 404(정상)을 반환할 때 발생합니다. 페이지가 존재한다고 서버가 검색 엔진에 잘못 알리고 있습니다. 

Soft 404 오류는 구축 방식과 사용 기술로 인해 SPA 웹사이트에서 특히 문제가 될 수 있습니다. SPA는 콘텐츠를 동적으로 로드하기 위해 JavaScript에 크게 의존하기 때문에 서버에서 요청된 페이지의 존재 여부를 항상 정확하게 식별할 수 있는 것은 아닙니다. 일반적으로 클라이언트 쪽 렌더링된 SPA에서 사용되는 클라이언트 쪽 라우팅으로 인해 의미 있는 HTTP 상태 코드를 사용하는 것이 불가능한 경우가 많습니다.

다음을 적용하여 소프트 404 오류를 방지할 수 있습니다. 다음 기술 중 하나:

• 서버에서 404 HTTP 상태 코드를 트리거하는 URL로 JavaScript 리디렉션을 사용합니다.
• JavaScript를 통해 오류 페이지에 noindex 태그를 추가합니다. 

느리게 로드된 콘텐츠

지연 로딩은 일반적으로 사용자가 페이지를 아래로 스크롤할 때와 같이 필요할 때만 이미지나 동영상과 같은 콘텐츠를 로드하는 방식을 말합니다. 이 기술은 향상시킬 수 있습니다 페이지 속도 및 경험, 특히 많은 양의 콘텐츠를 한 번에 로드할 수 있는 SPA의 경우. 하지만 잘못 적용하면 의도하지 않게 Google에서 콘텐츠를 숨길 수 있습니다.

Google이 페이지의 모든 콘텐츠를 인덱싱하고 볼 수 있도록 하려면 예방 조치를 취하는 것이 중요합니다. 모든 관련 콘텐츠가 뷰포트에 표시될 때마다 로드되는지 확인하세요. 다음과 같이 할 수 있습니다.

• 적용 네이티브 지연 로딩 이미지 및 iframe의 경우 "loading" 속성을 사용하여 구현됩니다.
• 사용 IntersectionObserver API 개발자가 요소가 뷰포트에 들어가거나 나올 때를 볼 수 있고 폴리 필 브라우저 호환성을 보장합니다.
• 뷰포트에 들어갈 때만 콘텐츠를 쉽게 로드할 수 있도록 하는 일련의 도구 및 기능을 제공하는 JavaScript 라이브러리에 의지합니다.

어떤 방법을 선택하든 올바르게 작동하는지 확인하십시오. 사용 인형극 스크립트 로컬 테스트를 실행하고 Google Search Console의 URL 검사 도구를 사용하여 모든 이미지가 로드되었는지 확인합니다.

소셜 공유 및 구조화된 데이터

소셜 공유 최적화는 종종 웹사이트에서 간과됩니다. 그것이 아무리 사소해 보일지라도 Twitter 카드와 Facebook의 Open Graph를 구현하면 인기 있는 소셜 미디어 채널에서 풍부한 공유가 가능하여 웹 사이트의 검색 가시성에 좋습니다. 이러한 프로토콜을 사용하지 않는 경우 링크를 공유하면 임의의, 때로는 관련 없는 시각적 개체의 미리 보기 표시가 트리거됩니다.

사용 구조화 된 데이터 크롤러가 읽을 수 있는 다양한 유형의 웹 사이트 콘텐츠를 만드는 데에도 매우 유용합니다. Schema.org 비디오, 레시피, 제품 등과 같은 데이터 유형에 레이블을 지정하는 옵션을 제공합니다.

JavaScript를 사용하여 SPA에 필요한 구조화된 데이터를 JSON-LD 형식으로 생성하고 페이지에 삽입할 수도 있습니다. JSON-LD는 생성 및 구문 분석이 쉬운 경량 데이터 형식입니다. 

다음을 수행할 수 있습니다. 풍부한 결과 테스트 Google에서 현재 할당된 데이터 유형을 검색하고 웹 페이지에 대한 풍부한 검색 결과를 사용할 수 있습니다.

SEO를 위한 SPA 테스트

SPA 웹사이트의 SEO를 테스트하는 방법에는 여러 가지가 있습니다. Google Search Console 또는 모바일 친화성 테스트와 같은 도구를 사용할 수 있습니다. Google 캐시를 확인하거나 검색 결과에서 콘텐츠를 검사할 수도 있습니다. 아래에 각각의 사용 방법을 설명했습니다.

Google Search Console의 URL 검사

URL 검사 섹션에서 필수 크롤링 및 인덱싱 정보에 액세스할 수 있습니다. Google 검색 콘솔. Google이 귀하의 페이지를 보는 방법에 대한 전체 미리보기를 제공하지는 않지만 다음을 포함한 기본 정보를 제공합니다.

• 검색 엔진이 귀하의 웹사이트를 크롤링하고 인덱싱할 수 있는지 여부 
• 렌더링된 HTML 
• 검색 엔진에서 로드 및 처리할 수 없는 페이지 리소스

보고서를 열어 페이지 인덱싱, 모바일 사용성, HTTPS 및 로고와 관련된 세부 정보를 확인할 수 있습니다.

Google의 모바일 친화적 테스트

Google의 모바일 친화적 테스트 GSC와 거의 동일한 정보를 보여줍니다. 또한 렌더링된 페이지를 모바일 화면에서 읽을 수 있는지 확인하는 데 도움이 됩니다.

에 대한 우리의 가이드를 읽으십시오. 모바일 검색 엔진 최적화 웹사이트를 모바일 친화적으로 만드는 방법에 대한 전문가 팁을 얻으십시오.

을 더한, 헤드리스 크롬 SPA를 테스트하고 JS가 실행되는 방식을 관찰하기 위한 훌륭한 도구입니다. 기존 브라우저와 달리 헤드리스 브라우저는 전체 UI가 없지만 실제 사용자가 경험하는 것과 동일한 환경을 제공합니다. 

마지막으로 다음과 같은 도구를 사용합니다. BrowserStack 다른 브라우저에서 SPA를 테스트합니다.

Google 캐시 확인

SEO를 위해 SPA 웹사이트를 테스트하는 또 다른 기본 기법은 웹사이트 페이지의 Google 캐시를 확인하는 것입니다. Google 캐시는 특정 시점에 Google 크롤러가 찍은 웹페이지의 스냅샷입니다.

캐시를 열려면:

• Google에서 페이지를 검색합니다. 
• 검색 결과 옆에 점 세 개가 있는 아이콘을 클릭합니다.
• 캐시됨 옵션을 선택합니다.

또는 검색 연산자 "cache:", 콜론 뒤에 URL을 붙여넣거나(공백 없이) 구글 캐시 검사기, 캐시된 버전을 확인하기 위한 간단한 무료 도구입니다.

노트! 페이지의 캐시된 버전이 항상 최신 버전은 아닙니다. Google은 정기적으로 캐시를 업데이트하지만 페이지가 업데이트된 시점과 새 버전이 캐시에 표시되는 시점 사이에 지연이 있을 수 있습니다. 페이지의 Google 캐시 버전이 오래된 경우 페이지의 현재 콘텐츠 및 구조가 정확하게 반영되지 않을 수 있습니다. 그렇기 때문에 단일 페이지 애플리케이션 SEO 테스트나 디버깅 목적으로 Google 캐시에만 전적으로 의존하는 것은 좋지 않습니다.

SERP에서 내용 확인

SPA가 SERP에 어떻게 표시되는지 확인하는 몇 가지 방법이 있습니다. 

• SERP에서 콘텐츠의 직접 인용을 확인하여 해당 텍스트가 포함된 페이지의 색인이 생성되었는지 확인할 수 있습니다.
• site: 명령을 사용하여 SERP에서 URL을 확인할 수 있습니다. 

마지막으로 둘 다 결합할 수 있습니다. 입력하다 사이트:도메인 이름 "콘텐츠 인용", 아래 스크린샷과 같이 콘텐츠가 크롤링되고 인덱싱되면 검색 결과에 표시됩니다.

기본 SEO에는 방법이 없습니다.

단일 페이지 애플리케이션의 특정 특성을 제외하고 대부분의 일반적인 최적화 조언이 이러한 유형의 웹사이트에 적용됩니다. 다음을 위한 최적화와 관련된 몇 가지 기본 SEO 전략:

• 보안. 아직 하지 않았다면 HTTPS로 웹사이트를 보호하세요. 그렇지 않으면 검색 엔진이 사이트를 버리고 사용자 데이터를 사용하는 경우 이를 손상시킬 수 있습니다. 교차하지 마십시오 웹 사이트 보안 정기적인 모니터링이 필요하므로 할 일 목록에서 제외하십시오. 확인 심각한 오류에 대한 SSL/TLS 인증서 웹사이트에 안전하게 액세스할 수 있도록 정기적으로:

• 콘텐츠 최적화. 다중 페이지 웹 사이트의 각 페이지에 대한 방법과 유사하게 각 보기에 고유한 제목 태그 및 설명 메타 태그를 작성하는 것과 같이 SPA에서 콘텐츠를 최적화하기 위한 구체적인 조치에 대해 이야기했습니다. 그러나 위의 조치를 취하기 전에 콘텐츠를 최적화해야 합니다. 콘텐츠는 올바른 사용자 의도에 맞게 구성되고 잘 구성되고 시각적으로 매력적이며 유용한 정보가 풍부해야 합니다. 사이트에 대한 키워드 목록을 수집하지 않은 경우 방문자에게 필요한 콘텐츠를 제공하기가 어려울 것입니다. 우리를 살펴보십시오 키워드 조사 가이드 새로운 통찰력을 위해.
• 링크 빌딩. 백링크는 귀하의 웹사이트에 대한 다른 리소스의 신뢰 수준을 Google에 알리는 데 중요한 역할을 합니다. 이 때문에 백링크 프로필을 구축하는 것은 사이트 SEO의 중요한 부분입니다. 두 개의 백링크는 동일하지 않으며 귀하의 웹사이트를 가리키는 각 링크는 다른 값을 보유합니다. 일부 백링크는 순위를 크게 높일 수 있지만 스팸성 백링크는 검색 존재를 손상시킬 수 있습니다. 다음에 대해 자세히 알아보세요. 백링크 품질 링크 프로필을 강화하기 위한 모범 사례를 따릅니다. 
• 경쟁자 모니터링. 웹 사이트 개발 초기 단계에서 이미 경쟁사에 대한 조사를 수행했을 가능성이 큽니다. 그러나 모든 SEO 및 마케팅 작업과 마찬가지로 틈새 시장을 지속적으로 모니터링하는 것이 중요합니다. 데이터가 풍부한 도구 덕분에 쉽게 유기적 및 유료 검색에서 라이벌의 전략 모니터링. 이를 통해 시장 환경을 평가하고, 주요 경쟁사 간의 변동을 파악하고, 유사한 사이트에서 이미 작동하는 성공적인 키워드 또는 캠페인에서 영감을 얻을 수 있습니다.

단일 페이지 애플리케이션 추적

GA4로 SPA 추적

SPA 웹사이트에서 사용자 행동을 추적하는 것은 어려울 수 있지만 GA4에는 이를 처리할 수 있는 도구가 있습니다. 사용하여 검색엔진 최적화를 위한 GA4, 사용자가 웹사이트에 참여하는 방식을 더 잘 이해하고, 개선이 필요한 영역을 식별하고, 데이터 기반 결정을 내려 사용자 경험을 개선하고 궁극적으로 비즈니스 성공을 주도할 수 있습니다.

아직 Google 애널리틱스를 설치하지 않은 경우 다음을 읽어보세요. GA4 설정 가이드 빠르고 정확하게 수행하는 방법을 찾으십시오. 

진행할 준비가 되면 다음 단계를 따르십시오.

• GA4 계정으로 이동한 다음 관리 섹션의 데이터 스트림으로 이동합니다. 웹 데이터 스트림을 클릭합니다.

• 향상된 측정 토글이 활성화되어 있는지 확인하십시오. 기어 아이콘을 클릭합니다.

• 페이지 보기 섹션에서 고급 설정을 열고 브라우저 기록 이벤트를 기반으로 페이지 변경 설정을 활성화합니다. 변경 사항을 저장하는 것을 잊지 마십시오. 또한 정확도에 영향을 줄 수 있으므로 페이지뷰와 관련이 없는 모든 기본 추적을 비활성화하는 것이 좋습니다.
• Google 태그 관리자를 열고 미리보기 및 디버그 모드를 활성화합니다.
• SPA 웹 사이트에서 다른 페이지를 탐색합니다.
• 미리보기 모드에서 GTM 컨테이너는 기록 변경 이벤트를 표시하기 시작합니다. 
• 미리보기 모드에서 GTM 컨테이너 옆에 있는 GA4 측정 ID를 클릭하면 GA4로 전송되는 여러 페이지 보기 이벤트를 관찰해야 합니다. 

이 단계가 작동하면 GA4에서 SPA 웹사이트를 추적할 수 있습니다. 그렇지 않은 경우 다음을 수행해야 할 수 있습니다. 추가 단계:

• GTM에서 기록 변경 트리거 구현.
• 개발자에게 dataLayer.push 코드 활성화 요청

SE Ranking의 Rank Tracker로 SPA 추적

또 다른 포괄적인 추적 도구는 SE Ranking의 순위 추적기. 이 도구를 사용하면 순위를 매길 키워드에 대한 단일 페이지 애플리케이션을 확인할 수 있으며 여러 지리적 위치, 장치 및 언어에서도 확인할 수 있습니다. 이 도구는 Google, Google Mobile, Yahoo! 및 Bing과 같은 인기 있는 검색 엔진에서 추적을 지원합니다.

추적을 시작하려면 다음을 수행해야 합니다. 프로젝트를 만들자. SE Ranking 플랫폼의 웹사이트, 키워드 추가, 검색 엔진을 선택및 경쟁자 지정.

프로젝트가 설정되면 여러 보고서로 구성된 순위 탭으로 이동합니다.

• 요약
• 상세한
• 사무용 겉옷
• 시장데이터

기본 상세 탭에 중점을 둘 것입니다. 프로젝트를 추가한 후 처음으로 보게 되는 보고서가 될 것입니다. 이 섹션의 상단에서 SPA를 찾을 수 있습니다. 

• 평균 위치
• 트래픽 예측
• 검색 가시성
• SERP 기능
• 상위 10%
• 키워드 목록  

이 그래프 아래에 표시된 키워드 표는 귀하의 웹사이트 순위가 매겨진 각 키워드에 대한 정보를 제공합니다. 대상 URL, 검색량, SERP 기능, 순위 역학 등과 같은 세부 정보가 포함됩니다. 열 섹션에서 사용할 수 있는 추가 매개변수로 테이블을 사용자 정의할 수 있습니다.

이 도구를 사용하면 선호하는 매개변수를 기반으로 키워드를 필터링할 수 있습니다. 대상 URL 및 태그를 설정하고 다른 날짜의 순위 데이터를 보고 결과를 비교할 수도 있습니다.

키워드 순위 추적기는 두 가지 추가 보고서를 제공합니다.

• 귀하의 웹사이트 순위 데이터: 여기에는 프로젝트에 추가한 모든 검색 엔진이 포함되며 "전체"라는 레이블이 붙은 단일 탭에서 찾을 수 있습니다.
• 기록 정보: 여기에는 기준일 이후 웹사이트 순위의 변화에 ​​관한 데이터가 포함됩니다. 이 정보를 찾으려면 과거 데이터 탭으로 이동하십시오. 

웹 사이트 위치를 모니터링하는 방법에 대한 자세한 내용은 다음 가이드를 확인하십시오. 다른 검색 엔진에서 순위 추적.

제대로 된 단일 페이지 응용 프로그램 웹 사이트

이제 SPA 웹 사이트에 대한 SEO의 모든 기능을 알고 있으므로 다음 단계는 이론을 실행하는 것입니다. 크롤러가 콘텐츠에 쉽게 액세스할 수 있도록 하고 검색 엔진의 눈에 웹 사이트가 빛나는 것을 지켜보십시오. 방문자에게 동적 콘텐츠 로드, 빠른 속도 및 원활한 탐색을 제공하는 동시에 검색 엔진에 정적 버전을 제공하는 것을 기억하는 것도 중요합니다. 또한 사이트맵이 올바른지 확인하고, 조각 식별자 대신 고유한 URL을 사용하고, 구조화된 데이터로 다양한 콘텐츠 유형에 라벨을 지정해야 합니다. 

JavaScript로 구동되는 단일 페이지 경험의 증가는 웹 콘텐츠와의 즉각적인 상호 작용을 갈망하는 현대 사용자의 요구를 충족시킵니다. SPA의 UX 중심의 이점을 유지하면서 검색 순위를 높이기 위해 개발자는 Airbnb의 엔지니어로 전환하고 있습니다. Spike Brehm은 "어려운 길"이라고 부릅니다.— 웹 개발의 클라이언트와 서버 측면의 균형을 능숙하게 조정합니다.

SE Ranking의 콘텐츠 마케팅 담당자이자 편집자인 Anastasia는 SEO, 마케팅 및 기술에 대해 글을 씁니다. SE 랭킹을 위한 다양한 주제를 다루는 것 외에도 그녀는 음악을 만들고, 오래된 영화를 보고, 강아지와 노는 데 시간을 보냅니다.

• SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
• PlatoAiStream. Web3 데이터 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
• 미래 만들기 w Adryenn Ashley. 여기에서 액세스하십시오.
• PREIPO®로 PRE-IPO 회사의 주식을 사고 팔 수 있습니다. 여기에서 액세스하십시오.
• 출처: https://seranking.com/blog/single-page-application-seo/