홈페이지 제작 시 SEO는 어떻게 최적화하는 걸까?

브랜드만의 홈페이지가 필요하여 만들기로 결심하고, 여러 웹 에이전시를 둘러보다 보면 이런 문구를 보신 적 있을 거라고 생각되는데요.

"홈페이지 SEO 최적화 제공"

대부분 제작을 의뢰하는 고객은 '음 업체가 해준다고 하니 알아서 잘 적용해주겠지' 라고만 막연하게 생각할 수 밖에 없습니다. 실제로 어떤 식으로 SEO 최적화를 진행하고 있는가를 명시한 곳은 몇 군데 빼고 찾아볼 수 없었는데요. 이번 포스팅에서는 실제 개발 시 적용하고 있는 SEO 최적화 기법을 몇 개 소개해드릴게요.

페이지 별로 다른 title을 사용하기

홈페이지에 적용할 수 있는 SEO 기법 중 하나는 페이지 별로 다른 title을 사용하는 건데요. '무조건 페이지마다 title을 다르게 해야한다'는 아니지만 페이지에 주제가 뚜렷하게 있어 다른 페이지와 구분할 필요가 있는 경우 title 태그를 통해 웹페이지의 제목을 정할 수 잇습니다.

우리가 구글이나 네이버에 검색했을 때 나오는 검색 결과들은 해당 페이지에 사용된 title tag나 크롤링도구가 수집한 페이지에서 제목이라고 판단되는 부분을 기반으로 검색 결과에 표시됩니다. 따라서 명시적으로 title에 '이 페이지는 이런 제목을 가져~'라고 적어두면 크롤링 봇이 수집한 문서를 더 잘 이해하고 검색 결과에 더 잘 나타내게 됩니다.

Breadcrumb 구조 사용하기

Breeadcrumb(브레드 크럼)이란 현재 페이지가 웹사이트 내에서 어느 위치에 있는지 알려주는 네비게이션 UI입니다. 이는 사용자에게 웹사이트의 어느 컨텍스트에 위치해있는지 명확하게 알려줄 수 있을 뿐만 아니라 주제 내에서 클릭을 통해 이전 단계나 다음 단계로 쉽게 넘어갈 수 있도록 해줍니다.

이런 좋은 유저 경험을 제공하는 웹사이트는 유저 이탈률을 낮추고 체류시간을 늘려주게 됩니다. 홈페이지의 체류시간이 높다는 건 좋은 구조를 가지고 있는 홈페이지라고 인식되며 SEO에 도움이 됩니다.

Breadcrumb 구조는 유저 경험(UX)을 개선할 뿐만 아니라 검색 엔진 결과페이지(Search Engine Results Page)에도 반영되는데요. 구글 봇이 해당 페이지를 가져갈 때 어떤 계층에 있는지 빠르게 파악하는데 도움을 줍니다.

사진은 구글에 "우산"이라고 검색했을 때 나오는 검색 결과 창인데요. 홈페이지 이름 아래 나오는 네비게이션 구조가 구글 봇이 해당 페이지가 어디에 있는지 이해하고 화면에 표시해 준 겁니다.

구글 SEO 가이드 문서에서는 유저가 잘 이해할 수 있는 구조화된 URL 사용을 권장하고 있습니다. Breadcrumb는 잘 설계된 URL 구조를 크롤링 봇에게 알려주는 역할을 하기 때문에 SEO에 도움이 됩니다.

이미지 최적화 하기

URL을 잘 구조화하거나, mata tag의 title과 description을 작성하는 것과 같은 기술적 요소 외에도 SEO에 영향을 끼치는 요소가 있습니다. 그중 하나는 페이지의 로딩 속도인데요. 좋은 유저 경험을 제공해주는 것도 SEO에 영향을 준다고 설명해 드렸는데요. 페이지의 로딩 속도는 유저 이탈률에 가장 큰 지분을 차지합니다. 느린 페이지 로딩이나 전환은 나쁜 유저 경험을 제공하고 이는 SEO에 좋지 않은 영향을 끼칩니다. (관련 리서치 링크)

페이지의 로딩 속도를 결정하는 건 많은 요소가 있을 수 있지만, 그중 큰 비율을 차지하는 것이 이미지입니다. 큰 용량의 이미지일수록 다운로드하는 시간이 오래 걸릴 것이고 이미지를 전부 받아올 때까지 유저는 흰 화면만 보고 있어야 합니다.

이를 해결하는 방법은 다음과 같은데요.

원본 서버에서 이미지를 받아오는 것이 아닌 CDN(컨텐츠 전송 네트워크)단에 이미지를 캐시하여 받아오는 방법이 있습니다. 이렇게 하면 유저의 요청이 원본 서버까지 가지않고 물리적 위치가 가까운 CDN 서버에서 이미지를 받아오게 되어 로딩 속도가 빨라집니다. 대표적으로는 AWS의 CloudFront, Cloudflare가 있습니다.

또 다른 방법으로는 유저가 가장 먼저 화면에서 보는 이미지는 priority 속성을 부여하여 이미지를 빠르게 로딩하고, 스크롤 해야 보이는 이미지 즉 초기에 보이지 않는 이미지는 lazy loading을 적용하여 페이지 로딩을 빠르게 할 수 있습니다.

마지막으로 이미지 최적화에서 크롤링 봇과는 상관없지만 유저 경험을 향상시키는 방법이 있는데요. 로딩이 되는 이미지에 블러효과와 같은 placehoder를 적용하여 유저에게 "이 박스에 이미지가 로딩되고 있어요"와 같은 메세지를 던져주어 UX를 개선시킬 수 있습니다. UX를 개선한다는 것은 유저의 이탈률을 줄이고, 체류시간을 늘려주어 최종적으로는 SEO에 도움이 되게 됩니다.