brunch

라이킷 14 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Jiyeon Song Aug 01. 2016

8단계로 끝내는 구글 SEO 실천법 - 2

지난 번 글을 통해 SEO에 영향을 미치는 요인들과 이 요인들을 3가지 포인트로 나눠서 살펴보았습니다. 이 3가지의 포인트를 중심으로 실제 SEO를 아래의 가이드에 따라 단계별로 진행할 수 있습니다.

주의 : 이 가이드는 철저히 주관적인 관점에서 서술되었으므로, 구글에서 제시하는 공식 가이드를 참조하고 싶으신 분은 구글의 개발자 체크리스트를 참조해주시기 바랍니다.

단계 0 : SEO를 위한 최소한의 준비

성공적인 SEO를 위해 갖춰야할 두 가지 준비사항이 있습니다. 이 준비사항에 해당하지 않는 분들은 넘어가주셔도 좋지만, 모바일 웹사이트를 지원하지 않거나 싱글 페이지 어플리케이션(SPA)를 지원하시는 분들은 반드시 아래의 사항을 확인해야 합니다.

Mobile-Friendly Test를 통한 모바일 웹사이트 지원여부

서버사이드(Server-side Rendering) 랜더링 지원여부

우선 모바일 웹사이트는 흔히들 m.을 서브도메인으로 붙여서 별도로 제공하거나 반응형 웹사이트를 css media query 등으로 제공하는 방법이 있습니다. 어떤 방법을 통해서든 사용자가 보기 편한 모바일 웹사이트를 지원하는 것이 중요합니다. 구글에서 제공하는 Mobile-Friendly Test를 통해 지원여부를 알아보세요.

두 번째로 서버사이드 랜더링은 서버에서 HTML, CSS, JavaScript로 구성된 웹문서를 "완성"해서 뿌려주는 것을 뜻합니다. 이는 과거에는 당연하게 여겨졌으나, 최근에 AngularJS, ReactJS, MeteorJS 등 SPA(Single Page Application) 기술이 유행하고 있는 상황에서 언급하지 않을 수 없는 얘기입니다. 이러한 기술들의 문제는 각 주소마다 따로 웹문서를 내려주는 것이 아니라, 일단 하나의 웹문서 전체를 내려주고, 그 안에서 가상으로 라우팅을 한다는 것과 사이트 내의 콘텐츠를 웹문서가 다 DOM에 로딩되고 난 후 비동기적으로 불러온다는 것입니다.

따라서 구글 크롤러가 웹사이트를 방문했을 때는 실제 콘텐츠들이 로딩되지 않은 상태의 사실상 거의 비어있는 웹문서만을 볼 수 있게 되고, 대부분 처음 로딩되는 랜딩페이지 하나만 참조할 수 있게 됩니다.

이 문제를 해결하기 위해 각 기술 진영에서는 해결책을 내놓고 있습니다. 다만, 그 해결책들은 서버사이드 랜더링을 제공하지 않는 경우 미봉책에 지나지 않는다는 것이 문제입니다. 따라서 구글 SEO를 위해서는 구글 봇에게 따로 서버사이드 랜더링을 시켜주는 것이 필요합니다.

이 문제를 해결해주기 위한 상업 솔루션도 존재하고 있습니다. 그리고 아래와 같이 비교적 각 진영별로 유명한 해결책들이 존재하고 있습니다.

AngularJS : 기트허브 saymedia/angularjs-server 라이브러리

ReactJS : 서버사이드 랜더링 관련 공식 문서 / 실제 예시

MeteorJS : PhantomJS를 사용한 Spiderable 패키지

내가 직접 서버사이드 랜더링 구축하기 : User-Agent를 분석하여 구글 크롤러 방문 시 서버에서 랜더링된 페이지 직접 반환 (웹프레임웍스 사이트의 이재호님의 글 참고)

단계 1 : SEO를 위한 KPI 설정하기

KPI를 설정하는 것은 어떤 프로젝트에 있어서나 중요합니다. KPI 설정을 통해서야 정확히 성과를 측정하고, 어떻게 개선되는지를 수시로 확인하면서 프로젝트의 방향성과 세부 시행 계획들을 점검할 수 있기 때문입니다.

구글 SEO를 위해서는 크게 4가지의 정량적인 지표가 있다고 볼 것입니다.

"site:" 오퍼레이터를 통한 색인된 사이트의 갯수 확인: 사이트맵 등록 이후에, SEO 프로젝트 이후에 얼마나 인덱싱된 페이지의 숫자가 늘어나는지를 확인할 수 있습니다.

PageSpeed Insights를 통한 사이트의 경량화 지표 확인

구글봇(크롤러)의 사이트 방문주기 로그 수집을 통해서 분석 및 확인

중요한 키워드 선정 후 주기적으로 검색 후 랭킹 확인

위에서 보다시피 site:{자신의 사이트 주소}를 구글 검색창에 검색하여서 얼마만큼 초반에 사이트가 인덱싱되고 있는지를 숫자로 확인할 수 있습니다. 페이스북의 경우에는 약 약 45억 개의 사이트가 인덱싱되어있는 것을 볼 수 있습니다. 반면에, 저희 사이트의 경우 약 10만 개의 사이트가 인덱싱되어있는 것을 볼 수 있습니다.

이 지표는 웹마스터 툴 등록과 사이트맵 제출 이후에 자연스럽게 늘어나게 되므로 현재 상황을 확인하는 차원에서 몇 번 보고, 웹마스터툴 등록하고 사이트맵 제출 이후에서부터 증가 추세를 보는데 활용하면 좋습니다. (페이스북 색인된 사이트 갯수 확인)

