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