2015-01-28 8 views
6

반응 라우터를 사용하는 ReactJS 애플리케이션에 외부 링크가 없다는 것을 알았습니다. 검색 엔진은 사이트에 연결된 많은 콘텐츠가 있음을 인식하지 못합니다. Prerender.io는 이것에 대한 좋은 해결책 인 것처럼 보이지만 ReactJS 응용 프로그램에서 작동하도록 할 수는 없습니다.SEO 용 ReactJS와 prerender.io 사용

프리젠 테이션을 ReactJS와 함께 사용할 수 있습니까? 그렇지 않다면 모든 렌더링 서버 측을 수행하지 않고 내 사이트의 SEO를 향상시킬 수있는 또 다른 좋은 방법이 있습니까?

EDIT : 더 자세히 조사하자면 반응 라우터는 기본적으로 "#"을 사용하고 "#!"는 사용하지 않는다는 것을 깨달았습니다. 반응 라우터가 "#!"와 작동하도록 할 수 있습니까?

+0

호기심, 나는 반응하는 개발자가 아니지만 html5mode 반응 라우팅으로 작업하는 [react-spa.herokuapp.com/discussions]를 볼 수 있습니다. –

+0

@ritmatter 우리는 또한 SEO 최적화가 필요한 ReactJ 애플리케이션을 개발하는 동안이 문제에 직면 해 왔습니다. SEO freindly 웹 앱을 만들 수있는 reactjs 보일러 플레이트를 확인하십시오. https://github.com/Atyantik/react-pwa/. –

답변

2

프리 렌더는 캐싱 된 html을 일반 사용자에게 제공 할 수 없기 때문에 실제 URL을 기대할 수 있습니다 (해시가 서버로 전송되지 않음).

가 서버에서
Router.run(routes, Router.HistoryLocation, function (Handler) { 

정적 파일과 일치하지 않는 모든 경로 중 하나를 전송 인덱스에 의해 제공되는 것을 보장해야합니다 :

는-반응 라우터는 역사 모드를 사용하고 수 있도록 설정하는 경우 .html 또는 prerender를 사용하십시오.

자세한 내용은 '여기에 서버 이름 삽입'을 (를) 검색하여 'index.html에 모든 요청 보내기'를 검색 할 수 있습니다.


기본적으로 프리 렌더링은 특정 상황에서만 적용됩니다. 당신은 Node.js를에 express.js 미들웨어를 사용하는 경우 다음 예입니다 :

당신은 다른 미들웨어 유사한 수정을 알아낼 수 있어야한다 (덜 유연한 언어 포크를 필요로합니다).

+0

나는 이것을 시도했지만 여전히 작동하지 않았다. 프리렌더는 해시 대신에 hashbang으로 작업해야하지만 분명히 그렇게 할 수는 없습니다. – ritmatter

+0

@ritmatter, 답변을 업데이트했습니다. 또한, 그들의 문서를 읽으십시오 ... 그들은'#!'URL을 사용하지 않을 것을 명시 적으로 권장합니다. – FakeRainBrigand

+0

업데이트 주셔서 감사합니다. "#!" URL에 [email protected]의 답장이 왔습니다. 두 가지 전략이있을 수 있습니까? – ritmatter