React.js에 대한 기사는 React.js가 SEO 목적에 매우 유용하다는 것을 지적하고 싶습니다. 불행히도, 나는 당신이 그것을 실제로 어떻게 읽었는지 결코. https://developers.google.com/webmasters/ajax-crawling/docs/getting-started처럼 _escaped_fragment_을 구현하고, URL에 _escaped_fragment_이 있거나 더 많은 정보가있을 때 React가 서버에서 페이지를 렌더링하도록 하시겠습니까?React.js를 어떻게 SEO에 사용합니까?
_escaped_fragment_에 의존 할 수 없으면 모든 잠재적 크롤링 사이트 (예 : 공유 기능)가 _escaped_fragment_을 구현하는 것은 아닙니다.
저는 React가 React를 SEO에 도움이되는 것으로 홍보 한 내용은 클라이언트에게 보내기 전에 서버에서 요청한 페이지를 렌더링 할 수 있다는 것과 관련이 있습니다. 따라서 검색 엔진과 관련된 다른 정적 페이지와 마찬가지로 색인이 생성됩니다.
ReactDOMServer.renderToString을 통해 서버 렌더링이 가능합니다. 방문자는 이미 렌더링 된 마크 업 페이지를받습니다. React 응용 프로그램은 일단 다운로드하여 실행하면 마크 업을 감지합니다. ReactDOM.render이 호출 될 때 내용을 바꾸는 대신 이벤트 바인딩을 추가합니다. 나머지 방문의 경우 React 응용 프로그램이 인계 받아 더 많은 페이지가 클라이언트에서 렌더링됩니다.
자세한 내용을 알고 싶다면 "유니버설 JavaScript"또는 "Universal React"(이전의 "isomorphic react"라고 함)를 검색하는 것이 좋습니다. 서버와 클라이언트 모두에서 렌더링 할 코드 기반.
node.js에서 멈추지 않을까요? – tyteen4a03
마크 업을 렌더링하기 위해 노드를 연기해야 함을 의미합니다. 요청을 처리하고 렌더링 된 마크 업을 제공하려는 언어를 자유롭게 사용할 수 있습니다. – Jack
NodeJ를 사용하는 데 제한을 두지 않을 것이라고 생각합니다. 스크립트를 적절하게 설계하면 다른 Javascript 엔진을 연기 할 수 있습니다. 예를 들어, 자바 세계에서는 Nashorn을 사용할 수 있습니다. 나는 Nashorn을 사용하여 webpack 번들 스크립트를 호출하는 것을 실험하고 있었고 가능한 것 같습니다. – ctrlplusb
다른 응답자가 말했듯이, 당신이 찾고있는 것은 동형 접근법입니다. 이렇게하면 검색 엔진에서 구문 분석 할 렌더링 된 콘텐츠가있는 서버에서 페이지를 가져올 수 있습니다. 다른 주석가가 언급했듯이, 이것은 서버 측 언어로서 node.js를 사용하는 것처럼 보이게 할 수도 있습니다. 이 작업을 수행하려면 자바 스크립트를 서버에서 실행해야한다는 것은 사실이지만 노드에서 모든 작업을 수행 할 필요는 없습니다.
이https://thebhwgroup.com/blog/isomorphic-web-design-react-scala
그 문서는 또한 동형 접근 이런 종류의 UX 및 SEO 장점을 설명합니다 : 예를 들어,이 기사는 스칼라를 사용하여 동형 페이지를 달성하고 반응하는 방법에 대해 설명합니다.
https://thebhwgroup.com/blog/isomorphic-web-design-react-scala는 훌륭한 링크입니다. 자세한 소개는 모든 것에 관련됩니다 (스칼라 만이 아닙니다). –
두 좋은 예를 구현 :
ReactDOMServer.renderToStaticMarkup를 통해 또한 가능하다
이 bolier 플레이트에 대한 의견을 보내주세요. https://github.com/Atyantik/react-pwa –
@AjayPatel이 좋은 것처럼 보입니다. 예제 사이트가 Google 애널리틱스 및 광고를로드하지 않으면 더 나은 점수를 얻을 것입니다 ... – w00t
잘 GTM을 관리하는 방법의 예일뿐입니다. 광고 감각을 추가하지 않았습니다. –
... on과 off 자바 스크립트와 https://react-redux.herokuapp.com/를 방문 돌았 시도하고 그 차이를 볼 수있는 브라우저 개발 도구에서 네트워크를 시계 : renderToString에
유사 단, React가 내부적으로 사용하는
data-react-id과 같은 추가 DOM 속성은 생성되지 않습니다. 여분의 속성을 제거하면 많은 바이트를 절약 할 수 있으므로 React를 단순 정적 페이지 생성기로 사용하려는 경우 유용합니다. 입니다.
이 사용 예는 [반응 - 정적 보일러] (https://github.com/koistya/react-static-boilerplate)입니다 ([tools/render.js] (https://github.com/koistya 참조) /react-static-boilerplate/blob/master/tools/render.js#L43), 43 행). – falsarella
또 다른 예제는 [React가있는 서버 측 렌더링] (https://camjackson.net/post/server-side-rendering-with-react)에서 찾을 수 있습니다. – falsarella
내 클라이언트 측 반응 앱이 실제로 SSR이없는 googlebot으로 작업하기 때문에 많은 답변에 동의하지 않아도됩니다.
SO answer here을 살펴보십시오. 나는 단지 그 기능을 최근에 작동시킬 수 있었지만 지금까지 아무런 문제가 없다는 것과 googlebot이 실제로 API 호출을 수행하고 리턴 된 컨텐츠를 색인 할 수 있음을 확인할 수 있습니다.
SSR, PWA, SEO와 같은 모든 기능을 염두에두고있는 코드가 포함 된 보일러 플레이트를 확인하십시오. https://github.com/Atyantik/react-pwa/ –
Google의 크롤러가 JavaScript를 잘 처리 할 수 있기 때문에 Google에서 사이트 순위를 신경 쓰는 경우해야 할 일은 없습니다. 검색 site:your-site-url으로 사이트의 SEO 결과를 확인할 수 있습니다.
당신은 또한 귀하의 사이트 순위와 같은 바이 및 PHP에 의해 구현하여 단절 측에 대해 신경 경우
는, 어쩌면 당신이 필요합니다 react-php-v8js.
다가오는 방문객을위한 참고 사항 : 질문에 링크 된 [ajax 크롤링 추천 기사] (https://developers.google.com/webmasters/ajax-crawling/docs/getting-started)는 다음과 같이 공식적으로 권장되지 않습니다. 2015 년 10 월] (https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html). – falsarella