SPA 형태의 웹앱에서 SEO 처리 하실줄 아시는분. 정보
SPA 형태의 웹앱에서 SEO 처리 하실줄 아시는분.본문
추천
0
0
댓글 4개
제가 읽어봣는데
자바스크립트로 SPA 로 구현을 하면
크롤러가 링크를 타고 들어가도 자바스크립에 의한 페이지 내용을 받아오기 어려우니까
구글 크롤러가 지원하는 방식으로
서버단에서 출력페이지를 지원하라 라는 뜻으로 요약 될거 같습니다.
SPA 의 url 을 구성하는 방법 중
크게 2가지 방식인
해쉬뱅(#!)을 이용하는 것과 (http://seo-sample-hashbang.azurewebsites.net/#!/posts/1)
해쉬뱅(#!)을 이용하지 않는 것이 있습니다. (http://seo-sample.azurewebsites.net/posts/1)
1. 해쉬뱅(#!)을 이용한 경우는
크롤러가 수집된 링크 주소에서 #! 을 ?_escaped_fragment_= 으로 치환을 해서
서버로 다시 요청하므로 (http://seo-sample-hashbang.azurewebsites.net/?_escaped_fragment_=/posts/1)
서버에서는 _escaped_fragment_ 파라미터에 값이 넘어오는지 확인하여
자바스크립를 통해 출력하는 것과 같이 동일하게 데이타를 출력하게 해주어라고 하는 뜻 같습니다.
2. 해쉬뱅(#!)을 이용하지 않는 경우는
다음과 같은
<meta name="fragment" content="!">
메타태그를 줌으로 해서 크롤러가 SPA 임을 인식하게 만듭니다.
그러면, 크롤러는
http://seo-sample.azurewebsites.net/posts/1
를
http://seo-sample.azurewebsites.net/posts/1?_escaped_fragment_=
와 같은 형태로 주소에 ?_escaped_fragment_= 를 붙여서 변환한다음
서버로 다시 요청합니다.
서버에서는 isset 을 통해 _escaped_fragment_ 파라미터의 존재여부를 확인하고
자바스크립를 통해 출력하는 것과 같이 동일하게 데이타를 출력하게 해주어라고 하는 뜻 같습니다.
자바스크립트로 SPA 로 구현을 하면
크롤러가 링크를 타고 들어가도 자바스크립에 의한 페이지 내용을 받아오기 어려우니까
구글 크롤러가 지원하는 방식으로
서버단에서 출력페이지를 지원하라 라는 뜻으로 요약 될거 같습니다.
SPA 의 url 을 구성하는 방법 중
크게 2가지 방식인
해쉬뱅(#!)을 이용하는 것과 (http://seo-sample-hashbang.azurewebsites.net/#!/posts/1)
해쉬뱅(#!)을 이용하지 않는 것이 있습니다. (http://seo-sample.azurewebsites.net/posts/1)
1. 해쉬뱅(#!)을 이용한 경우는
크롤러가 수집된 링크 주소에서 #! 을 ?_escaped_fragment_= 으로 치환을 해서
서버로 다시 요청하므로 (http://seo-sample-hashbang.azurewebsites.net/?_escaped_fragment_=/posts/1)
서버에서는 _escaped_fragment_ 파라미터에 값이 넘어오는지 확인하여
자바스크립를 통해 출력하는 것과 같이 동일하게 데이타를 출력하게 해주어라고 하는 뜻 같습니다.
2. 해쉬뱅(#!)을 이용하지 않는 경우는
다음과 같은
<meta name="fragment" content="!">
메타태그를 줌으로 해서 크롤러가 SPA 임을 인식하게 만듭니다.
그러면, 크롤러는
http://seo-sample.azurewebsites.net/posts/1
를
http://seo-sample.azurewebsites.net/posts/1?_escaped_fragment_=
와 같은 형태로 주소에 ?_escaped_fragment_= 를 붙여서 변환한다음
서버로 다시 요청합니다.
서버에서는 isset 을 통해 _escaped_fragment_ 파라미터의 존재여부를 확인하고
자바스크립를 통해 출력하는 것과 같이 동일하게 데이타를 출력하게 해주어라고 하는 뜻 같습니다.
2번은 서버에서 리라이트가 사용 가능할때만 가능한 방법 입니다.
감사합니다.
이해가 되셧는지 모르겟습니다.
요지는
크롤러가 읽을수 있는 페이지를 따로 설정해서 보여주는 것인데요.
http://seo-sample-hashbang.azurewebsites.net/#!/posts/1
이런 주소에 대해 크롤러가
http://seo-sample-hashbang.azurewebsites.net/?_escaped_fragment_=/posts/1
이런 주소로 재 요청을 했을때
자바스크립트로
http://seo-sample-hashbang.azurewebsites.net/#!/posts/1
에서 보여줫던 내용들을
http://seo-sample-hashbang.azurewebsites.net/?_escaped_fragment_=/posts/1
에서 자바스크립트나 css 는 제거 하고
순수 html 양식으로 해당 포스트의 제목, 내용, 작성자, 날짜, 기타 링크 같은 것들을
그대로 보여주시면 됩니다.
요지는
크롤러가 읽을수 있는 페이지를 따로 설정해서 보여주는 것인데요.
http://seo-sample-hashbang.azurewebsites.net/#!/posts/1
이런 주소에 대해 크롤러가
http://seo-sample-hashbang.azurewebsites.net/?_escaped_fragment_=/posts/1
이런 주소로 재 요청을 했을때
자바스크립트로
http://seo-sample-hashbang.azurewebsites.net/#!/posts/1
에서 보여줫던 내용들을
http://seo-sample-hashbang.azurewebsites.net/?_escaped_fragment_=/posts/1
에서 자바스크립트나 css 는 제거 하고
순수 html 양식으로 해당 포스트의 제목, 내용, 작성자, 날짜, 기타 링크 같은 것들을
그대로 보여주시면 됩니다.