서핏의 새로운 기능 개발에 앞서 조직 내 검색엔진 최적화(이하 SEO) 관련한 논의가 활발하게 이뤄지는 것을 며칠 동안 보게 되었다. 조직 내에 두 명밖에 없는 엔지니어 중 한 명으로써, 빠르고 정확하고 알기 쉽게 기술적인 정보를 전달해 드리고 싶었다.
SEO에 관련된 정보들을 팀원분들에게 알려드리기 위해서, SEO 기본 가이드를 이용해서 SEO에 관해서 얼아만 알고있는지 체크해 보았다. 기존에 알고 있었던 것 이외에 엔지니어링적인 부분이 아니더라도 많은 행위들이 SEO에 영향을 미칠 수 있다는 것을 알게 되었고, 그것들 중 엔지니어로써 당장 해볼 수 있는 것들만 재구성해서 글로 정리하려고 한다.
Google 검색의 작동 원리
SEO를 하기 위해서는 검색엔진이 뭘 만들어내고, 그것을 만들어내기 위해서 어떤 프로세스를 수행하는지 알 필요가 있다.
Google 검색결과에 표시되는 페이지나 다양한 메타 정보들은 사이트 소유자가 Google에 제출한 것이 아닌 Google이 자동으로 사이트를 탐색하고 분석해서 만든 색인으로부터 표시되는 것이다.
크롤링
당연히 첫 번째 단계로, 웹이라는 거대한 환경에서 검색결과로 보여줄 웹 페이지들을 찾아야 할 것이다. 위에서 언급한 것처럼 Google은 사이트 소유자로부터 사이트를 제출받는 것이 아니기 때문에 지속적으로 웹을 탐색해서 새로운, 업데이트된 페이지들을 파악해야 한다. Google은 방문한 적 있는 페이지를 파악한 페이지 목록이라는 이름으로 가지고 있는데, 새로운 페이지들은 파악한 페이지에서 연결되는 링크를 따라가면서 발견된다고 한다.
(이런 방식으로 새로운 페이지가 발견된다고 하면, 제일 처음에 수동으로 등록한 페이지가 있었을까?)
그렇게 발견된 페이지들은 Google이 내용을 분석하기 위해서 크롤링을 한다. Google은 보통 사용자와 같은 과정으로 페이지를 인식하게 하기 위해서 최신 버전의 Chrome을 사용해서 페이지를 렌더링하고 자바스크립트를 실행하는데, 그렇게 하는 이유가 있다.
모던 웹 프레임워크가 지금처럼 많이 사용되기 이전엔 페이지가 서버에서 만들어져 브라우저에서 표시되는 방식으로 제공되었다. 그렇기 때문에 Google과 같은 검색엔진들은 서버에 만들어진 페이지를 전달받기만 해도 분석하기 충분한 정보를 얻을 수 있었는데, Javascript를 이용해서 정보를 불러오는 방식인 SPA가 비중이 커지면서 검색엔진이 정보를 분석하려면 일반 사용자와 똑같이 페이지를 렌더링할 수밖에 없어진 것이다.
색인 생성
페이지의 크롤링 단계가 끝나면 크롤링된 데이터로 페이지의 내용을 파악하는 단계를 시작한다. 주로 title 요소나 alt 속성, 이미지, 동영상처럼 텍스트로 이뤄진 컨텐츠나 핵심적인 컨텐츠 태그와 속성을 분석해서 색인으로 만드는 프로세스가 진행된다.
필자는 시맨틱 마크업이나 웹 접근성을 위한 속성, 메타 태그들이 이 단계에서 분석되고 색인의 어떤 정보로 저장될 것이라는 추측을 가지고 있다. SEO 품질은 이 단계에서 얼마나 충분한, 정확한 정보를 색인으로 만드느냐에 따라서 달라질 것이다.
검색결과 게재
사용자가 입력한 검색어를 이용해서 색인에 일치하는 페이지를 찾은 다음 사용자의 위치와 언어, 기기같은 수만은 요인들을 파악해서 관련성이 높은 페이지를 노출한다.
컨텐츠에 대해 이해시키는 방법
페이지를 인식시키기
크롤링 단계에서 언급한 것처럼 Google은 보통 사용자와 같은 방법으로 페이지를 인식하게 된다. 그러므로 Javascript와 CSS, 이미지 파일에 접근이 가능해야하는데, 혹시 robots.txt로 접근을 막게 설정되어 있다면 색인 생성에 부정적인 영향을 미칠 수 있다.
title
페이지별로 고유한 title을 사용해야 한다. 페이지별로 고유하고 정확한 title이 사용되면 검색엔진이 페이지의 주제가 뭔지 알 수 있게 되고, 검색 키워드에 대해 사이트의 다양한 페이지를 인식할 수 있게 된다. 실제로 용도가 다른 페이지인데 title이 같게 설정되어 있다고 가정해보자. 검색엔진은 검색 키워드에 대해서 두 페이지를 같은 페이지로 간주할 것이고, 그만큼 사용자의 다양한 검색에 걸리지 않을 것이다.
또한 검색결과로 페이지가 표시될 때 해당 페이지의 title 요소가 검색결과의 제목으로 표시될 수 있다. 그렇기 때문에 title 요소의 내용은 간결 정확해야하고, 사이트의 각 페이지별로 고유해야 한다.
메타 설명 태그
title 요소와 비슷하게, 메타 설명 태그는 페이지의 설명을 요약한다. 제목은 몇 개의 단어나 문구로 이뤄지겠지만, 메타 설명 태그는 한두 문장 혹은 짧은 단락 수준으로 제공될 수 있다. Google은 검색결과의 스니펫으로 사용할 텍스트를 찾지 못하는 경우도 있기 때문에 각 페이지별로 고유하고 구체적인 메타 설명 태그를 추가하는 편이 좋다.
서핏의 경우 메인 페이지와 비즈니스 페이지(www.surfit.io, business.surfit.io)를 제외한 다른 페이지는 메타 설명 태그가 적절하게 사용하지 못하고 있다는 것을 알 수 있다. 서핏 채용과 디렉토리 페이지에 관련 기능을 설명하는 적절한 메타 설명 텍스트를 넣어야겠다.
표제 태그 (h1 ~ h6)
의미있는 표제를 사용하면 각 페이지에서 중요한 주제를 표시하고 컨텐츠의 계층 구조를 만들 수 있다. 이렇게 되면 사용자는 조금 더 쉽게 문서를 탐색할 수 있게 되는데, 여기서 의미없는 표제란 아래와 같다.
페이지 구조와는 상관없이 디자인적인 이유만으로 표제 태그를 사용하는 경우
표제 태그의 크기를 질서없이 사용하는 경우
표제 태그가 설명처럼 너무 긴 경우
표제 태그를 너무 많이 사용하는 경우
이런 경우만 피하면 탐색하기 좋은 표제 태그를 작성할 수 있다.
구조화된 데이터 마크업
검색엔진에 컨텐츠에 대한 추가적인 설명이 필요한 경우 구조화된 데이터를 사용할 수 있다. 만약 검색엔진이 구조화된 데이터 마크업을 발견하면 사용자의 눈에 더 잘 띄는 방식으로 컨텐츠를 노출한다. 만약 내가 lg ultrafine 4k 모니터를 구매하고 싶어서 Google에 검색했다고 가정해보자. Google은 아래 사진과 같이 검색결과를 노출한다.
사진에 보이는 검색 결과는 Product라는 구조화된 데이터 마크업을 사용해서 amazon.com에 올라온 lg ultrafine 4k 모니터 상품을 검색엔진에 설명한 것이다. 나같이 해당 상품 구매 의사가 있는 사용자들은 평정, 리뷰, 재고, 가격, 재고 유무를 보고 해당 페이지에 접속할 것이다.
이외에도 검색엔진에 알려줄 수 있는 다양한 구조화된 데이터 마크업이 존재한다.
컨텐츠 최적화하기
링크 현명하게 사용하기
좋은 링크 텍스트 작성하기
링크 텍스트란 링크로 보이는 텍스트이다. 이 텍스트는 지금 접속하려는 페이지가 어떤 페이지인지 알려준다. 해당 링크는 사이트의 다른 페이지로 이동하는 내부 링크일 수도 있고, 다른 사이트로 이동하는 외부 링크일 수도 있다. 뭐가 되었든간에 보여지는 링크 텍스트를 잘 쓰면 페이지를 탐색하기에 좋아진다. 좋지 않은 링크 텍스트는 뭘까?
“여기”, “페이지”, “여기를 클릭하세요” 처럼 너무 일반적인 내용인 경우
링크로 이동되는 페이지와 큰 연관이 없는 텍스트를 사용하는 경우
지나치게 긴 문장, 단락을 링크 텍스트로 구성하는 경우
링크 텍스트를 일반 텍스트처럼 보이게 하는 스타일을 사용하는 경우
nofollow
내 사이트를 다른 사이트에 링크하면 내 사이트의 인지도 중 일부를 다른 사이트에 넘겨주거나, 거꾸로 다른 사이트의 인지도를 따르게 될 수도 있다. 이럴 경우에 Google에 인지도를 전달하거나 전달하지 말도록 알릴 수 있는데, 링크의 rel 속성의 값을 “nofollow”로 설정하면 된다.
만약 내 사이트에 댓글 기능을 운영하고 있는데, 어떤 사용자가 댓글과 함께 어떤 페이지를 링크했다고 가정해보자. 만약 그 페이지가 Google 에서 스팸이라고 판단하고 있다면, 내 사이트의 인지도에 영향을 줄 수 있다. 이럴 때 사용하는 것이 “nofollow” 이다. 이외에도 reCAPTCHA나 댓글 검토 기능을 사용하면 이런 현상을 막을 수 있다고 한다.
이미지 최적화하기
HTML 이미지 사용하기
HTML의 이미지 태그를 사용해서 컨텐츠에 이미지를 삽입해야 한다. img, picture 같은 시맨틱 마크업을 사용하면 크롤러가 이미지를 처리해서 색인을 만들 때 사용할 수 있다. 추가적으로, picture 요소를 사용하면 반응형 이미지를 위해서 다양한 화면 크기에 따른 옵션을 지정할 수도 있다고 한다. 또, 이미지에 loading=”lazy” 속성을 사용하면 사용자가 페이지를 더 빠르게 로드할 수도 있다고 한다.
이미지를 사용할 때 alt 속성을 사용하면 어떠한 이유로 이미지를 표시할 수 없을 때 대신 표시할 텍스트를 설정할 수 있다. 또한 스크린리더로 브라우저를 사용할 때 이미지에 대한 정보를 제공하는 목적으로도 사용한다.
이미지를 사용할 때 하면 안좋은 것들은 무엇이 있을까?
CSS를 이용해서 색인을 생성할 이미지를 표시하는 경우
image1.jpg, 1.png 등 일반적인 파일 이름을 사용하는 경우
매우 긴 파일 이름을 사용하는 경우
스팸으로 간주될 정도로 긴 텍스트를 alt 텍스트로 사용하는 경우
표준 이미지 형식(JPEG, GIF, PNG, BMP, WebP)을 사용하지 않는 경우
여담
이렇게 Google의 SEO 가이드를 읽으면서 당장 프로덕트에 적용해서 생각해야 할 부분들을 정리해 보았다. 공부하면서 좀 놀랐던 점은 엔지니어링적인 요소가 아니더라도 SEO를 위해서 다양한 시도를 해볼 수 있다는 것이였다. 그런 부분들에 대해서는 따로 정리하진 않았는데, 다시 읽어보고 프로덕트에 시도해볼 수 있는 action item을 만들면 좋을 것 같다는 생각이 들었다.