React 전자상거래 웹사이트에 대한 SEO 모범 사례
게시 됨: 2022-04-05React는 다양한 웹사이트, 특히 전자상거래 사이트에서 사용되는 최고의 JavaScript 프레임워크 중 하나로 부상했습니다.
구축된 방식 때문에 React 웹사이트는 검색 엔진 최적화(SEO)와 관련하여 몇 가지 특정 고려 사항이 있으며, React SPA(단일 페이지 애플리케이션)에 대한 고유한 SEO 모범 사례가 있습니다.
이 가이드에서는 React 전자 상거래 사이트가 SEO에 맞게 올바르게 구성되었는지 확인하는 방법과 검색에 최적화된 전자 상거래 웹 사이트에서 React를 사용할 때의 장단점을 살펴보겠습니다.
리액트란?
React는 공통 UI 구성 요소를 기반으로 사용자 인터페이스를 구축하는 데 사용할 수 있는 JavaScript 라이브러리입니다. 회사 및 개인을 포함한 개발자의 오픈 소스 커뮤니티와 함께 Facebook의 모회사 Meta에서 유지 관리합니다.
오픈 소스이기 때문에 React도 무료로 사용할 수 있습니다. 단일 페이지 애플리케이션(위에서 언급한 SPA) 또는 모바일 앱의 기본 프레임워크를 형성할 수 있습니다.
React가 전자 상거래에 좋은 이유는 무엇입니까?
UI에 대한 React의 초점은 사용자 경험(UX)을 디자인의 중심에 두는 매끄럽고 원활한 전자 상거래 웹사이트를 만드는 데 유용한 도구라는 것을 의미합니다.
콘텐츠는 클라이언트 측에서 제공되며 페이지를 새로 고칠 필요가 없으므로 고객이 웹 사이트를 더 빠르고 쉽게 탐색할 수 있으며 페이지 로딩 속도에 영향을 미치는 서버 지연이 줄어듭니다.
React의 다재다능함은 데스크톱 전자상거래 사이트와 모바일 앱에서 모두 사용할 수 있다는 것을 의미하므로 Progressive Web Apps를 만들고자 하는 개발자에게 가장 쉬운 옵션 중 하나가 됩니다.
검색 엔진이 React 웹사이트를 크롤링할 수 있습니까?
검색에 최적화된 모든 웹사이트와 마찬가지로 로봇(특히 Googlebot)이 React 사이트의 콘텐츠를 보는 방식을 이해하는 것이 중요합니다.
일반적으로 Google은 웹사이트를 2단계로 크롤링하여 콘텐츠를 식별합니다.
소스 코드 크롤링
먼저 Googlebot이 웹사이트를 크롤링하고 HTML, 페이지 헤더 등을 포함한 소스 코드를 검색합니다.
DOM 렌더링
둘째, Googlebot은 페이지에 사용된 JavaScript를 포함하여 DOM(Domain Object Model)을 렌더링합니다. Chrome의 내장 개발자 도구 및 다른 브라우저의 동등한 기능을 사용하여 이를 식별할 수 있습니다.
React는 클라이언트 측 JavaScript 프레임워크이므로 Googlebot이 페이지를 식별하는 데 어려움이 있을 수 있습니다. 이는 기존 웹사이트와 달리 React가 한 페이지에서 다른 페이지로 이동할 때 서버에 요청을 보내지 않아 Google에서 다른 페이지를 보기 어렵기 때문입니다.
서버 측 렌더링을 사용하도록 React를 구성할 수 있지만 Googlebot은 사이트를 탐색할 때 JavaScript 파일 및 기타 서버 기반 리소스를 계속 렌더링하지 않습니다. 이 때문에 모범 사례에 따라 SEO용 React 전자 상거래 웹사이트를 설정하는 것이 중요합니다.
React의 일반적인 SEO 문제
React 전자 상거래 웹 사이트에는 몇 가지 일반적인 SEO 문제가 있습니다.
콘텐츠가 검색되지 않음/인덱싱 속도가 느림
Googlebot은 크롤링하는 각 웹사이트에 '렌더링 예산'을 할당하며 일반적으로 해당 예산이 소진되면 떠납니다. 이렇게 하면 탐색 중에 동적 URL을 생성하는 웹 사이트와 같이 소규모 웹 사이트가 크롤러의 관심을 공유하고 무한 크롤링 루프를 방지할 수 있습니다.
React 웹사이트는 SPA로 작동하기 때문에 모든 콘텐츠를 크롤링하기 전에 전체 사이트를 렌더링해야 합니다. 이로 인해 콘텐츠 검색이 지연되고 크롤러 측에서 추가 리소스가 소모되어 크롤링 및 인덱싱되는 페이지 수가 줄어들 수 있습니다.
서버 측 렌더링 및 사전 렌더링은 로봇의 리소스 부담을 일부 덜어주고 인덱스에 새 페이지가 표시되는 속도를 개선하는 데 도움이 됩니다.
검색 로봇이 업데이트된 콘텐츠를 감지하는 속도가 느림
이것은 위 문제의 파생물입니다. 페이지를 변경할 때 해당 변경 사항이 검색 결과에 반영되기까지 시간이 걸릴 수 있습니다.
다시 말하지만, 이는 React를 사용할 때 페이지가 렌더링되는 방식 때문이며, 이로 인해 업데이트된 페이지가 Google의 유한 크롤러 리소스에 의해 더 오랫동안 눈에 띄지 않게 될 수 있습니다.
'깊은' 페이지는 거의 크롤링되지 않았습니다(또는 전혀 크롤링되지 않음).
사이트 계층 구조 깊숙이 묻혀 있는 페이지는 Googlebot이 도달할 가능성이 적습니다. 특히 계층 구조에서 상위에 상당한 렌더링 예산을 이미 지출한 경우에는 더욱 그렇습니다.
다시 한 번, 사전 렌더링은 할당 가능한 크롤링 예산이 소진되기 전에 검색 크롤러가 웹사이트의 폴더 구조에 더 깊이 침투하는 데 도움이 되는 유용한 도구가 될 수 있습니다.
[전자책] 크롤링 가능성
전자책 읽기React 전자 상거래 사이트를 최적화하는 방법
React 전자 상거래 SEO에 대한 몇 가지 모범 사례를 통해 사이트와 개별 페이지에 검색 색인에 포함될 가능성을 높일 수 있습니다.
고유 페이지 URL
위에서 언급한 동적 URL 문제에 대한 모범 사례는 웹사이트에서 모든 페이지에 고유한 정적 URL을 제공하는 것입니다. 그런 다음 콘텐츠는 검색 엔진이 결과 페이지에서 자신 있게 크롤링, 색인 생성 및 순위를 지정할 수 있는 단일 영구 위치(페이지의 표준 URL)와 연결됩니다.
React Router는 React 웹사이트에서 이를 달성하는 방법입니다. React Router는 사이트의 모든 페이지에 고유한 영구 URL을 제공할 뿐만 아니라 UI를 특정 URL과 정렬할 수 있습니다.
동형 반응
Isomorphic React는 서버 측 렌더링을 활성화하여 크롤러의 렌더 예산에 대한 압박을 완화하는 방법입니다. 클라이언트 측에서 JavaScript가 비활성화된 경우를 감지하고 웹 사이트 HTML의 서버 측 렌더링 형식을 생성하여 작동합니다. 클라이언트 측 렌더링을 사용할 수 있는 경우 웹사이트는 일반적인 방식으로 React SPA로 로드됩니다.
이렇게 함으로써 Isomorphic React는 검색 크롤러의 가시성 문제를 극복하고 페이지의 검색 가능성을 개선하고 클라이언트 측 JavaScript가 켜진 사람 방문자를 위한 매끄럽고 원활한 React 경험을 손상시키지 않습니다.
사전 렌더링
사전 렌더링은 Isomorphic React와 유사한 결과를 얻는 또 다른 방법입니다. 크롤러가 렌더링되지 않은 소스 코드 대신 액세스할 수 있는 렌더링된 HTML의 캐시된 버전을 생성하여 작동합니다.
인간 방문자는 클라이언트 측 React 웹 사이트를 수신하여 부드럽고 번개처럼 빠른 SPA의 모든 이점을 다시 제공합니다. Google Puppeteer, Prerender.io 및 SEO4Ajax를 포함하여 선택할 수 있는 사전 렌더링 서비스가 많이 있습니다.
메타데이터 최적화
마지막으로 콘텐츠에 최적화된 메타데이터가 있는지 확인하세요. 이 메타데이터는 몇 년이 지난 후에도 여전히 온페이지 SEO에서 중요한 요소입니다.
고유하고 최적화된 URL뿐만 아니라 각 페이지에는 고유한 제목 태그 및 기타 관련 메타 태그가 있어야 페이지가 눈에 띄게 하고 검색 로봇이 페이지를 특정 주제 또는 기본 키워드와 연결하도록 표지판을 표시해야 합니다.
React Helmet은 React 전자 상거래 웹사이트에서 메타데이터 SEO 편집에 직접 액세스할 수 있도록 하여 이를 달성하는 좋은 방법입니다. 이러한 방식으로 구식 SEO 모범 사례와 클래식 메타데이터 키워드를 현대적이고 모바일 친화적인 React 전자 상거래 웹사이트의 모든 이점과 결합할 수 있습니다.