🔎 검색 엔진 동작 원리를 기반으로 SEO 통해 내 웹사이트 상위 노출시키기 (a.k.a. 검색 엔진 최적화)

Kongveloper·2023년 9월 28일

seo

Frontend

목록 보기

2/2

검색 엔진 최적화란(SEO)?

검색 엔진 상위권에 노출될 수 있도록 웹사이트를 최적화하는 작업.

[기본] 검색 엔진이란?

검색 가능한 웹 콘텐츠 데이터베이스로, 검색 색인, 검색 알고리즘 두 부분으로 구성되어 있다.
사용자에게 가장 연관성이 높은 검색 결과를 제공하는 것에 존재 목적이 있다.

1) 검색 색인 (Search index) : 웹 페이지에 대한 정보로 된 디지털 라이브러리.
2) 검색 알고리즘 (Search algorithm) : 검색 색인과 결과를 매칭하는 과업을 수행하는 컴퓨터 프로그램.

[검색 엔진의 두 종류의 검색 결과]

유기적 검색 (Organic results)
광고주로부터의 광고 검색 결과 (Paid results)

[심화] 검색 엔진의 동작 원리

크롤링 : 검색 엔진은 크롤러(자동화된 프로그램)를 통해 인터넷에서 찾은 페이지 내 텍스트, 이미지, 영상 등을 다운로드한다.

색인 생성 : 검색 엔진은 크롤링을 통해 다운받은 자료를 분석하고, 대규모 데이터베이스에 저장한다.

검색 결과 게재 : 사용자가 검색 시, 검색어와 관련된 정보를 사용자에게 의미있는 결과 순서로 반환한다.
➡️ 이 3번 단계에서 우리의 웹사이트가 더 상위의 검색 엔진 결과에 노출될 수 있도록하는 일련의 작업

URLs : 검색 엔진은 백링크(검색 색인에 포함된 검색엔진이 이미 알고 있는 사이트에 새로운 웹 사이트에 대한 링크가 있는 경우), 사이트맵, Google Search Console에 URL 제출된 것에서 URL을 찾는다.
Crawling : 스파이더라고 불리우는 검색 엔진이 URL을 방문하여 웹사이트 내 파일을 다운받는 작업이다.
Processing & Rendering :
- Processing : 검색엔진이 크롤링한 웹 페이지에서 중요한 정보를 추출하고 이해하는 작업이다.
- 링크 추출, 콘텐츠 저장, 인덱싱(indexing) 등의 작업
Indexing : 위의 과정을 통해 크롤링된 웹 페이지 내 처리한 핵심 정보를 검색 색인(search index)에 추가하는 과정이다.
- 검색 색인(search index)은 사용자가 검색 엔진에서 검색을 했을 때 나오는 결과로, Indexing이 되지 않으면 사용자는 해당 웹사이트를 검색할 수 없다.

검색 엔진 순위는 어떻게 매겨지는가?

검색 알고리즘은 검색 색인(index)로부터 사용자가 검색한 검색어와 가장 잘 매치되고 연관된 결과를 반환하게 하는 비법으로, 검색 엔진 순위를 결정하는 몇 가지 요인에 대해 알아보자.
(구글이 검색 엔진 순위 결정 요인을 공개한 바는 없다.)

백링크(Backlinks)
- 백링크의 양보다는 높은 질의 백링크 몇 개를 포함하는 웹 페이지가 검색 순위가 높다.
연관성(Relevance) : 사용자에게 반환된 검색 결과의 유용성.
- 기본적으로, 검색 키워드를 포함하는 웹 사이트를 찾는다.
- 다른 사용자가 해당 검색 결과를 만족했는지의 상호작용 데이터를 참조한다.
신규성(Freshness) : ex) 최근에 퍼블리싱된 것.
웹페이지의 속도 : 속도가 느린 웹 페이지에 대해 감점이 이뤄진다.
모바일 최적화 정도

🤔 그래서, 개발자들은 SEO을 위해 뭘 할 수 있는가?

SEO 전략 3가지

1. 온 페이지(On-Page) SEO : 웹 사이트 콘텐츠 구성 요소 개선
2. 테크니컬(Technical) SEO : 검색 엔진이 웹 사이트를 크롤링하고 색인 생성하는 과정을 개선
3. 오프 페이지(Off-Page) SEO : 웹 사이트의 외부 평판을 늘리고 개선

온 페이지(On-Page) SEO : 웹 사이트 콘텐츠 개선

1) 양질의 콘텐츠 제작

구글의 콘텐츠 품질 평가 기준은 아래 네 가지와 같다.

