내 웹사이트가 네이버, 구글등 검색 포털에 더 잘 검색될 수 있게 하는데 필요한 기술

1. X p re s s E n g i n eX E H u b

2. XE3
SEO
Handling
1. SEO?
2. XE3 SEO 설정
3. SEO를 다루는 XE3 코드 소개
4. SEO 처리 개선 - SeoUsable

3. SEO ?
검색 엔진 최적화 (Search Engine Optimization)
웹사이트의 콘텐츠가 검색엔진에 잘 색인 될 수 있도록 하는 작업
검색엔진이 웹사이트 페이지의 요약정보를 잘 해석할 수 있도록 해야 함

4. 용어
SEO 검색 엔진 최적화 (Search Engine Optimization)
검색엔진 네이버, 구글 등의 포털 서비스
요약정보
페이지의 제목, 내용 등이 정리된 정보
Meta 태그
Open Graph
제목, 설명, 링크, 미리보기 이미지등을 Meta 태그에 표시하는 방법을 정의한 규칙
SNS에 웹사이트 페이지 공유할 때 사용
서드파티 사용자가 추가한 XE3 플러그인

5. SEO
Handling
요약정보를 어떻게 다룰 것인가?
어떤 설정을 통해 요약정보를 만들 것인가?
어떻게 하면 좀 더 효율적으로 SEO를 처리할 수 있을까?

6. 웹사이트 구성
제목
주소
내용

7. 검색엔진이 해야할 일
여기서 뭐를 인덱싱 해야하는거야?

8. 요약정보를 찾자

9. SNS 에 공유할 때 Open Graph 사용
페이스북

10. XE3 사이트 기본 설정

11. SEO 설정

12. SEO를 다루는 XE3 코드 소개

13. Key-Words
Frontend
Frontend 는 css, js, image 등 asset 관리
페이지 출력에 필요한 파일을 효율적으로 관리
할 수 있는 기능 제공
HTML 관련 Tag 처리
Presenter
사용자 Request에 대한 HTML Response 처
리에 필요한 Theme, Skin, SEO 기능 실행
페이지 출력 처리
SEO
Presenter 에서 HTML 반환할 때 실행
서드파티가 SEO 처리를 커스터마이징 할 수
있도록 기능 제공
SEO 처리

14. Frontend Tags
Frontend Importer
FrontendHandler
BodyClass
HtmlPresenter JsonPresneter
Presenter
CSSFile Html IconFile JSFile Meta
Package Preload RouteTitle Translation

15. Frontend::Title()
XeFrontend::title('site title');
PHP

16. Meta 태그 수정
description, keyword 등록
XeFrontend::meta('description')->property('description')-
>content('description')->load();
XeFrontend::meta('keyword')->property('keyword')->content('keyword)-
>load()
// open graph 관련 정보 등록 또는 수정
XeFrontend::meta('og:type')->property('og:type')->content('article')->load();
XeFrontend::meta('og:description')->property('og:description')-
>content('descrption')->load()
// open graph 관련 정보 출력 제외
XeFrontend::meta('og:type')->unload()
PHP
* 시스템에서 정의된 Meta 태그를 수정할 수 있음
* XeFrontend::meta() 로 Meta 태그를 추가, 수정, 삭제할 수 있음
* Meta 태그 추가
* XeFrontend::meta()->property('description')-
>content('등록 내용')->load();
* Meta 태그 수정
* XeFrontend::meta('description')-
>property('description')->content('등록 내용')->load();
* Meta 태그 삭제
* XeFrontend::meta(‘description')->unload();

17. Meta 태그 수정
서버
사용자 컴퓨터
사용자 컴퓨터
HTML 문서
서버
Controller
Presenter
Frontend
SEO
XeFrontend::meta('og:type')->property('og:type')->content('article')->load();
PHP key property value content value

18. SEO Importer
Seo Importer
SEO (SeoHanlder)
BasicImporter OpenGraphImporter TwiterCardImporter
SeoHandler::addImporter()
Custom Importer 추가
* SEO-importer 는 XE3 에서 SEO 관련 처리를 담당하는 클래스
* 기본으로 Basic, OpenGraph, TwitterCard Impoert 제공
* Basic 은 keyword, descreiption 처리
* OpenGraph 는 og:* 처리
* 서드파티가 AbstractImporter 클래스를 만들고
SeoHandler::addImporter()
* Custom Importer 로 각 웹사이트에 맞게 구성할 수 있음

19. SEO 처리 개선
서버
사용자 컴퓨터
사용자 컴퓨터
HTML 문서
서버
Controller
Presenter
Frontend
SEO

20. SEO 처리 개선
서버
사용자 컴퓨터
사용자 컴퓨터
HTML 문서
서버
Controller
Presenter
Frontend
SEO
Model(Database)
*출력되는 Model 에서 SEO 처리
*데이터가 출력될 때 SEO를 처리할 수 있도록 해서 시스템에서 SEO가 자동으로 처리되도록 함
*게시판 Board Model 의 SEO 처리 예시
*게시판 게시물 내용 페이지에서 플러그인, 컨트롤러, 뷰 가 SEO를 처리하지 않고 Model 이 처리함
*게시판에서 출력되는 내용이 있는 경우 XE3에서 자동으로 SEO 설정
*SeoUsable
*Board Model 은 SeoUsable 을 구현했음
*getTitle(), getDescription(), getKeyword() .. 등 으로 구성됨
*SeoUsable 의 구현체가 출력될 때 XE3가 해당 인터페이스 실행
*화면 출력하기 전에 SeoHandler가 Presenter의 data를 확인해서 SeoUsable 이 있는 경우 SEO

21. Page Plugin 개선
제목, 설명이 반영되지 않음

22. SeoUsable 구현
// plugins/page/src/Models/PageModel.php
use XpressengineSeoSeoUsable;
...
class PageModel extends Document implements CommentUsable, SeoUsable
...
/**
* Returns title
*
* @return string
*/
public function getTitle()
{
$title = str_replace('"', '"', $this->getAttribute('title'));
return $title;
}
PHP

23. Model 기준으로 SEO 처리
PageModel 이 사용되는 모든 페이지에서 SEO 자동으로 처리

24. T h a n k y o u
X E H U B