Angular의 $ 위치를 사용하여보기 변경을 트리거 할 때의 SEO 고려 사항

Question

내 사이트 : m.amsterdamfoodie.nl.

필자는 Angular-UI 라디오 버튼 세트를 오프 앵글 사이드 바에 구현하여 Angular 사이트의 주요 서브 페이지를 탐색했습니다. 이 버튼은 모델 변경을 트리거합니다. 컨트롤러의 변경 사항은 URL 변경을 포함하여 $location 개의 변경 사항을 구현하는 데 사용됩니다. 결과적으로 페이지에 명시적인 하이퍼 링크가 없지만 모든 URL을 색인화해야합니다.

Google에 사이트 맵을 제출했지만 극소수의 페이지가 색인되고 있습니다 (카테고리 서브 페이지 또는 개별 레스토랑 페이지 없음). 사실, 사이트 맵은 링크 구조의 부족을 대신 할 수 없다는 조언을 받았습니다. 이제 링크를 만드는 가장 좋은 방법에 대한 조언을 찾고 있습니다. 여기

는 HTML입니다 (그냥 내 현재 사고의 예를 들어 첫 번째 단추에 추가 링크,하지만 난이 오히려-않은 DRY 및 해제 직관적 찾기) :

<div class="btn-group btn-group-justified price"> 
    <label class="btn btn-default" ng-model="main.price" btn-radio="'1'"><a href="criteria/budget/1" ng-click="event.preventDefault()">Budget</a></label> 
    <label class="btn btn-default" ng-model="main.price" btn-radio="'2'">Mid-range</label> 
    <label class="btn btn-default" ng-model="main.price" btn-radio="'3'">Fine dining</label> 
</div> 

MainCtrl에서를하는 controllerAs main와 함께로드됩니다 나는

$scope.$watch 'main.price', (newVal) -> 
    if newVal 
     Restos.data.offcanvas = false 
     $location.path '/criteria/price/'+newVal 

Answer 1

당신은 구글 크롤러가 자바 스크립트, 크롤러에 표시됩니다 자바 스크립트에 의해 생성되므로 어떤 내용을 실행하지 않을 것이라고 가정해야합니다.

SPA의 SEO 문제에 대한 일반적인 해결책은 사전 렌더링 서비스 (예 : prerender.io)를 사용하여 크롤러 요청을 가로 채고 정적 HTML을 제공하는 것입니다.

내가 링크 된 서비스는 오픈 소스 라이브러리로 제품을 출시 한 SAAS입니다.