Amada Coding Club

[Front-End] SEO의 개념과 중요성 본문

Front-End/관련 지식들

[Front-End] SEO의 개념과 중요성

아마다회장 2023. 1. 12. 11:33

원래는 웹 라우팅에 대한 글을 먼저 쓰려고 했다가 참조 블로그에서 SEO와 SSR에 대한 내용을 다뤄 이 부분에 대해 먼저 이야기를 적어보고자 한다. 

이 게시글은 SEO에 대한 내용이다.

SEO란?

SEO는 Search Engine Optimization의 약자로 검색엔진최적화, 즉 구글, 네이버, 다음과 같은 검색엔진에서 사이트를 쉽게 찾도록 하는 프로세스, 작업, 절차를 말한다. 

 

검색 엔진이 사이트를 쉽게 찾도록 하는 건 왜 중요할까?

우리가 검색어를 입력해 검색할 때 검색 엔진은 크롤링 후 자체적으로 정한 기준을 바탕으로 우선순위를 부여해 페이지 순서를 결정한다.  만약 제작한 사이트가 검색 엔진의 기준에 부합할수록 높은 우선 순위를 가질 수 있고 페이지의 상단에 위치 할 수 있다. 

 

일반적으로 검색을 할 때 1-2페이지 안에 대부분의 정보를 찾고 검색을 종료하는 경우가 대다수이다. 

출처: https://www.searchenginewatch.com/2013/06/20/no-1-position-in-google-gets-33-of-search-traffic-study/

다음 결과와 같이 페이지가 1에서 2로 넘어갈 때 트래픽 수(해당 페이지를 이용하는 횟수)가 급격하게 줄어드는 모습을 볼 수 있다. 그래서 사이트가 1페이지에 올라가야 더 많은 고객을 모을 수 있다고 이해할 수 있다. 

 

또한, 같은 페이지라도 어느 위치에 있냐에 따라 접속 횟수가 달라진다. 

출처: https://firstpagesage.com/seo-blog/google-click-through-rates-ctrs-by-ranking-position/

위 결과는 사이트 별 클릭 횟수를 비율로 나타낸 사진이다. 보면 페이지가 하단으로 갈수록 접속자 수가 급격히 줄어드는 모습을 볼 수 있다. 이는 가급적 높은 페이지, 상단에 위치해야 더 많은 사용자를 모으고 홍보효과를 높일 수 있다는 것을 보여준다.

 

그러면 어떻게 해야 페이지 상단에 위치할 수 있을까?

2가지 방법이 있다

1. 광고

  • 페이지 상단에 위치시킬 수 있는 확실한 방법
  • 그러나 비용이 많이 듦

2. SEO 향상

  • 비용이 적게 들며 지속적으로 상단에 위치시킬 수 있음
  • 상단에 위치시키기 위한 작업이 많이 필요함

두 가지 방법 중에서 단기간에 확실한 효과를 얻을 수 있는 방법은 광고이지만 지속적인 효과를 나타내기 위해선 SEO를 최대한 적용하는 방법을 사용해야한다. 

 

SEO 적용 방법

각 검색엔진은 자체적인 SEO 기준을 가지고 있다.

구글 SEO 기본 가이드

네이버 SEO 기본 가이드

 

일단 구글의 경우를 살펴보자

구글의 크롤링 봇은 사용자가 페이지를 인식하는 방식과 비슷하게 페이지를 인식한다. 그래서 크롤링 봇이 페이지를 더 쉽게 이해하기 위해서 개발할 때 아래 내용을 참고해서 작업해야 한다.

  1. <title>을 이용해 고유하고 정확한 페이지 제목 만들기
  2. 검색 결과에서 시선을 끄는 제목 링크와 스니펫 제작하기
  3. <meta> 설명 태그 작성하기
  4. 표제 태그를 이용해서 중요한 부분 강조하기
  5. 구조화된 데이터 마크업 추가하기
  6. 모바일에 최적화하기

위 내용들을 무조건 반영할 필요는 없다. 필요에 따라 적절히 적용하는 것이 중요하다. 그러나 적용을 많이 할 수록 구글 봇이 사이트를 찾기 쉬워져 상단에 올라갈 가능성이 높아진다는 점 참고바란다.

위 내용 이외에도 검색엔진이 페이지를 더 쉽게 찾을 수 있는 방법이 여러가지가 있다. 그 내용들은 구글 SEO 사이트를 참고하자. 

 

만약에 구글 봇이 어떤 페이지를 탐색하는 걸 막고 싶다면 robots.txt를 제작해 크롤링을 막을 수 있다. 

# brandonsbaseballcards.com/robots.txt
# Tell Google not to crawl any URLs in the shopping cart or images in the icons folder,
# because they won't be useful in Google Search results.
User-agent: googlebot
Disallow: /checkout/
Disallow: /icons/

이 부분은 구글의 robot.txt 설명을 참고하면 좋다

구글에서는 robot.txt는 안전한 방법은 아니기 때문에 개인정보 등 민감한 내용을 숨기고 싶을 경우 <noindex>태그를 사용하거나 비밀번호를 등록하는 방법을 사용하도록 권장하고 있다.

 

SEO에 대해 간략하게 이야기 해봤다.

원래는 그냥 사이트를 만드는 것만 신경썼었는데 수익성이나 사용자 유치를 위해선 SEO에 대해서도 신경써야 한다는 사실을 느낄 수 있었다. 다음 프로젝트에선 한번 SEO에 대해 생각해봐야겠다.

 

<다음 게시글>

 

[SPA SEO] SPA에서의 SEO 문제

지난 SEO에 대한 이야기를 이어서 2023.01.12 - [Front-End/관련 지식들] - [Front-End] SEO의 개념과 중요성 [Front-End] SEO의 개념과 중요성 원래는 웹 라우팅에 대한 글을 먼저 쓰려고 했다가 참조 블로그에서

amadaclub.tistory.com

 

<참고>

프론트엔트 개발자는 검색 엔진 최적화(SEO)를 신경써야할까?

CSR, SSR을 이해해야 하는 이유? SEO 🌐