SEO 최적화

👀 SEO란?

Search Engine Optimization의 약자로 검색 엔진 최적화를 의미한다.

웹 사이트를 검색 엔진 상위에 노출되도록 개선하는 것이다.

 

🤔 왜 SEO를 해야 할까?

• 잠재 고객 증가
  웹 사이트가 검색 결과의 상위에 노출되면 자연스럽게 방문하는 고객이 증가한다.
• 타겟 고객 접근
  특정 키워드를 검색 했다는 것은 이미 해당 제품이나 서비스에 관심이 있다는 것이다.

---

👀 SEO vs SEM

SEO는 검색 엔진 최적화, SEM(Search Engine Marketing)은 검색 엔진 마케팅을 의미한다.

 

🤔 SEM이란?

검색을 했을 때, 상단에 위치하는 광고 게시물들이 SEM을 이용한 것이다.

 

🤔 SEM과 SEM 차이점

• SEO는 시간을 투자해야하지만, SEM은 적은 시간으로 트래픽을 모을 수 있다.
• SEO로 확보한 트래픽은 쉽게 사그라들지 않지만, SEM은 광고비가 소진되면 검색엔진에서 사라진다.

=> 따라서 초반에 빠르게 트래픽을 모으고 싶으면 SEM을, 장기적인 성과를 지속하기 위해서는 SEO를 사용한다.

---

👀 SEO 동작 원리

SEO의 동작은 크게 크롤링 - 인덱싱 - 랭킹으로 이루어진다.

 

1. 크롤링(Crawling)

크롤링은 크롤러라는 로봇(🤖)이 수행한다.

크롤러는 웹을 탐색하며 데이터를 수집한다.

 

먼저 어떤 웹 사이트에서 시작한다.

그리고 웹 사이트에 있는 링크를 추적하면서 새로운 페이지를 발견하고, 새로운 페이지에서 또 데이터를 수집한다.

주기적으로 페이지들을 다시 방문하여 업데이트된 내용이 있는지도 확인한다.

 

2. 인덱싱(Indexing)

크롤러가 모아준 정보를 DB에 저장한다.

DB에 저장할 때, 막 저장하는게 아니라 키워드 및 주제에 따라 분류해서 저장한다.

 

3. 랭킹(Ranking)

검색했을 때, 상위에 노출시킬 게시물을 결정한다.

인덱싱된 페이지 중 키워드와 가장 관련성이 높은 페이지를 찾아내고, 페이지의 내용들을 평가한다.

 

위의 3단계를 통해 SERP를 완성한다.

SERP란 Search Engine Result Page의 약자로, 검색 결과 중 첫 페이지를 의미한다.

---

👀 SERP가 중요한 이유

100%의 고객 중에 75%는 첫 페이지에서 두번째 페이지로 넘어가지 않는다.

검색을 했을 때, 상위 2-3개의 게시물은 광고 영역이다.

사람들은 상단의 광고 게시물을 광고라는 것을 인지하고 잘 클릭 하지 않는다.

실제 광고 게시물 클릭 비율은 4%정도이다.

 

광고가 아닌 컨텐츠들을 자연 검색 컨텐츠(오가닉)이라고 하는데, 

자연 검색 컨텐츠의 클릭 비율은 40%로 광고에 비교하면 10배 정도 높다.

 

또한 구글 광고에 노출 되기 위해서는 SEO를 만드는 예산보다 8-9배가 든다.

SEO는 컨텐츠만 잘 작성하면 들어가는 비용이 없다고 볼 수 있다.

---

👀 SEO 최적화 방법

1️⃣ 메타 태그

메타태그를 이용하는 방법이다.

메타태그는 웹 페이지의 HTML에 작성하는 정보로, 검색엔진과 사용자에게 컨텐츠를 설명한다.

• <title> 태그
  검색 했을 때, 노출되는 제목이다.
  위의 사진에서 파란 글씨로 나오는 부분이다.
  
  
• <description> 태그
  웹 페이지의 설명을 요약한 1-2줄의 문장이다.
  대부분의 사용자들은 이 설명을 보고 자신이 찾는 정보인지 아닌지를 판단하므로 잘 읽히게 작성하는게 중요하다.
  타이틀 아래에 나오는 부분이다.
  
  
• <robots> 태그
  크롤러의 접근 여부를 설정한다.

2️⃣ 오픈 그래프 태그

웹페이지를 SNS를 통해 공유했을 때, 어떻게 노출될지를 정의해 준다.

og: 의 형태로 정의한다.

• og:title - 웹 페이지의 제목
• og:description - 웹 페이지의 상세 설명
• og:image - 웹 페이지 카드에 나타나는 썸네일
• og:type - 웹 페이지 유형
• og:url - 웹 페이지 주소

3️⃣ 백링크

백링크는 다른 웹 사이트에서 우리의 웹사이트로 연결되는 것을 의미한다.

다른 사이트가 우리 사이트를 추천하는 것과 같아서, 검색 엔진은 신뢰도의 지표로 간주한다.

 

4️⃣ 사이트맵과 robots.txt

• 사이트 맵
  웹사이트의 모든 페이지 목록을 XML 형식으로 제공하여 검색 엔진이 사이트의 구조를 쉽게 파악하도록 해준다.
  즉, 크롤러가 빠르고 효율적으로 크롤링 할 수 있도록 도와주는 것이다.
