SEO 작업 마무리

검색엔진 최적화 진행과정에서 이어지는 글입니다.

여기까지 진행했을 때, 홈페이지 자체에 대한 수정 작업은 거의 마무리됐다고 판단했습니다. 이제 검색엔진뿐만 아니라 다른 채널로부터의 유입도 고민해야한다고 생각했죠. 웹페이지 유입 경로를 크게 셋으로 나누면 다음과 같습니다.

1. 검색엔진을 통한 유입
   개별 검색엔진 웹마스터에 요청하거나, robots.txt 파일을 작성하여 크롤링을 기다리면 됩니다. 저희 홈페이지는 이 경로를 통한 유입이 대다수입니다. NA에서는 검색유입, GA에서는 Organic Search라고 표시합니다.
2. 공유 링크를 통한 유입
   카카오톡, 페이스북 등으로 전달받은 주소를 클릭/탭 하여 진입하는 경우입니다. 쇼핑몰이나 앱 마케팅을 진행하는 경우 주력으로 삼아야하는 유입이죠. 보통 이벤트 등을 진행하는 경우 CTA 버튼 내에 URL을 넣고, 유입채널별 파라미터를 다르게 적용하여 퍼포먼스 마케팅에 활용하고는 합니다. NA에서는 일반유입, GA에서는 Referral/Social이라고 표시합니다.
3. URL 직접 입력을 통한 유입
   주소창에 홈페이지 주소를 입력하거나, 북마크바에 등록된 링크로 진입하는 경우입니다. 플랫폼 비즈니스나 쇼핑몰을 운영하는 경우 주요 유입 경로이며, 메츠에는 해당하지 않습니다. NA/GA 모두 Direct라고 표시합니다.

이 중 검색엔진이나 URL 직접 입력을 통한 유입은 고전적인 마케팅과 방법론이 유사합니다. 하지만, 공유 링크를 통한 유입은 기존 마케팅 방법에서 좀 더 나아가 그로스해킹 관점에서 접근해야합니다. 단순한 유입뿐만 아니라, 사용자에 의한 공유가 발생해야 하기 때문이죠. 그래서 메츠의 정보를 누군가 공유할 경우, 사용자 화면에서 어떻게 표시되는지 먼저 확인했습니다.

위 스크린샷은, 페이스북에서 네이버 링크를 입력할 경우 자동으로 표시되는 오픈그래프 링크입니다. 네이버 홈페이지 로고와 함께 URL(NAVER.COM), 제목(네이버), 설명(네이버 메인에서 다양한…)이 함께 표시되죠. 유튜브 링크를 공유하면 아예 썸네일이나 미리보기 영상까지 표시되는 경우도 있습니다. 이러한 표시방식은 카카오톡이나 트위터, 브런치 블로그 등에서도 지원합니다. 오픈그래프 프로토콜에 의해 공통 규격으로 정의돼있기 때문에 가능한 일입니다.

오픈그래프

오픈그래프는, 해당 웹페이지를 간략하게 소개하는 정보입니다. SNS 등에서 누군가에게 뉴스기사를 전송하면, 뉴스기사의 썸네일과 URL, 간단 요약이 함께 전송되는 경우가 많습니다. 이 정보를 표시하는 방법에 대한 표준 규격이 바로 오픈그래프입니다.

오픈그래프 적용 여부를 확인하려면, 카카오톡 채팅방에 URL을 전송해보는 방식이 가장 간단합니다. 하지만 이 경우에는 상세 설명이 너무 짧게 보이기도 하고, 무엇보다 다른 메타태그를 한 번에 확인하기는 어렵습니다. 결국 상세 정보를 확인하기 위해서는 좀 더 확실한 도구가 필요합니다. 오픈그래프를 테스트하는 도구로는 페이스북 공유 디버거가 충분한 기능과 적당한 사용성 사이에서 균형을 잡고 있습니다.

그리고 이제 기존 콘텐츠에 대해 오픈그래프 표시 기준으로 공유 상태를 확인했습니다. 이렇게 실제 공유 결과를 확인한 결과, 기존 콘텐츠 대다수가 제목이 너무 길어서 ellipsis(… 처리)되고 있었습니다. 또한, 간단 요약 부분도 표시되지 않고 있었죠. 아래 스크린샷의 “여기를 눌러 링크를 확인하세요”는, 링크 정보가 없는 경우 표시되는 기본 문구입니다. 보통 저렇게 표시되면 스팸 링크라고 인식하기 마련이죠.

심지어, 홈페이지 메인 주소(mets.co.kr)을 공유했을 때조차 회사 로고가 아니라 콘텐츠 이미지가 표시됐습니다. 아래 이미지 영역이 왜 있는지, 무슨 의미인지, 실제로 진입하기 전에는 정보 확인이 불가능하죠.

