SEO가 무엇인지 설명하고 XE3가 어떻게 SEO를 처리하고 있는지 알아보겠습니다.
용어 정리
우선 용어에 대해서 얘기해 볼께요.
SEO
검색 엔진 최적화에 필요한 모든 것을 통칭하는 용어입니다.
검색엔진
네이버, 구글 같은 서비스를 생각하면 됩니다. 엔진이라고 하면 보통 눈에 보이지 않는 로봇이나, 기술적인 요소들의 덩어리를 생각할 수 있는데, 그렇지 않고 그냥 우리가 사용하는 웹사이트를 떠올리면 됩니다.
요약정보
‘우리가 보고 있는 웹사이트 페이지에 있는 정보를 요약해 놓은 것’이라고 생각하면 됩니다. 이 요약정보는 ‘Meta 태그’라는 요소에 담겨 표현 됩니다.
Open Graph
요약정보를 표시하는 규칙입니다. SNS에 웹사이트 링크를 공유할 때 미리보기 이미지, 제목, 설명이 표시되는 걸 경험해봤을 텐데요, 이런 걸 표현하기 위해 마련된 규칙이라고 생각하면 됩니다.
서드파티
‘XE3에 추가된 플러그인’이라고 생각하고 봐주세요.
SEO ?
- 검색 엔진 최적화 (Search Engine Optimization)
- 웹사이트의 콘텐츠가 검색엔진에 잘 색인 될 수 있도록 하는 작업
- 검색엔진이 웹사이트 페이지의 요약정보를 잘 해석할 수 있도록 해야 함
SEO Handling
검색엔진이 웹사이트의 요약정보를 잘 해석할 수 있게 하는 행위, 설정
검색엔진, SEO
사람은 웹사이트를 딱 보면 압니다. 어떤게 제목이고 내용인지.
하지만 검색엔진은 어떨까요? 검색엔진도 사람처럼 딱~ 보면 알까요?
검색엔진은 화면을 보지않고 HTML이라는 프로그램 언어의 문자 덩어리를 보게 됩니다.
아무리 검색엔진이 똑똑하다고 해도 이 많은 글자에서 어떤게 제목이고, 내용인지 쉽게 분별할 수 있을까요?
검색엔진은 이처럼 복잡한 내용에서 좀더 효율적으로 찾기 위해서 요약정보를 사용합니다.웹사이트에 요약정보가 없을 수 도 있지만, 있다면 좀더 효율적으로 웹사이트 페이지의 정보를 저장할 수 있게 되죠.
이와 같이 웹사이트 페이지의 정보를 요약정보로 잘 표시해 주는 행위를 SEO라고 합니다.
XE3에서 제공하는 SEO 관련 설정
XE3는 관리자사이트에서 웹사이트 제목을 설정할 수 있는 기능을 제공합니다.
설치된 XE3 웹사이트에 최고 관리자 계정으로 로그인 후, 관리자 사이트에 접속해서 보이는 좌측 메뉴의 설정 > 기본 설정 페이지로 이동하면 사이트 제목 설정하는 기능을 사용할 수 있습니다.
간단한 사이트 제목 설정 외에 SEO 설정 기능을 기본으로 포함하고 있는데요. 이 기능은 설정 > SEO 설정 페이지로 이동하면 확인할 수 있습니다.
여기서는 사이트 대표 사진, 브라우저 제목, 메타태그, 설명을 설정할 수 있습니다.
웹사이트 전체적으로 설정할 요소는 위에서 언급한 요소들 뿐입니다.
웹사이트의 페이지 정보를 요약해서 보여주기 위한 SEO 설정은 웹사이트의 전체적인 설정보다 각 페이지의 콘텐츠를 표현하는데 더 중점이 있기 때문입니다.
SEO를 위한 XE3 코드
웹사이트 전체의 설정이 아니라, 콘텐츠를 출력하는 페이지를 위해서 어떤 기능을 사용할 수 있을지 보겠습니다.
Frontend, Presenter, SEO는 화면에 HTML 출력을 처리하기 위해 동작하는 기능 입니다.
Frontend
Frontend는 Html에 사용하는 js, css, image, html등을 효율적으로 다룰 수 있도록 기능을 제공합니다.
css, js등 자원에 대해서 어느 시점에서든 추가하고 제거할 수 있도록 각각의 정보를 배열에 담에 서드파티가 원하는 대로 조정할 수 있도록 기능을 제공합니다.
Presenter
Presenter는 HTML 출력을 처리하는 가장 직접적인 기능으로 테마, 스킨, SEO를 다룹니다. 시스템의 설정과 서드파티의 기능을 종합하여 원하는 HTML 구성과 디자인을 표현합니다.
SEO
SEO는 Presenter 가 HTML 출력을 처리하는 과정에서 실행됩니다. 기본 제공되는 몇몇의 기능에 더해서 서드파티가 기능을 추가해서 동작시킬 수 있도록 인터페이스를 제공합니다.
Presenter의 구성
Frontend에서 각 자원을 다루는 구현체를 Tag라고 부릅니다.
XE3에는 다양한 태그들이 제공됩니다.
Frontend Tag의 구성을 이해하기 위해 아래 표를 참고 바랍니다.
Presenter 에는 HtmlPresenter, JsonPresenter 가 있습니다. Presenter 시스템에서 만들어진 결과를 사용자에게 보여주는 기능을 담당합니다. 사용자에게 결과를 보여주는 기능에는 HTML로 보여줄지, JSON 형태로 보여줄지 결정하는 구현체가 들어 있습니다.
Presenter 는 사용자에게 결과를 돌려줄 때 Request에 전달된 정보에 따라 HTML, JSON중 어떤 구현체를 사용할지 결정하게 됩니다. 서드파티를 통해 Presenter 구현체를 추가해 XML, ATOM 등 다양한 형태를 처리할 수 있지만 오늘의 주제에서 벗어나므로 여기까지만 얘기하겠습니다.
어쨌든 오늘은 SEO가 주제이고, HTML 처리에 대한 내용이므로 두 개의 Presenter 구현체 중에서 HtmlPresenter를 보겠습니다.
HtmlPresenter 에는 FrontendHandler 가 포함되어 있으며, HtmlPresenter가 HTML 템플릿인 blade 파일을 파싱할 때 FrontendHandler 가 동작됩니다. 이 때, HTML 이 파싱될 때 FrontendHandler 의 각 Tag가 실행되며 설정된 자원을 HTML 로 반환합니다.
이런 형식으로 동작하는 FrontendHandler의 Tag 구현체 중에서 SEO의 기능과 관련 있는건 Meta, Title Tag 입니다.
제목 설정 코드
‘XeFrontend::title(‘site title’);’
사이트 제목 설정하기 위해서 위 코드를 사용하면 됩니다.
이 코드를 어디서 실행하더라도 동작합니다.
출력된 HTML 이 반환되기 전 시점이라면 어디든 동작되며, 가장 마지막에 처리한 제목이 출력됩니다.
Meta 태그 수정
Meta 태그는 property 메소드로 전달한 인자 값을 key로 하여 수정, 삭제할 수 있습니다.
Meta 태그는 property, content 가 중요 메소드 입니다.
Meta 태그는 key, property, content 로 구성되며 각각의 메소드는 위에서 보는 것과 같이 동작됩니다.
SEO 관련 Custom 기능 추가
SEO를 다루는데 많이 복잡한게 있는것이 아닙니다.
‘페이지의 정보를 어떻게 요약해서 보여줄 것이가?’ 하는게 가장 중요하기 때문에 필요한 정보를 Meta에 잘 담아서 보여주는게 핵심이겠습니다.
SEO-Importer 는 SeoHandler에 주입되어 SEO에 관련해 동작해야할 코드가 구현된 클래스 입니다.
SeoHandler 는 이 importer 를 추가하고 실행시키기 위한 인터페이스로 구성되어 있습니다.
기본으로 제공되는 Importer 는 Basic, OpenGraph, TwitterCard가 있습니다.
BasicImporter
description, keywords meta 태그를 처리합니다.
추가로 <link rel=”canonical” 태그로 페이지 url 을 추가하는 기능이 있습니다.
OpenGraphImporter
<meta property=”og:..> 에 해당하는 태그를 추가합니다.
type, url, site_name, title, description, article:author, image, image:width, image:height 등을 처리합니다.
TwitterCardImporter
<meta property=”twitter:..> 에 해당하는 태그를 추가합니다.
cart, site, title, description, image 등을 처리합니다.
SEO 처리의 개선
지금까지 SEO 를 위해 사용할 수 있는 설정과 코드를 봤습니다.
앞에서 본 사항들을 사이트 전체에 설정되거나 콘텐츠를 출력하는 각 페이지 직접 코드를 추가해서 구현하는 방법에 대한 소개였는데요.
이렇게 처리하는 것 외에 좀 더 다른 시각에서 처리한 방법에 대해 얘기하겠습니다.
우리는 콘텐츠 페이지의 요약정보를 만든다고 하면 HTML 출력될 때 컨트롤러, 뷰에서 코드를 직접 추가하는 방법을 먼저 떠올릴 것 같습니다. 서비스를 만들고 SEO를 개선하기 위해서 많은 페이지를 들여다보고 빠진 부분에 코드를 채워 넣는 방법으로 하고 있지 않나요?
XE3를 만들 때 SEO의 중요성이 한참 강조될 때여서 이에 대한 개선 방법에 대해서 고민했습니다.
이때 생각한 것이 ‘알아서 잘 되면 안되나?’였습니다. 뭐, 생각해보면 당연히 자동으로 잘 되면 좋겠지요. 꼼꼼함이 아니라 적당히 신경 쓰면 좀 효과 좋게 잘 되는 그 정도를 생각했던 것 같습니다.
우리는 고민 끝에 이런 결론에 도달했습니다.
‘콘텐츠 페이지는 데이터베이스의 데이터가 화면에 출력되는 것이다. 데이터는 Model이고 Model이 Presenter에 전달된 것은 해당 Model이 콘텐츠로 출력되는 것이다’
SeoUsable
그렇다고 모든 Model을 콘텐츠로 취급할 수 없는 일입니다. 그러다간 config 같은 Model도 SEO로 취급될 수 있을 테니까요.
그리고 무턱대고 Model을 이용해 SEO를 처리할 수 없습니다. 시스템에서 해당 Model에서 제목, 내용 등을 특정할 수 없으니까요.
그래서 SeoUsable Interface를 고안했습니다. 어떤 객체는 SeoUsable Interface 를 따른다면 Presenter에서 SeoHandler가 동작할 때 해당 객체에 기반해서 SEO 관련 정보를 처리하도록 했습니다.
우리는 게시판 플러그인의 BoardModel 에 SeoUsable을 구현했습니다.
SeoUsable 인터페이스는 아래과 같이 구성되어 있습니다.
getTitle(), getDescription(), getKeyword(), getUrl(), getAuthor(), getImages()
SEO를 처리하는데 필요한 요소들을 포함고 있습니다. SeoHandler에서 이를 기반으로 Seo-Importer에게 전달할 데이터를 만들어 제공합니다.
XE3에서 좀더 효율적으로 SEO를 처리하고자 했던 내용에 대해 소개 했습니다.
XpressEngine & XEHub Links
- Facebook: https://www.facebook.com/xehub/
- XE3 공식홈페이지: https://www.xpressengine.io/
- GitHub: https://github.com/xpressengine/
- XEHub Medium: https://medium.com/xehub
- XE User Group: Facebook XE Users
- YouTube: XpressEngine XE
