검색엔진 마케팅 실무에서 이어지는 글입니다.
과정이 생각보다 길어서, 다른 글로 분리해서 이야기해보려 합니다.
SEO 작업을 진행한 소스코드는 현재 홈페이지로 완전히 변경됐습니다. 그리고 기존 코드와 콘텐츠는 모두 회사 내부 서버에 보관중이죠. 그래서 이 과정을 공개할 수 있었습니다. 이렇게 진행한 과정은 메츠에이치아이티 홈페이지라는 조건에서 진행한 이야기라서, SEO에 대한 공통 가이드가 되기는 어려울지도 모르겠습니다.
메츠는 GUI/UX 전문회사입니다. 개발자는 적지만, 디자인 콘텐츠는 충분히 발행 가능한 환경이라는 뜻이죠. 그래서, 앞으로 나열할 과정은 개발에 대한 기본 지식만 있어도 쉽게 진행할 수 있는 수준입니다. 혹시 생활코딩 WEBn 과정을 공부하셨거나 기본적인 웹개발 지식이 있으시다면, 저희가 진행한 과정보다 더 나은 방법으로 더 좋은 결과물을 만드실 수도 있습니다. 다만 이 과정이 어려우시다면 여기로 연락 부탁드립니다.
0. Don’t be Evil
정작 구글에서는 이제 사용하지 않는 문구니까 저희는 자유롭게 사용하겠습니다…라고 쓰려다가 발행 전 확인해보니 아직 남아있네요. 심지어 더 좋은 문구로 바뀌었습니다. 2020-09-25에 업데이트된 구글 행동강령에서 VII. Conclusion 부분을 확인해보세요.
이 정신을 따라서, 저희도 옳은 방법만을 사용하려 노력했습니다.
연관키워드를 탐색하기 위해 크롤링을 돌리거나, 유입을 강제로 늘리기 위해 조회수를 구입할 수도 있었습니다. 심지어 타사 홈페이지나 블로그 등에 스팸 댓글을 남겨서 어떻게든 핑백을 올리는 방법도 있었습니다. 그 외에도 수많은 편법이 있겠습니다만, 그러지 않기로 결정했습니다.
1. 상태 점검
지피지기면 백전불태라 하였습니다. 무언가 개선이 필요하다고 인식하려면, 먼저 현재 상태를 점검해야겠죠. 당시 홈페이지에 대한 첫인상은 “깔끔하고 예쁘게 잘 만든 웹페이지”였습니다.
하지만 무언가 어색함이 느껴졌습니다. 그래서 바로 크롬 DevTools 콘솔을 열고, 클릭 영역과 스크립트 상태를 점검했습니다. 해상도 반응형 UX가 잘 작동하고 있었고, 가끔 스크립트 오류가 나기는 했지만 그래도 새로고침을 하면 콘텐츠 자체는 문제 없이 표시됐습니다. 그래서 이번에는 얼마나 많은 사람들이 저희 메츠를 찾아오는지 확인하려 했습니다.
1.1. 트래픽 조회
먼저, 홈페이지 유입 트래픽을 조회하기 위해 호스팅사 관리자페이지부터 확인했습니다. 그런데 예상보다 트래픽 용량을 많이 사용하고있었죠. 그래서 유입 IP를 확인해보니… 스팸 IP가 대부분이었습니다. 일단 급한대로 해당 IP에 차단을 걸고, 국가 단위 차단에 대해 고민했습니다. 다행히, 답은 가까운 곳에 있었습니다. 키워드 광고 집행현황이었는데요, 광고집행 대비 유입이 지나치게 많이 발생하고 있었습니다. 그리고 무엇보다 메츠는 폴란드 의류회사, 스웨덴 주류회사, 슬로바키아 암호화폐 거래소로부터 GUI/UX 제작 의뢰를 받을 일이 거의 없었죠. 그래서 바로 해당국가 유입 IP에 대해 차단을 적용했습니다.
1.2. 콘텐츠 조회
다음으로 홈페이지 내 콘텐츠를 점검했습니다. 마지막 발행일이 2017년 봄이라는 사실은 둘째치고, 모든 게시글에 스팸 댓글이 달려있었습니다. 사실, 이 댓글 내용도 좀 진지하게 읽어보려했는데, 알고보니 Lorem Ipsum 수준으로 아무 키워드나 적어두고 자신들의 서비스 링크를 달아 둔 형태였습니다. 당연히 모두 삭제대상이었죠. 문제는, 당시 관리자페이지에는 댓글 관리 기능이 없었습니다. 결국, DB에 직접 접근을 시도하게됩니다.
2. 작업 환경 준비
보통 웹페이지에 표시되는 콘텐츠는, 하이퍼텍스트 마크업 언어(HTML)로 뼈대를 구성하고, 데이터베이스(DB)에서 상세 콘텐츠를 받아서 뿌려주는 형태입니다. 개별 웹페이지를 하나하나 저장하면 용량을 매우 많이 차지하기도 하고, 무엇보다 관리가 힘들기 때문이죠. 그리고 이 DB는, SQL이라는 언어를 사용하여 접근합니다. 이렇게 데이터베이스에 접근하여 텍스트 형식의 자료를 받아오거나, 데이터 추가/삭제(CRUD) 등을 수행하기도 합니다.
그런데 DB 접근을 위해서는 DB 계정 비밀번호, 관리툴이 필요합니다. 그래서 호스팅사에 DB 계정 정보를 요청하고, FTP 접근 권한도 요청했습니다. 이후 호스팅사 WAS(웹 애플리케이션 서버) 내에 phpMyAdmin을 설치했죠. 이제 백엔드 환경을 수정할 준비가 끝났습니다.
2.1. SQL
불행인지 다행인지, 당시 댓글 DB에는 스팸밖에 없어서, 모두 삭제해도 큰 문제가 없었습니다. 이렇게 기존 스팸댓글은 모두 삭제했지만, 이걸 그대로 두면 앞으로도 스팸 댓글이 쌓일 것 같았죠. 그래서 아예 FTP를 통해 기존 소스코드를 다운받고, 게시글 HTML을 열어(정확히는 .php 파일입니다) 댓글 영역을 가림(display:none !important;)처리 하였습니다.
이 과정에서 콘솔을 다시 열어보니, JS 오류가 발생중이었습니다. 차근차근 오류코드를 읽어보니, 기존 개발 시 페이스북 댓글 연동 목적으로 설정한 API 사양 변경 건을 적용하지 않아 발생한 오류였습니다. 어차피 사용하지 않는 댓글 영역이었고, 무엇보다 메츠 브랜드 이미지 홍보라는 목적과 어긋난다는 판단 하에 댓글 영역을 삭제했습니다.
2.2. 애널리틱스
위 과정까지 진행한 뒤, 홈페이지 방문자 현황을 자세하게 확인하기 위해, 방문자 추적 툴을 설치하였습니다.
일반적으로 대부분의 웹페이지에는 방문자 추적 툴이 설치돼있습니다. 방문자가 주로 유입되는 검색엔진(구글 네이버, 다음, 빙, 얀덱스 등)이나 유입 경로(카카오톡, 네이버, 핀터레스트 등)를 확인하기 위해서죠. 이러한 도구는 보통 무료로 제공되는 경우가 많습니다. 하지만 유료 서비스를 이용하면 대규모 서비스를 관리하거나 상세 통계를 조회하고, 심지어 마우스 클릭이나 스크롤 위치까지 추적할 수 있기도 합니다.
방문자 정보 분석 도구를 제공하는 기업은 많지만, 그 중 많이 사용하는 툴은 아래와 같습니다.
- 구글 애널리틱스(GA)
유/무료버전 모두 존재하며, 일반적인 용도에서는 무료 버전으로 충분한 경우가 많습니다. 데이터 표시형식을 커스텀할 수 있어, SEO 작업을 진행하기 전 필수로 설치하다시피 합니다. 대규모 서비스에 적용하거나 더 자세한 통계가 필요한 경우, 유료 서비스인 GA360을 사용하는 방법도 있습니다. - 네이버 애널리틱스(NA)
무료 서비스입니다. 일반적으로 사용하기에는 충분한 데이터를 제공합니다. 네이버에서 제공하는 툴이므로, 네이버로부터 유입되는 데이터를 정말 잘 분류해줍니다. 국내 시장을 기반으로하는 상품/서비스를 제공중인 경우 반드시 설치해야합니다. - Adobe 애널리틱스
유료로 제공하는 분석 도구이며, 대규모 서비스에서 주로 사용합니다. 각 채널별 데이터에서부터 고객 생애가치 측정까지, 다양한 정보를 제공합니다. 또한 대부분의 기능을 직접 설정하는 GA와는 달리 기본값이 잘 설정돼있어, 사용성 측면에서 큰 강점이 있습니다. - 뷰저블
1주일 무료체험 후 유료로 전환되는 서비스입니다. 마우스 위치에서부터 클릭 위치, 스크롤 수준, 각 페이지별 잔류시간 등, 사용성 테스트에서나 얻을 수 있는 소중한 데이터를 제공합니다. 무료 사용이라도 한 번쯤 이용해보심을 추천합니다.
애널리틱스는 보통 웹페이지 내에서 JavaScript 기반으로 작동하므로, 웹페이지 소스코드를 직접 수정해야합니다. 모든 페이지에서 공통으로 사용하는 태그 부분에 애널리틱스 코드를 추가하면 되는데요, 보통 Header나 Footer 위치에 추가합니다. 참고로, NA에서 공식적으로 권장하는 방법은 </body>태그 바로 앞에 추가하는 방법입니다. 특별한 이유가 없다면, Footer에 추가하면 좋습니다. 이렇게 하면 방문자가 웹페이지 진입 후 로딩을 완료한 시점에 방문을 기록하게됩니다.
이 시점에서 확인해야 할 항목은 바로 SSL 인증 여부입니다. 홈페이지 주소가 http로 시작하는지, https로 시작하는지를 확인하면 되죠. https 웹페이지는 크로미움 기반 웹브라우저에서 볼 경우 주소표시줄 앞에 자물쇠 아이콘이 표시됩니다. 즉, SSL 인증서를 통해 웹페이지 보안을 적용중이라는 뜻이죠. 기본적으로 애널리틱스는 방문자의 개인정보를 기록하는 과정이기때문에, 최소한이라도 개인정보 보호 조치가 필요합니다.
3. 수정 작업 진행
이제 본격적으로 홈페이지 소스코드 수정을 시작하게됐습니다. 홈페이지 개발이 완료된지도 꽤 오래됐었고, 무엇보다 기존 개발형식 자체도 솔루션 기반이어서 표준에서 많이 벗어나있었기 때문이죠. 그래서 단순히 메타태그 몇 줄 추가하기보다는, 웹페이지 구조를 변경할 필요가 있었습니다.
이러한 수정 중 첫단계가 바로 SSL 인증서와 301 리다이렉트 적용이었습니다.
3.1. HTTP over SSL
HTTPS는 개인정보 보호 차원에서도 중요하며, 페이지 진입 이후에도 보안 여부를 표시하므로 검색엔진 최적화에 영향을 줍니다. 게다가 구글에서는 SSL 인증서가 적용된 웹페이지를 검색 결과에 더 많이 표시하겠다고 발표한 바 있습니다.
저희는 호스팅사를 통해 Comodo SSL 인증서를 구입하고, 호스팅사 관리자페이지에서 SSL을 등록했습니다. 하지만 여기서 끝이 아니었죠. 아무리 해도 자동으로 SSL이 적용된 화면으로 이동하지를 않았습니다. 심지어 인증서가 잘 작동하지 않는 것처럼 보여서, 오히려 보안이 취약한 페이지처럼 보이기도했죠. 결국 MVC 설계 중 컨트롤러(Controller, C) 부분을 수정하게됩니다.
- SSL 인증서가 적용되지 않은 웹페이지 URL 앞에 https:// 를 붙여 접속하면, 브라우저는 보안이 취약한 페이지라고 인식합니다. 인증서가 없는데 적용하려고 시도중이거나, 잘못된 보안이 적용됐다고 판단한 셈이죠.
- 반대로 SSL 인증서가 적용된 웹페이지를 http:// 로 접속할 수도 있습니다. 사용자가 스스로 보안을 포기하고 접속하겠다고 선언했기 때문이죠.
보통 SSL이 적용된 페이지에 http로 접속한 경우, 해당 사용자를 https 페이지로 안내합니다. 그리고 웹브라우저에는 301 Redirect라는 상태 코드를 반환하죠. 즉, 사용자가 찾고 있는 웹페이지의 주소가 옮겨졌으니 그 곳으로 안내하겠다는 뜻입니다.
그런데 이 과정을 적용하기 위해서는 홈페이지의 모든 화면에 리다이렉트 기능을 적용해야합니다. 다행히 당시 홈페이지는 MVC 패턴을 충실하게 적용하여 제작됐고, 그래서 컨트롤러에 해당하는 php 코드를 금방 찾을 수 있었습니다. 그래서 301 리다이렉트 관련 코드를 몇 줄 추가했습니다.
이제 모든 URL을 https로 접속할 수 있을뿐만 아니라, http로 접속할 경우에도 자동으로 https로 이동하게됩니다. 그리고 이러한 전환은 오히려 SEO 점수를 높여주죠. 참고로, 301 영구적 이동 표시가 아니라 JavaScript 등으로 302 임시이동을 적용하는 경우 SEO에 오히려 악영향을 줍니다.
여기까지 진행됐으면, 이제 슬슬 검색엔진에 “우리 페이지를 검색결과에 표시해주세요”라고 요청해야합니다. 하지만 그 전에 마지막으로 하나만 더 확인해봅시다.
3.2. URL 구조
URL 구조를 정리하지 않으면, 검색결과에 동일한 페이지가 여러차례 등장할 수 있습니다. 비슷한 콘텐츠가 이미 많고, 그래서 검색엔진에 자주 등장하면 좋은 상황에서라면 이는 좋은 결과입니다. 하지만, 메츠는 몇 개의 콘텐츠에 역량을 집중하는 상황이었고, 연락처 페이지 유입이라는 명확한 목적이 존재했습니다. 결국, 수정이 필요하다는 뜻이었죠. 무엇보다, 유사문서로 처리돼서 검색엔진 노출이 급감할 수도 있었습니다.
당시 검색결과, 동일한 콘텐츠가 여러 건 등장할뿐만 아니라(URL은 다르나 동일한 페이지), 해시태그 검색 화면과 오류화면까지 검색엔진에 표시되고 있었습니다. 심지어, 테스트를 위해 임시로 구성한 페이지까지 검색엔진에 표시됐죠. 당시 웹페이지 구조가 get 방식으로 파라미터를 받아오고 있었기 때문입니다. 그래서 아무 값이나 넣어서 접속해도 검색엔진이 보기에는 정상적인 페이지가 표시됐습니다.
3.3. URL 통합
get 방식으로 서버(WAS)에 파라미터를 전달하여 콘텐츠를 받아오는 방식을 간단히 설명하면 다음과 같습니다.
https://도메인?카테고리=모션&게시물번호=1234&검색키워드=UX디자인
물음표(?)를 기준으로 URL을 나누고, 앞부분은 기본주소, 뒷부분은 상세 콘텐츠를 찾아오는 방식이죠. 이 구조를 분석하면 아래와 같습니다.
- 접속 방식: SSL이 적용된 http
- 접속할 주소: 도메인
- 카테고리: 모션
- 게시물 번호: 1234
- 내부 검색에 사용한 키워드: UX디자인
그런데 재미있는 점은, 여기서 카테고리와 검색키워드 부분이 없어도 동일한 게시물이 표시된다는 사실입니다. 왜냐하면 게시물 번호는 각각 고유하며, 여기서 고유번호는 1234번이기 때문입니다. 게다가 카테고리를 모니터로 바꾸고, 검색키워드를 멀티탭으로 바꿔도 게시물번호가 1234인 이상 동일한 게시물이 표시됩니다. 하지만 해당 게시물을 감싸는 메뉴(GNB 위치, 게시물 내 Depth 표시영역 등)는 매우 이상하게 표시되죠. 이 상황을 해결하는 방법은 의외로 간단했습니다.
3.4. 표준(Canonical) URL
홈페이지 내에서 특정 게시물에 진입하는 경우, 무조건 지정한 URL로만 진입하도록 소스코드를 수정했습니다. 기존 홈페이지는 [썸네일+제목]이 카드 형식으로 나열된 UI였는데요, 각 카드의 a 태그는 현재 사용자가 접속중인 카테고리를 기준으로 설정돼 있었습니다. 이 부분을 아예 DB와 연동하여, 이 카드는 원래 어떤 카테고리의 게시물인가를 기준으로 a 태그 내 링크를 설정하도록 변경했죠. 그리고 각 게시물 내 메타태그에 표준 버전 정의를 추가하여, 검색엔진이 참고하도록 정보를 제공했습니다.
4. 수정 후 상태 점검
어느정도 진행 상태에 따라 항상 중간 점검 과정이 필요합니다. 여기까지 진행한 뒤 웹마스터에서 SEO 상태를 확인하고, 검색엔진에서 실제 검색결과를 확인하고, 수정 작업이 완료된 페이지를 SNS 채널에 공유하는 등의 작업이죠. 또한, 소스코드 수정으로 인해 에러가 발생하는 페이지는 없는지 확인하는 과정도 중요합니다. 일종의 QA 과정이라고 생각하면 좋습니다.