경험(Experience): 콘텐츠 제작자가 해당 주제에 대해 얼마나 직접적인 경험을 지니고 있는지.
전문성(Expertise): 콘텐츠 제작자가 해당 주제 관련 필요한 지식 및 기술을 지니고 있는지
권위(Authoritativeness): 콘텐츠 제작자가 해당 주제에 대해 얼마나 저명한지
신뢰성(Trust): 위 3가지 기준을 종합하여, 해당 주제에 대한 콘텐츠를 얼마나 신뢰할 수 있는지

➡️ 단순 팩트 제공보다는, 경험, 고유함, 독창성, 충분한 가치라는 키워드에 집중하여 콘텐츠를 제작하자.

2) 타이틀 태그

타이틀 태그는 웹 페이지의 제목을 나타낸다.

브라우저의 탭, 검색 결과에 표시되는 타이틀로 사용되며, 검색 엔진은 이 태그를 통해 웹 페이지의 주제를 파악한다.

구체적, 간결, 고유한 제목을 작성한다.
- ex) 독자의 흥미를 끌 수 있도록 '숫자 사용, 질문 형태, 권위있는 사람을 인용, 이익 강조, 패러디 활용'등의 방법으로 타이틀을 정한다.

<title> 타이틀 태그 </title>

3) 메타 태그

메타 태그 통한 각 페이지의 부가적인 정보 제공

헤드 태그 내부에 위치
검색 엔진의 웹 페이지 정보 파악에 사용됨
콘텐츠 설명, 키워드, 저자, 발생 시간 등의 정보 정의함.
캐노니컬 태그(canonical tag) : 중복 콘텐츠를 구분에 사용되는 태그 (같은 페이지를 여러 url로 제공하는 경우, 검색 엔진이 중복 콘텐츠로 인식하여 SEO 점수에 부정적인 영향을 주지 않도록 방지함)

<head>
  <meta
    name="description"
    content=" "
  />
  <meta name="author" content="" />
  <meta name="keywords" content=" " />
  <meta name="robots" content="index, follow" />
  <meta
    name="canonical"
    href=" "
  />
</head>

4) OG 태그

OG(Open Graph) 태그 : SNS나 메신저에서 웹 페이지 링크가 공유될 때 나타낼 정보를 표현하는 데 사용되는 태그

슬랙, 카카오톡 등과 같은 플랫폼에서, 사용자 입력 링크가 발견되면, 플랫폼에서 링크의 정보를 직접 크롤링하여 메타 데이터 읽어온 후, 미리보기를 제공한다.
- 미리보기의 유무는 링크클릭률에 영향을 미치기 때문에 중요하다.

<meta
  property="og:title"
  content=" "
/>
<meta
  property="og:description"
  content=" "
/>
<meta
  property="og:image"
  content=" "
/>
<meta
  property="og:url"
  content=" "
/>
<meta property="og:site_name" content=" " />
<meta property="og:type" content="website" />
<meta property="article:published_time" content="2023-09-27" />
<meta property="article:modified_time" content="2023-09-28" />

5) 시맨틱 태그 사용

의미 있는 시맥틱 태그를 사용하면, 검색 엔진이 웹 페이지의 구조를 더 잘 이해할 수 있다.

제목 태그 (h1 ~ h6)
- h1 : 페이지 당 하나만 넣는다.
- 제목 태그는 숫자 순으로 순서를 지켜 사용한다.
하이퍼링크 (a)
- 크롤러가 페이지 간 연결을 확인하는 역할
- 대부분의 크롤러는 JavaScript 로직을 실행시키기 않기 때문에 JavaScript 이용 페이지는 제거한다.
- 평판을 공유하지 않기를 원하는 하이퍼링크로 연결된 웹 페이지는 rel="nofollow" 와 같은 속성을 적절히 추가한다.
크기가 잘 조절된 이미지 태그 (img)

<html>
  <body>
    <nav></nav>
    <section>
      <article></article>
    </section>
    <aside></aside>
    <footer></footer>
  </body>
</html>

테크니컬(Technical) SEO : 크롤링 ~ 색인 생성 과정 개선

1) 사이트맵과 RSS 제공

sitemap : 웹 사이트의 구조를 검색 엔진에 알려주는 파일

주로 XML 형식으로 작성되며, 웹 사이트의 모든 페이지의 URL을 포함한다.
사이트 맵을 통해 검색엔진은 사이트의 구조 파악이 용이해지고, 이로써 크롤링 시간 단축이 가능하다.
사이트맵의 경우, 정적으로 빌드된 파일을 추가하는 것이 바람직하다.

2) robots.txt 제공

웹사이트에서 크롤링을 허용 혹은 비허용할 페이지를 크롤러에게 알려주는 텍스트 파일.