콘텐츠 제목 또한 대부분의 게시물에 대해서 Mets만 표시되고 있었습니다. 다행히 이 부분은 view 쪽에서 og:title 태그를 title 태그와 동일한 값을 DB에서 받아오도록 수정하여 처리할 수 있었죠. 하지만, 여전히 제목은 이상하고, 설명 텍스트가 없었습니다.

결국, DB 자체의 구조를 변경할 때가 됐습니다.

제목 일괄 수정

먼저 SQL에서 기존 콘텐츠 제목을 모두 불러왔습니다. 그리고 제목을 모두 5단어 이하로 축약했죠. 콘텐츠 자체에 대해서도 분량이 너무 긴 경우 2~3개로 분할하고, 너무 짧은 경우 비슷한 게시물과 통합했습니다.

여기까지 진행했을 때 오픈그래프 점수는 상위 18%였습니다. SEO에 조금이라도 관심을 가지고있는 웹페이지라면 기본적으로 달성할 수 있는 수준이죠. 하지만 여전히 검색을 통한 유입은 많이 부족한 상태였습니다.

키워드와 설명 정의

이왕 DB를 수정하는김에, 콘텐츠 테이블에 아예 keywords와 description 컬럼을 추가했습니다.

• keywords
  콘텐츠를 설명하는 키워드입니다. 오픈그래프에 해당하지 않으며, SEO에도 큰 영향을 주지 않습니다. 하지만 설정하면 해시태그처럼 콘텐츠 하단에 뿌릴 수 있어 적용했습니다. (예시: 플랫디자인, 미니멀, GUI, 모션인터랙션, 어포던스, 동적 그래픽, 피드백)
• description
  검색엔진 또는 SNS에 공유 시 표시되는 텍스트입니다. 오픈그래프와 메타태그 모두에 해당하며, SEO에 매우 큰 영향을 줍니다. 콘텐츠 작성 시 첫 문단을 자동으로 적용하기도 하나, 직접 요약문을 작성하면 SEO 점수가 더 높게 책정됩니다. (예시: 플랫&미니멀 디자인 컨셉이 확산되고 모바일 기기의 성능이 높아지면서, 디자인에서 모션의 비중이 높아지고 있습니다. 그렇다면 모션은 어떻게 적용해야하는지 알아봅시다.)

이렇게 설명과 키워드 넣는 공간을 만들었으니, 어떤 내용을 넣을지 고민할 때가 됐습니다.

참고삼아 말씀드리자면, 위 스크린샷은 현재 DB가 아니므로 XSS 하셔도 의미가 없습니다.
그래서 올릴 수 있기도 했고요. 

키워드 수집

먼저 메츠와 관련된 키워드를 수집했습니다. 그 중 가장 기본은 현재 검색광고를 집행중인 키워드가 되겠죠. 기존 광고 담당자에게 요청하여 검색광고 내역(20개)을 확인했습니다. 그리고 그 중 클릭률(CTR)이 가장 높은 키워드(5개)를 선정합니다. 이후 광고 관리자 내에서 유사 키워드(5천여 개)를 탐색하고, 그 중 검색요청 대비 게시글 수가 적은 키워드(100개)를 엄선합니다.

숫자를 주의해서 봐주세요. 20-5-5000-100 순입니다. 
기존 경험을 확장하고, 다시 주요 경험으로 집약하는 과정을 반복합니다. 

이렇게 엄선한 키워드는, 메츠에서 게시물 작성과 키워드 선정, 설명문구(description) 작성 시 사용할 핵심 단어장이 됩니다. 그 외의 단어는 매우 중요한 트렌드를 반영하거나, 특별한 목적(설명 목적의 일상용어인 경우 등)이 있어야만 사용 가능하죠.

관리자페이지 수정

keywords와 description 컬럼은 개발 완료 후 추가했기때문에, 기존 관리자 글작성 페이지에서는 직접 입력이 불가능했습니다. SQL을 사용할 수 없는 경우에는 콘텐츠를 작성해도 공유하기 어렵다는 문제가 있었죠. 사실, 그냥 메뉴얼로 처리해도 되는 일이었습니다. 하지만, UX 전문이라는 타이틀을 달고있으면서 “설명서 보세요”라고 말하기에는 조금 부끄럽죠. 그래서 아예 관리자페이지 자체도 수정합니다.

