Sencha seo
- 2. 목차 웹 페이지 웹과 AJAX SPA 프레임워크 검색엔진과 SEO 검색엔진과 SPA Headless-Browser Prerender.io Sencha Sencha-SEO 시장성 MINT-SOFT2
- 3. 웹 페이지 3대 구성 요소 HTML CSS javascript HTML 실제 웹 페이지의 내용 javascript 웹 페이지의 요소를 조작 및 처리 CSS 웹 페이지의 UI 및 스타일을 처리 MINT-SOFT3
- 4. 웹과 AJAX(1)-전통적인 방식 (1).페이지 요청 (3).생성된 html를 전송 2.요청된 페이지 를 파싱후 html 을 생성 (4).생성된 html 읽음 MINT-SOFT4 웹서버사용자
- 5. 웹과 AJAX(2)-AJAX 도입 (1).페이지 요청 (3).생성된 html를 전송 2.요청된 페이지 를 파싱 후 html 을 생성 (4).생성된 html 읽음 (5).ajax로 새로운 내용 요청 (6).요청에 맞는 컨텐츠를 생성(7).생성된 컨텐츠를 전송 (8).전송받은 컨텐츠를 html 요 소로 추가 MINT-SOFT5 사용자 웹서버
- 6. 웹과 AJAX(3)-AJAX의 극단적 사용 (1).페이지 요청 (3).생성된 html를 전송 2.비어있는 html 전송 (4).생성된 html 읽음 (5).ajax로 새로운 내용 요청 6.요청된 맞는 컨 텐츠 를 생성(7).생성된 컨텐츠 를 전송 (8).전송받은 컨텐츠를 html 요 소로 추가 MINT-SOFT6 사용자 웹서버
- 7. SPA 프레임워크(1)-용어정리 SPA(Single Page Application) 앞에 나온 AJAX를 극단적 사용을 기반으로 웹 구조 하나의 HTML 페이지로 부터 동작하는 웹 어플리케이션 hash-URL(#) SPA에서 url을 표현하기 위해 #을 붙인 URL 구조 (ex) http://www.example.com/#list hashbang(#!) SPA에서 검색엔진이 읽을 수 있도록 hash-URL을 수정한 규칙 (ex) http://www.example.com/#!list MINT-SOFT7
- 8. SPA 프레임워크(2)-SPA의 동작 방식 페이지로딩 • 서버로 부터 하나의 html을 전송 받음(비어있는 껍데기 페이지) • javascript,css등도 전송 받음 javascript 실행 • html 로딩이 완료 후 hashbang url에 따라 javascript로 페이지 생성 • 페이지 생성 이후 서버로 데이터 요청 데이타 전송 • javascript가 요청한 데이터를 전송함. • 전송 받은 데이터로 컨텐츠 생성해서 보여줌 javascript가 실행되어야만 하나의 페이지가 구성됨 MINT-SOFT8
- 9. SPA 프레임워크(3)- SPA 프레임워크 MINT-SOFT9
- 10. 검색엔진과 SEO(1)-동작방식 1.크롤링 검색 봇이 돌아다니면 서 웹페이지 문서를 가 져오는 단계 2.인덱싱 크롤링된 문서를 찾기 쉽게 분류하는 단계 3.검색 사용자의 요청에 의해 인덱싱된 문서 보여주 는 단계 MINT-SOFT10
- 11. 검색엔진과 SEO(2)-크롤링 웹사이트 웹사이트 웹사이트 특징 1.웹사이트의 내용만 가져옴 html이 반드시 필요 2.내용에 포함되지 않는 요소 제외 시킴 3.javascript,css는 내용에 포함되지 않으므로 크롤링에서 제외 MINT-SOFT11
- 12. 검색엔진과 SEO(3)-SEO 정의 및 방법 SEO 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지 를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업 메타태그활용 • html의 meta 태그 를 이용해서 현재 페이지를 검색 봇 에게 알림 사이트 맵 • 현재 사이트의 페 이지 목록을 검색 봇 에게 알림 url 구조개선 • 이해하기 쉬운 url 로 구조개선 검색엔진에게 페이지를 쉽게 가져가도록 하기 위한 방법 MINT-SOFT12
- 13. 검색엔진과 SEO(4)-중요점 내용이 존재하는 HTML 문서가 필요 MINT-SOFT13
- 14. 검색엔진과 SPA 프레임워크(1)-필수요소 "웹을 크롤링 하기 위해선 javascript가 필요 없어. 오직 하나의 완성된 html이 필요해" "하나의 페이지를 완성하기 위해선 반 드시 javascript가 실행되어야만 해 javascript가 실행되기 전까진 난 빈 껍 데기일 뿐이야." 검색 봇 SPA MINT-SOFT14
- 15. 검색엔진과 SPA 프레임워크(2)-대화 웹사이트 크롤링하게 페이지 줘봐 검색봇 과의 대화 줄게. 단 반드시 javascript 실행해야되 난 javascript가 필요 없어. 결국 너의 페이지는 빈 껍데기네 아니야.제발 javascript를 실행해줘 검색봇님께서 퇴장하였습니다. MINT-SOFT15
- 16. 검색엔진과 SPA 프레임워크(3)-검색봇 제안 "수많은 SPA들은 아래와 같이 처리해준다면 크롤링해서 검색엔진에 등록 시켜줄게." • url에 페이지를 표시하는 부분 변경 • #(hash)대신에 #!(hashbang)을 사용 URL 구조변경 • 너희 서버는 #!를 읽지 못하니 다른 방법으로 서버에 요청 • 크롤링때 #!을 _escaped_fragment_로 바꿔서 서버에 재 요청 크롤링 • _escaped_fragment_로 서버에 요청 할 때 하나의 완성된 html 필요 • 전송 받은 완성된 html를 검색엔진에 등록 html MINT-SOFT16
- 17. 검색엔진과 SPA 프레임워크(4)-필수 작업 SPA Server 개발 (php,java,asp...) SPA Client 개발 (javascript) 검색 봇을 위한 html 개발 (php,java,asp...) MINT-SOFT17 개발자
- 18. 검색엔진과 SPA 프레임워크(5)-HTML 검색봇을 위해 서버가 생성한 html 실제 웹 페이지 (SPA 프레임워크에서 동작 하는 HTML) SPA 프레임워크가 만들어낸 html을 서버에서 똑같이 구현하기란 불가능. MINT-SOFT18 SPA 개발자
- 19. Headless-Browser(1)-발생 "서버에서 직접 만든 html과 spa가 만든 html이 다르니 검색 품질도 떨어지고 일은 두배로 많아져서 힘이 든다. 다른 좋은 방법 없을까?" "SPA HTML생성은 나를 이용해봐 난 브라우져 없이 코딩으로 브라우져와 같은 화면 을 만들어 낼 수 있어" Headless-Browser MINT-SOFT19 개발자
- 20. Headless-Browser(2)-동작 방식 (1).페이지 요청 (3).생성된 html를 전송 2.비어있는 html 전송 (4).생성된 html 읽음 javascript 실행 (5).ajax로 새로운 내용 요청 6.요청된 맞는 컨텐츠 를 생성 (7).생성된 컨텐츠 를 전송 (8).전송받은 컨 텐츠 를 html 요 소로 추가 Headless- Browser (9).SPA에서 생 성된 HTML MINT-SOFT20 SPA
- 22. Headless-Browser(4)-검색엔진 Headless- Browser (1).html 생성 요청 (2).생성된 html를 전송 HTML 파 일 저장소 (3).html 저장 (4).크롤링 html 요청 (5).html 요청 (6).저장된 html를 전송 (7).검색엔진에 등록 MINT-SOFT22 SPA
- 23. Prerender.io(1)-솔루션 https://prerender.io/ MINT-SOFT23 Headless-Browser로 만들어진 솔루션
- 26. Sencha(2) MINT-SOFT26 가장 먼저 개발된 SPA 프레임워크 많은 수의 컴포넌트들. 모바일 웹 데스크탑 웹등 많은 수의 브라우져 지원 화려한 UI 잘 갖춰진 클래스 구조의 프레임워크 http://www.sencha.com/
- 28. Sencha-SEO(2)-목표 Sencha 프레임워크로 개발된 사이트 SEO 처리 Sencha의 여러 플랫폼을 모두 지원 • Sencha ExtJS • Sencha Touch • Sencha GXT MINT-SOFT28
- 29. 시장성 Sencha의 고객이 곧 우리의 고객이다. MINT-SOFT29