크롤러가 웹 사이트 구조를 더 잘 파악할 수 있도록 도와줌.
검색엔진 크롤러의 과도한 크롤링 및 요청으로 인한 과부하 방지 : 크롤러가 웹 사이트에 접속하여 정보 수집하며 보내는 요청(request)으로 사이트가 과부화되는 것을 방지.
검색엔진 크롤러의 일일 요청 수를 뜻하는 크롤 버짓 (크롤링 예산 – Crawl budget) 낭비 방지 : 중요한 업데이트 또는 새로운 페이지가 검색엔진 결과에 반영되지 않거나 빠르게 색인되지 않는 것을 방지
검색엔진 크롤러에게 사이트맵 (sitemap.xml)의 위치를 제공하여 웹사이트의 콘텐츠가 검색엔진에게 더 잘 발견될 수 있도록 하기 위함
robots.txt 파일은 도메인 루트에서 접속 가능해야 한다.
- ex) https://도메인명/robots.txt
SEO 측면은 아니지만, 아래와 같이 브랜딩할 수 있다.

[robots.txt 작성법]

#robots.txt 예시 - 기본 형식

// [필수 기재]어떤 검색엔진 크롤러를 지정할 것인지.
// 구글: Googlebot, 네이버: Yeti, 다음: Daum, 빙: Bingbot
User-agent: *

// [선택 기재]
// 어떤 디렉토리를 제한할 것인지.
Disallow: /forbidden/

// 크롤링을 허용할 경로
Allow: (/ 부터의 상대 경로).

// 사이트맵이 위치한 경로의 전체 URL 
Sitemap: (https:// 부터 /sitemap.xml 까지의 전체 절대경로 URL).

3) 라이트하우스 점수 향상

라이트하우스 : 구글에서 제공하는 웹 사이트 성능 측정 도구.

구글은 검색 결과에 노출되는 웹 페이지의 성능을 고려하기 때문에 라이트하우스를 통한 성능 개선은 SEO에 도움이 된다.

[코어 웹 바이탈(Core Web Vitals)]
Core Web Vitals : 사용자의 경험을 측정하는 데 사용되는 스피드 메트릭스

로딩 - LCP(Largest Contentful Paint): 페이지에서 가장 큰 영역 차지하는 콘텐츠가 로드되는 데 걸리는 시간
상호작용 - FID(First Input Delay): 페이지 로드 후, 사용자가 페이지와 상호작용 가능하기까지 걸리는 시간
시각적 안정성 - CLS(Cumulative Layout Shift): 페이지 로드중 의도치 않은 레이아웃 변화가 일어나는 정도
모바일 친화적: 모바일 기기에서도 사용자 경험이 좋은지
세이프 브라우징: 피싱이나 스캠, 사기 등의 위험 요소가 없는지
HTTPS: HTTPS 프로토콜 사용
방해되는 요소 없음: 전면 광고나 대화 상자 등으로 사용자 경험이 방해되는 요소가 없는지

4) 구글 서치 콘솔 및 네이버 서치 어드바이저 등록

구글 서치 콘솔 : 구글의 검색 결과에 내 콘텐츠를 노출시킬 수 있도록 해주고 검색 결과와 관련된 통계 정보를 확인할 수 있는 서비스
네이버 서치 어드바이저 :

사이트맵(또는 RSS)를 등록하여 검색 결과에 노출시킬 수 있다.
검색 키워드, 페이지 경험 측정, 모바일 사용 편의성 등 다양한 평가를 제공한다.

5) 서버 사이드 렌더링(SSR) 도입

클라이언트 사이드 렌더링(CSR) 방식의 일반적인 SPA 개발은 SEO를 제대로 활요하기 어렵다. CSR 개발은 초기 HTML 파일이 비어있기 때문에 크롤러가 서버 접속 시 정보를 획득하기 어렵기 때문이다.

SSR 활용 시, 검색엔진이 이미 서버 쪽에서 만든 HTML을 크롤링할 수 있기 때문에 검색에 유리해진다.

오프 페이지(Off-Page) SEO : 웹 사이트의 외부 평판 개선

1) 다양한 플랫폼에서의 백링크 확보

백링크 : 다른 사이트에서 내 웹 사이트를 하이퍼링크로 연결한 것.

검색엔진은 백링크 수를 통해 웹 사이트의 평판을 판단, 이를 기반으로 검색 결과에 노출되는 순위를 결정한다.

2) 전략적인 포스트 공유

알고리즘을 잘 타는 포스트가 되려면 게시 시간, 좋아요 수, 댓글 수, 공유 수 등을 잘 관리해야 한다.
- 트래픽이 높은 요일, 시간대에 포스트를 공유하라.

참고 자료

블로그 SEO
SEO guide
구글 검색 작동 방식
시맨틱 태그
사이트맵 가이드
robots.txt
구글 라이트하우스
페이지 스피드 : 속도 개선
Technical SEO
프론트엔드와 SEO

Kongveloper

개발자