또한 PageSpeed Insights는 사이트의 경량화 지수와 경량화를 위한 구글의 조언을 알려줍니다. 점수를 100점에 가깝게 올리는 노력을 통해서 사이트가 경량화되고 있는지를 파악할 수 있습니다. 사이트가 얼마나 가벼운지도 SEO의 요인 중 하나일뿐만 아니라, 사실은 사이트의 크기가 사이트의 로딩 속도와 연관이 되어있다는 점이 더욱 중요합니다.

많은 사용자들은 페이지 로딩이 길어지면 짜증을 내면서 "뒤로가기(Backspace)" 버튼을 눌러버립니다. 이렇게 사이트 로딩 전 이탈하는 사용자들은 클릭률과 페이지 사용시간에 큰 악영향을 미치고, 궁극적으로 사이트의 신뢰도를 저하시킬 수 있습니다.

마지막으로 구글 크롤러의 방문주기는 구글이 신뢰하고, 더 가치있다고 생각하는 웹사이트일수록 더욱 짧아집니다. 예를 들어 BBC와 같이 경각을 달리하는 뉴스를 올리는 신뢰성 높은 웹사이트는 정말 몇 초, 몇 분만에 계속 구글 크롤러가 방문하여서 최신 기사들을 인덱싱해갈 것입니다. 반면에 변화도 적고, 신뢰할 수도 없는 사이트들은 구글 크롤러들이 몇 주, 몇 달에 한 번씩 올 수도 있습니다.

ELK스텍이나 NEW RELIC과 같이 자체 로그분석 시스템을 가지고 계신 분들은 주기를 확인할 수 있으며, 그 주기가 얼마나 짧아지는지, 한 번 왔을 때 얼마나 읽어가는 지 등 데이터 분석을 통해 SEO KPI를 설정할 수 있습니다.

이외에도 반드시 정량적이라고 할 수는 없겠으나, 내가 중요하다고 생각한 키워드를 정해놓고 그 키워드들에 대해서 랭킹을 체크하는 것도 정량적으로 확인하는 좋은 방법입니다. 이 때 반드시 구글의 애드워즈 서비스를 사용하여 그 키워드가 실제로 검색이 많이 일어나는 키워드인지를 확인하는 것이 중요합니다. 왜냐하면 검색이 제대로 일어나지도 않는 엉뚱한 키워드의 랭킹을 트래킹하다가 아까운 시간과 비용을 낭비하는 수가 있기 때문입니다.

위에서 보듯이 구글 애드워즈에서는 어떤 키워드가 유의미한 검색량을 만들어내는지 알려주므로, 미리 확인하고 매번 랭킹을 확인할 키워드를 정하는 것이 좋겠습니다.

단계 2 : 제목과 설명, 대표 이미지 정하고, 기초 메타 태그로 나타내기

우선 제목을 잘 정하는 것이 중요합니다. 클릭률에 가장 핵심적인 영향을 미치는 것은 바로 제목입니다.

제목은 그 자체로 전달하고자 하는 주제의 내용을 잘 요약하고 있어야 하며, 증거 키워드(Proof Terms)가 포함되는 것이 좋습니다. 증거 키워드는 어떤 주제에 대해서 논할 때 그 키워드 자체만으로도 웹문서의 내용에 대해서 유추할 수 있게끔 해주는 증거가 되는 키워드입니다.

예를 들어 "서울 떡볶이 맛집 베스트 10 소개"을 제목으로 가진 웹문서라고 한다면, 여기서 증거 키워드는 "베스트", "10", "소개"같은 키워드들이 됩니다. 따라서 사용자는 이것만 보고도 이 웹문서의 작성 의도와 내용을 유추할 수 있습니다.

둘째로 웹사이트의 본문 내용이 중요합니다. 본문 내용은 제목과 연관되어야 할 뿐만 아니라 반드시 웹사이트의 제목과 연관된 키워드들(Relevant Terms)이 포함되어 있어야 합니다. 연관 키워드들은 어떤 주제에 대해서 논할 때 그 주제와 관련해서 나올 수 있는 여러 단어들입니다.

예를 들어 "서울 떡볶이 맛집 베스트 10 소개"을 제목으로 가진 웹문서라고 한다면, 여기서 연관 키워드는 떡볶이나 맛집과 관련된 "떡", "사리", "맛", "매운", 가격", "친절", "평점", "리뷰"과 같은 키워들이 될 것입니다.

제목과 본문의 내용이 너무 동떨어져 있으면 문제가 될 수 있습니다.구글은 자사의 광고 플랫폼인 애드워즈에서 광고 문구와 그 문구가 가리키는 웹사이트 내의 내용이 일치해야지만 품질지수(Quality Score)을 올려주고, 광고단가를 절감해줍니다. 이와 같은 품질지수 알고리즘은 SEO 랭킹에도 반영될 것으로 추측됩니다.

마지막으로 제목, 설명, 대표 이미지는 따로 메타 정보로 분류되며 웹문서의 head섹션에 들어갈 수 있으며, 주요 메타 태그들은 아래와 같습니다. 아래에 나와있는 메타 정보들은 검색엔진의 크롤러가 해당 사이트의 정보에 대해서 더욱 체계적으로 파악할 수 있도록 돕는 역할을 하고 있습니다.

(한편 절대로 같은 제목, 설명, 대표 이미지를 반복해서 사용해서는 안됩니다.)

title 태그 : <title>웹문서의 제목이 들어갑니다.</title>

기본 메타 태그 : 각종 메타 태그 참조

오픈그래프 태그 : 오픈그래프 개발자 문서 참조 | 에어브릿지 블로그 내 오픈그래프 글 참조

트위터 카드 : 트위터 개발자 문서 참조

다음 포스팅에서는 나머지 6개의 단계에 대해 설명드리도록 하겠으니, 많은 기대 부탁드리도록 하겠습니다.