• robots.txt
  크롤러에게 어떤 페이지를 크롤링하고, 어떤 페이지를 크롤링하지 않을 지를 지시하는 파일이다.

 

5️⃣ 콘텐츠

가장 중요한 것은 '키워드 관리'이다.

콘텐츠 내에 포함된 키워드의 위치와 개수 등이 검색 엔진 평가 알고리즘에서 중요한 부분이다.

 

데이터에 기반한 키워드를 사용해야 한다.

검색량이 많은 키워드는 이미 인기있는 키워드이다.

검색량이 비교적으로 적지만 경쟁사가 잘 사용하지 않는 키워드를 발굴해야 한다.

 

또한 트렌드에 따라 새로운 키워드를 발굴해야 한다.

시간이 지나면서 새로운 트렌드로 인해 사람들이 관심을 가지는 키워드가 바뀌기 때문이다.

 

6️⃣ 기술적 SEO 

웹사이트의 보안, 모바일 친화성, 로딩 속도 등을 개선하는 방법이다.

 

• 웹 사이트 보안
  구글에서는 HTTPS를 적용한 사이트에 더 높은 점수를 적용한다.
• 모바일 친화성
  모바일 사용자가 증가함에 따라, 모바일 친화성이 중요한 요소가 되었다.
  웹 사이트가 모바일 버전을 지원하지 않는다면, 반응형 웹 디자인을 통해 모바일 친화적으로 개선해야 한다.
• 로딩 속도 개선
  웹 사이트를 클`릭했을 때 로딩되기까지 시간이 얼마나 걸리는지를 의미한다.
  웹 사이트가 느리면 색인이 느리게 진행되어 검색 결과 페이지에 노출되기까지 많은 시간이 소요된다.
  따라서, 검색 결과에 적게 노출된다.

7️⃣ 구조화된 URL

서브 폴더 형식을 사용해야 한다.

서브 도메인은 메인 도메인과 분리된 페이지로,  검색 엔진이 사이트를 측정할 때 메인 도메인과 서브 도메인을 따로 보고 측정한다.

서브 도메인 형식을 사용하면 검색 엔진은 다른 웹 사이트로 판단한다는 것이다.

따라서 메인 도메인이 가지고 있는 신뢰도가 이어지지 못한다.

 

• 서브 도메인 형식 : sub.heedonguri.com
• 서브 폴더 형식 : heedonguri.com/cateogry

---

👀 SPA에서 SEO

🤔 SPA?

Single Page Application의 약자로 하나의 HTML 파일에서 구동되는 형태의 페이지이다.

최초 한 번만 요청하여 페이지 전체를 로드하고, 이후에는 필요한 부분만 동적으로 변경하는 애플리케이션이다.

 

- SEO에 문제가 되는 이유

1. 자바스크립트
   SPA를 구현하기 위해서는 CSR 방식이 사용된다.
   CSR 방식에서는 HTML을 그리는 역할을 클라이언트가 JS로 수행한다.
   하지만 대부분의 웹 크롤러는 JS 엔진이 없기 때문에 HTML에서만 컨텐츠를 수집한다.
   (구글 제외. 크롤러 안에 JS 엔진이 존재함)
   CSR 방식으로 개발된 페이지를 빈 페이지로 인식한다는 것이다.
   
   
2. URL
   SPA는 url이 한 개지만 여러가지 뷰를 보여준다.
   크롤러는 하나의 url마다 색인을 만들고 검색 결과로 색인된 페이지를 보여주기 때문에
   모든 페이지의 내용을 크롤링하지 못한다.
   
   
3. meta data
   여러가지 뷰가 하나의 페이지로 색인되기 때문에
   페이지 뷰가 변해도 페이지 타이틀과 디스크립션을 바꿀 수 없다.

 

- SEO 해결 방법

 

1. History API

현대 브라우저들은 window 객체의 하위 객체인 history 객체를 가진다.

history API의 pushState를 활용하면 SPA SEO 문제를 해결할 수 있다.

이 메소드를 사용하면 페이지의 변화를 주지 않고 url만 바꿀 수 있다.

SPA에서 구분이 필요한 뷰에 진입할 때마다, pushState 메서드로 주소를 바꿔준다면 크롤러가 새페이지로 인식한다.

 

하지만 URL만 변경될 뿐, 서버에서 렌더링된 HTML을 제공하는 것은 아니다.

따라서 SEO 최적화에는 한계가 있을 수 있다.

 

2. SSR

사이트가 구축되기 전이라면 사이트를 SSR 방식으로 구축하는 방법이 있다.

SSR : 서버에서 렌더링 완료하고, 데이터가 결합된 HTML을 보내주는 방법

 

SPA이지만 SSR 방식으로 사용하는 방법에는 React의 Next.js, Vue의 Nuxt가 있다.

SSR에서는 서버에서 완성된 HTML 페이지를 전송하기 때문에, meta 태그들이 미리 정의 되어있다.

이는 크롤러가 내용을 읽고 인덱싱 하는데 도움을 준다.

또한 빈 페이지로 인식되는 CSR의 문제를 해결할 수 있다.

 

3. Pre-Rendering

서버에서 사용자인지 크롤러인지 판단하여,

크롤러에게는 렌더링 된 페이지를 전달하는 방법이다.