트래픽을 쓸어 담는 검색 엔진 최적화 - chapter 10, 알아두면 좋은 SEO 관련 주제 -

본문은 서적 '트래픽을 쓸어 담는 검색 엔진 최적화' 를 읽고 남기는 요약본입니다. 더 자세한 정보를 얻기 원하신다면 해당 서적을 구매하시는 것을 추천드립니다.

이전 글 보러가기

트래픽을 쓸어 담는 검색엔진 최적화 - chapter 6, 오프페이지 SEO

SPA와 SEO

콘텐츠의 필요한 부분만 웹 서버에서 가지고 와 보여주는 방식이 있습니다. 웹 사이트 방문자에게 빠른 속도와 편리한 사용자 경험을 제공할 수 있어 바람직한 웹 사이트 구축 방식 중 하나입니다. 이런 방식의 웹 사이트 구축 방식을 싱글 페이지 애플리케이션(SPA) 혹은 Ajax 기반 웹 사이트라고 합니다. 하지만 SEO 관점에서 수집과 색인이 어려운 웹 사이트가 되거나 나아가서는 검색엔진이 웹 사이트의 콘텐츠가 무엇인지 알 수 없어 손해를 볼 수 있습니다.

Ajax 기반 웹 사이트의 특징

Ajax 기반 웹 사이트는 처음부터 모든 콘텐츠를 보여주지 않고 일부 콘텐츠만 보여주지만 사용자의 선택에 따라 추가 정보를 서버에서 받아와 보여줄 수 있습니다.

SEO와 Ajax 웹 사이트

SEO 측면에서 Ajax 기반 웹 사이트는 불리한 측면이 많습니다. 서울에서 부산, 서울에서 베른린같이 다양한 경로의 정보를 보여주는 항공사 웹 사이트일 경우 실제로 해당 웹 사이트는 비행 경로에 맞춘 다양한 컨텐츠를 가졌지만 검색 엔진 입장에서는 출발지와 목적지를 입력하는 입력 박스만 있는 웹 사이트로 인식할 가능성이 높습니다.

예시: 대한 항공 웹 사이트

모든 콘텐츠가 하나의 주소로만 표현된다는 점도 SEO 측면에서 보면 문제입니다.

 

구글의 해시뱅 방식

SEO와 Ajax 웹 사이트의 문제를 해결하기 위해서 구글은 2009년에 소위 해시뱅(hashbang)(#!)이라고 하는 프리 렌더링 방식을 권고했습니다. 프리 렌더링은 사용자에게 보이는 콘텐츠를 서버에서 미리 구성하여 저장하는 것을 의미하며, 해시뱅은 미리 만들어진 동적 웹 페이지를 구별하기 위해 원래 웹 주소 뒤에 붙이는 기호가 #!인 것에서 시작된 네이밍입니다.

 

example.com/city-info.php

 

다음과 같은 주소가 서울에 대한 정보를 Ajax로 보여주는 웹 사이트라고 해보겠습니다. 서울에 대한 정보는

 

example.com/city-info.php/#!seoul

이라고 이름을 붙여서 서버에 미리 콘텐츠를 저장하는 방식입니다.

 

 

반드시 미리 저장할 필요는 없으며, 서버 프로그램이 동적으로 해당 콘텐츠를 생성해도 상관없습니다. 웹 관리자는 동적인 페이지의 스냅샷 페이지를 구글 해시뱅 규치엑 맞춰 미리 주소를 생성한 후 이를 XML 사이트맵파일에 기록함으로써 어떤 도시 정보 콘텐츠를 제공하는지 구글이 페이지를 수집할 경우 알려줄 수 있습니다.

 

그러나 해시뱅 스타일의 웹 주소는 웹 주소 체계를 복잡하게 만들 뿐만 아니라 실제로는 존재하지 않는 웹 주소라는 점에서도 좋지 않은 방식입니다.

 

결과적으로 2015년 구글은 더 이상 해시뱅 스타일의 웹 주소 방식으로 Ajax 수집을 권고하지 않는다고 발표하였고, 2018년 여름에 지원을 중단하겠다고 공식 발표했습니다.

HTML5의 pushState API 방식

HTML5의 pushState 함수는 Ajax 웹 사이트가 사용자에게 보여주는 콘텐츠마다 다른 웹 주소를 웹 브라우저의 주소창에 보여줍니다. 이를 통해 구글이 2009년에 제안한 방식보다 훨씬 간단하게 모든 문제를 해결해줍니다. 즉 Ajax의 장점을 살리면서도 콘텐츠마다 새로운 주소를 부여할 수 있습니다. 단지 Ajax를 사용하는 웹 페이지의 새로운 콘텐츠에 해당하는 웹 주소를 사용자의 웹 브라우저에도 보여주도록 pushState 함수를 이용하여 주소창을 변경하면 됩니다.

History.pushState()

In an HTML document, the history.pushState() method adds an entry to the browser's session history stack.

Syntax

pushState(state, unused)
pushState(state, unused, url)

JavaScript

const state = { 'page_id': 1, 'user_id': 5 }
const url = 'hello-world.html'

history.pushState(state, '', url)

사용자와 검색엔진 모두를 위한 SEO

SEO 친화적인 웹 사이트는 궁극적으로 사용자에게 친화적인 웹 사이트여야 합니다. 사용자가 좋아하는 웹 사이트가 검색 결과의 상위에 노출되기 때문입니다. Ajax 기술은 사용자에게 빠른 속도와 유용한 인터페이스를 제공하는 기술이며, 이를 제대로 활용하면 SEO에도 좋은 효과를 볼 수 있습니다.

웹 사이트 제작 시 고려 사항

비즈니스 목적 달성을 위해서 웹 사이트 제작 및 리뉴얼 시 고려할 사항은 다음의 표와 같습니다. SEO에 미치는 영향력은 별 다섯 개 만점을 기준으로 했습니다.

 

항목 SEO에 미치는 영향력 참고 사항

항목	SEO 에 미치는 영향력	참고 사항
파비콘	⭐⭐	신뢰도 제고
https 프로토콜	⭐⭐⭐	보안성 향상
타이틀 및 메타 디스크립션	⭐⭐⭐⭐	키워드 리서치 필요
robots.txt	⭐	색인의 효율화
sitemap.xml	⭐	자동 수정 기능 필요
캐노니컬 태그	⭐	중복 콘텐츠 방지
오픈 그래프와 트위터 카드	⭐	클릭률 증대
사용자에게 친화적인 웹 주소	⭐⭐	사용자 편의
반응형 디자인	⭐⭐⭐	모바일 노출 개선
자동 이미지 압축	⭐	로딩 속도 개선