• 콘텐츠 페이지가 아닌 경우 View 쪽에서 직접 키워드/설명 추가(About, Contact Us 등)
• 글 작성 페이지에는 쉼표로 구분하는 키워드 입력란과 한줄요약 입력란 추가
• 입력란 공백 시 글 작성 불가, 임시저장만 가능하게 설정
• 모든 게시물은 공통 키워드(Mets HIT, 디자인)와 카테고리 키워드(Precede, Works, News 등) 자동 입력

이외에도 favicon, logo, og:image 등을 설정하는 과정도 있었으나, 지금까지 이야기한 내용과 중복이 많으므로 생략하겠습니다. 그렇다고 중요도가 낮은 것은 아니니 꼭 확인해주세요.

사이트맵

위 작업까지 끝나고나면, 웹마스터에서 “사이트맵과 RSS를 추가해주세요”라고 말해줍니다. 이 둘은 워드프레스같은 설치형 블로그를 사용하는 경우, 한두가지 플러그인을 적용하여 쉽게 만들 수 있습니다.

사실 RSS는 SEO에 있어 큰 중요성이 없으며, 최근에는 잘 사용하지 않는 추세이기도 합니다. 콘텐츠 자체를 홍보하는 경우나, RSS를 통한 구독자가 다수 존재하는 경우, 지속적인 유입을 발생시킬 수 있죠. 바로 인터넷 언론이 여기에 해당합니다. (그런데 요즘은 RSS 없이 SNS 계정을 운영하는 경우도 많아요) 메츠와는 관계가 없기 때문에 이 과정은 생략했습니다.

참고로, 현재 메츠 홈페이지에는 사이트맵과 RSS 모두 적용돼있습니다. 

하지만 사이트맵은 검색엔진에서 그 홈페이지 내 모든 페이지 목록과 실제 검색결과를 비교하는데 사용하므로, 매우 중요도가 높아요. 그나마 다행이라면, 사이트맵 제작은 그리 난이도가 높지 않습니다. 홈페이지 목록과 날짜, 중요도를 입력하면 자동으로 입력해주는 툴이나 웹 기반 서비스가 꽤 많죠. 우리 서비스의 정보구조(IA)에 대해 명확하게 인식하고, 그에 맞추어 사이트맵을 제작하면 됩니다. 이제 엑셀을 사용할 때가 됐습니다.

각 항목의 의미는 다음과 같습니다.

• loc
  해당 페이지의 전체 URL입니다. Canonical URL과 동일하게 작성해주시면 됩니다.
• lastmod
  마지막 수정일입니다. 게시물 발행일과 동일하게 입력해주세요.
• changefreq
  페이지 갱신 빈도입니다. 목록 형식의 링크는 게시물 발행 빈도에 따라 always, hourly, daily, weekly, monthly, yearly, never 까지 다양한 선택지가 있습니다. 다만 이는 웹 크롤러에 제공하는 힌트일 뿐이며, 절대적인 기준은 아닙니다.
• priority
  페이지의 중요도입니다. 0.5~1 사이의 값을 입력하면 좋습니다. 저희는 홈 화면이나 연락처 페이지를 1로 설정하고, 게시물 각각을 0.6으로 설정했습니다. 이 또한 웹 크롤러에 제공하는 힌트입니다.

결론

2021년 현재, 메츠 홈페이지의 웹표준 순위는 상위 2%입니다. 아래는 최근(2020-03-02) 네이버 웹마스터를 확인한 결과입니다.

이제 게시물을 작성하면, 검색엔진을 통한 유입은 최대한 보장됩니다. 그말인즉슨, 발행한 게시물은 어떻게든 검색엔진에 표시되고, SNS로 공유할 경우 항상 요약문과 썸네일이 함께 전송되며, 시각장애인을 위한 접근성 옵션까지 어느정도 충족하고 있다는 뜻이죠. 모바일이나 태블릿 환경에서 접속할 경우 그에 맞는 반응형 GUI/UX는 당연히 제공합니다.

SEO 작업을 단순한 검색엔진 마케팅이라 생각해서는 안됩니다. 오히려, 사용자가 콘텐츠에 접근하는 경로에서 불편함 제거, 확산 극대화로 그로스해킹을 이루는 과정이라 생각하면 좋습니다. 중요한 것은 콘텐츠이며, SEO는 콘텐츠로 향하는 경로를 정비하는 과정과 같습니다. 큰 혁신으로 단번에 이루지 않고, 작은 목표 여러개를 동시에 이루며 끝없이 개선하는 애자일 방법론을 적용해야합니다.

이제는 대부분의 트래픽이 모바일로 이동하고 있습니다. 저희는 그 흐름을 준비하며, 모바일 페이지 최적화와 사용성 개선이라는 다음 목표를 향해 나아가려합니다. 긴 글에 함께해주셔서 감사합니다 🙂