2019-07-10 Angular routing & navigation

1. SPA와 SEO 그리고 Angular

 

SEO : 검색엔진 최적화 

 

검색로봇이 24시간 365일 전세계 사이트를 뒤지고 다님(수백,수천 대 일 수 있음 구글은)

상세 페이지별로 검색하면서 다님.

페이지의 HTML구조를 시맨틱하게 사용해야하는 이유가 태그의 이름을 보고 이 페이지가 뭐하는 페이지인지를 추측한다. 

 

SPA는 기본적으로 Ajax통신을 사용한다. Ajax 주소창이 변하지 않는 약점이 있다= 모든 페이지가 주소가 하나.

 -> 검색엔진이 이 페이지가 하나인지 여러개인지 알 수가 없다.

 -> 모든 페이지마다 고유한 url을 갖는 방법으로 해결

(Angular의 router기능을 활용한다면 해결가능하고 SEO를 일부충족 시킬 수 있다.

하지만, 완전충족을 하려면 서버가 페이지를 제공해줘야하며 SSR(서버사이드랜더링) Angular에는 Angular universal이란게 있다. ) 

 

 

Angular에는 a태그에 [routerLink]라는 디렉티브를 제공

따라서

<nav>
  <a [routerLink]="'/'">Logo</a>  // 이 표기법 보단 아래 service에 있는 표기법을 사용한다.
  <a routerLink="service">Service</a>
  <a routerLink="about">About</a>
</nav>

위처럼 사용한다.