sencha seo

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 도입



2.요청된 페이지를 파싱 후 html을 생성


(5).ajax로 새로운 내용 요청

(6).요청에 맞는 컨텐츠를 생성 (7).생성된 컨텐츠를 전송

(8).전송받은 컨텐츠를 html 요소로 추가

MINT-SOFT 5

사용자

웹서버

웹과 AJAX(3)-AJAX의 극단적 사용



2.비어있는 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)-동작 방식



2.비어있는 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 생성 요청


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/

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

sencha seo

Engineering