구글 검색 엔진과 SEO을 알아보자!(with. SEO 측정 방법)

1. 검색 엔진 최적화가 중요한가요?

• 검색 엔진 최적화(SEO)는 웹사이트의 노출을 높이는데 중요한 역할을 한다.
• SEO가 잘 되면, 웹사이트는 검색 엔진에서 높은 순위를 얻어 사용자가 웹 사이트를 더 쉽게 발견할 수 있다.
• 웹 사이트가 키워드에 잘 노출되면 웹 사이트에 더 많은 방문자를 유치할 수 있고, 검색 결과에서 상위 랭킹을 차지하면 사이트의 신뢰도와 명성을 향상시킬 수도 있다.
• 그렇다면, 검색 엔진은 어떻게 최적화 해야 할까?
• 이번 시간에는 구글 공식 사이트를 기반으로 구글 검색 엔진의 동작과 최적화 방식을 알아보았다!

2. 구글 검색 엔진과 SEO(검색 최적화)

1) 구글 검색 엔진은 어떻게 작동할까?

• 구글 검색 엔진은 웹 크롤러를 사용해 자동화되고 있다.
• 웹 크롤러는 정기적으로 웹을 탐색하여 색인(검색 엔진 DB)에 페이지를 추가한다.

📌 구글 검색은 크롤링, 색인 생성, 검색결과 게재 총 세 단계로 작동한다!
(단, 모든 페이지에 세 단계가 적용되는 건 아님)

• 크롤링은, 크롤러 프로그램이 웹 페이지에서 텍스트, 이미지, 동영상을 다운로드하는 단계이다.
• 색인 생성 단계는, 크롤러가 다운로드한 소스(텍스트, 이미지, 동영상)을 분석해, 색인에 정보를 저장한다.
• 마지막 검색결과 게재 단계는 사용자가 검색 했을 때 사용자의 검색어와 관련된 정보를 반환한다.

 

(1) 첫 번째, 크롤링 단계

• 구글은 크롤러 프로그램을 이용해, 새로 생성되거나 업데이트된 페이지를 찾아 페이지 목록에 추가한다.
• 그 후, 페이지의 내용을 확인하기 위해 해당 페이지를 방문('크롤링')한다.
• 만약 사이트 소유자가 크롤링을 비허용하거나 로그인을 한 상태에서만 사이트 접근을 허용한 경우 크롤링 하지 않는다.

 

(2) 두 번째, 색인 생성 단계

• 페이지가 크롤링되면, 구글은 페이지의 내용을 탐색한다.
• 이때, <title> 요소와 Alt 속성, 이미지, 동영상 등 텍스트 컨텐츠 및 콘텐츠 태그와 속성을 분석한다.
• 그리고 페이지가 다른 페이지와 중복되는지, 키워드에 해당하는 컨텐츠 그룹에서 대표할 만한 페이지인지 확안한다.
• 구글이 페이지 분석을 완료하면, 페이지에 대한 정보를 색인에 저장한다.
• 이때 색인이란 사이트 정보를 저장한 데이터베이스로, 구글은 이 색인 정보로 검색 결과를 빠르게 제공할 수 있다.
• 만약 페이지 콘텐츠 품질이 낮거나, meta 규칙에 색인 생성을 비허용한 경우, 색인 생성에 문제가 생긴다.

 

(3) 세 번째, 검색결과 게재 단계

• 사용자가 검색어를 입력하면 구글은 색인(DB)에서 일치하는 페이지를 검색한다.
• 이때, 품질이 높고, 사용자의 검색어와 관련성이 크다고 판단되는 결과를 반환한다.
• 관련성이 있는 지 여부는 사용자의 위치, 언어, 기기 정보 등을 여러 요인을 통해 판단한다.
• 그래서 사용자의 국가가 다르면 다른 결과가 나올 수 있다.

2) SEO(Search Engine Optimization, 검색 엔진 최적화)

📌 우리는 앞서, 구글 검색이 어떻게 작동하는지를 알아보았다.
그렇다면 검색 엔진에 페이지 노출을 증가시키기 위해서 어떻게 해야할까?
내 사이트의 검색 엔진을 최적화하는 여러 방법을 알아보았다.

(1) 사용자 경험 높이기(with. Core Web vitals)

• 사이트가 우수한 사용자 경험을 제공하면, SEO에 좋은 영향을 준다.
• 구글의 우수한 페이지 경험의 기준은 아래와 같다.

📌 그런데, 상단에 제시한 항목 중 Core Web Vitals은 뭐길래, 검색 엔진에 긍정적인 영향을 주는걸까?

• Core Web Vitals은 로드 성능, 상호작용, 페이지의 시각적 안정성을 기준으로 사용자 경험을 측정하는 항목이다.
• 측정항목은 총 3개로, LCP(최대 콘텐츠 렌더링 시간), FID(첫 입력 지연), CLS(레이아웃 변경횟수)가 있다.
• 구글 검색 엔진은 이 세 가지 항목이 조건에 충족되면 우수한 페이지 경험을 준다고 간주한다.
• 그럼 이 세가지 항목이 무엇인지 간단히 알아보자.

 

• LCP(링크)은 페이지 로드 시간을 기준으로 사용자 경험이 우수한지 체크한다.
• 사용자가 페이지에 접근했을 때, 가장 큰 시각 콘텐츠가 렌더링되는 데 걸리는 시간으로 측정한다.
• 가장 큰 시각 콘텐츠는 이미지 혹은 동영상 그리고 큰 블록 수준의 텍스트 요소를 가리킨다.
• 만약 콘텐츠 로드 시간이 2.5sec 내에 발생하면 좋은 사용자 경험을 준다고 간주한다.

 

• FID(링크)은 사용자가 페이지와 처음 상호작용할 때 걸리는 시간으로 사용자 경험이 우수한지 체크한다.
• 여기서 상호작용이란, 사용자가 페이지에서 링크 클릭, 버튼 탭 등의 동작을 하는 걸 말한다.
• 처음 상호 작용 시간은 100ms내에 발생하면 좋은 사용자 경험을 준다고 볼 수 있다.

 

• CLS(링크)은 페이지에서 요소의 위치가 예상치 못하게 움직이는 횟수를 기준으로, 사용자 경험을 체크한다.
• 아래 gif는 구글 공식 사이트에서 제공하는 자료로, 레이아웃의 예상치 못한 이동이 사용자에게 어떤 부정적인 영향을 주는지 보여준다.

 

• 영상처럼, 사용자가 예측치 못한 방향으로 레이아웃이 이동한다면 나쁜 사용자 경험을 제공하게 된다.
• 이외에도 레이아웃 이동으로 인해 나쁜 사용자 경험을 제공하는 경우가 있다.
  • 크기가 지정되지 않은 이미지가 웹페이지에 로드되어 주변 콘텐츠를 밀어내는 경우
  • 페이지 로드 중에 광고나 비디오가 갑자기 나타나서 주변 콘텐츠를 밀어내는 경우
  • 사용자가 페이지를 조회 중일 때 콘텐츠가 동적으로 추가되어 기존 페이지 콘텐츠를 밀어내는 경우

 

(2) 이미지 최적화하기

• 구글에서는 텍스트는 물론 이미지 기반의 검색도 지원한다.
• 그렇기 때문에 이미지를 관리할 때는 여러가지 원칙에 따라 설정해야, 검색 최적화가 된다.
• 첫 번째 원칙은, 이미지를 CSS 스타일이 아닌 HTML Img 태그로 설정해야한다는 점이다.
• 크롤러는 HTML Img 태그로 이미지를 탐색하므로 CSS로 이미지를 등록하면 색인 생성이 안된다.

<!-- 나쁜 예시 ❌ -->
<div style="background-image:url(cat.jpg)">먼치킨 고양이</div>

<!-- 좋은 예시 ⭕️ -->
<img src="cat.jpg" alt="먼치킨 고양이" />

 

• 두 번째, 선명한 이미지를 제공하되 이미지 로드 속도를 최적화해야 한다.
• 사용자가 검색했을 때, 이미지가 선명하면 사용자의 트래픽을 유도할 가능성이 높아진다.
• 그래서 이미지를 선명하게 유지하는 게 중요한데, 단 이미지 로드 시간이 길면 페이지 로드 시간에도 영향을 주기에 좋은 사용자 경험을 줄 수 없다.
• 선명한 이미지를 빠르게 로드하고 싶다면, 이미지 압축률을 높이거나 페이지 크기에 따라 이미지 크기를 다르게 제공하는 방법 등이 있다.
• 만약 본인의 사이트 속도를 알고 싶다면, PageSpeed Insights에 사이트 주소를 입력해서 확인해보자.

 

• 세 번째, 주제에 맞는 이미지 파일명, alt속성값을 작성해야 한다.
• 구글은 페이지 콘텐츠에서 이미지 주제를 추출한다. 그러므로 이미지를 관련 텍스트 근처에 배치하고, 파일명에 키워드를 포함해야한다.
• 또한 구글은 대체 텍스트로 이미지 주제를 파악한다. 이미지의 alt 속성으로 대체 텍스트를 작성하자!
• 단 대체 텍스트 작성시에는 무의미한 키워드 나열은 지양해야한다.

<!-- 나쁜 예시 ❌ -->
<img src="cat.jpg"/>
<img src="cat.jpg" 
    alt="고양이 먼치킨 고양이 치즈냥 검은냥 츄르 까칠함 티파니 뱅갈 엘프"
/>

<!-- 좋은 예시 ⭕️ -->
<img src="cat.jpg" alt="고양이"/>
<img src="cat.jpg" alt="털공을 입에 물고 있는 새끼 검은 고양이"/>

 

(3) Title 태그 작성에 주의하자

• 타이틀 태그는 사이트의 첫인상이며, 검색 결과 페이지, 웹 브라우저, 소셜 네트워크에서 중요한 역할을 한다.
• 또한 타이틀 태그는 검색 결과 순서에도 영향을 주므로, 타이틀을 잘 작성하는 것도 중요하다.
• 우선 타이틀은, 구체적이고 간결한 텍스트를 작성해야한다.
• 물론 타이틀은 길이 제한이 없지만, 기기 너비에 따라 타이틀이 짤릴 수 있기에 간결한 제목이 중요하다.

<!-- 나쁜 예시 ❌ : 제목이 길면 기기 너비에 따라 제목이 짤림; -->
<title>HTML 문서의 제목을 알려준 뿐만 아니라 SEO에도 도움이 되는 HTML 태그는 header 태그입니다</title>

<!-- 좋은 예시 ⭕️ -->
<title>문서의 제목을 알려주는 Header 태그</title>

 

• 그 다음으로, 타이틀에 구체적인 용어를 쓰되 같은 단어를 반복하면 안된다.
• 구글은 반복되는 키워드를 스팸으로 취급하기에 제목 텍스트에 반복 키워드는 지양해야한다.

<!-- 나쁜 예시 ❌ -->
<title>헤더, Header, 머릿말, 해더, head, 제목, 머리</title>

<!-- 좋은 예시 ⭕️ -->
<title>문서의 제목을 알려주는 Header 태그</title>

 

(4) SSR (서버 사이드 렌더링) 사용하기

• 구글 봇은 페이지가 크롤링 및 렌더링되기 전까지 대기했다가 크롤링이 가능하면 페이지를 탐색한다.
• 만약 페이지 렌더링 시간이 길어지면 페이지를 탐색할 때 제한을 받을 수 있다. 그렇기에 페이지의 빠른 로딩시간이 중요하다.
• SSR은 웹 페이지를 서버에서 미리 렌더링되어 사용자에게 전달되는 방식이다.
• SSR을 사용하면 웹 페이지의 초기 로딩 시간을 단축시켜, 전체 페이지 콘텐츠를 빠르게 보여줄 수 있다는 장점이 있다.
• 구글 검색 엔진은 페이지의 로딩 시간이 빠를수록 사용자 경험이 좋다고 판단한다.
• 그래서 빠른 로딩 시간을 지원하는 SSR은 SEO에 유리하다.
• 또한 SSR은 서버에서 페이지를 렌더링하여 클라이언트에 전송하기에, 크롤러가 인덱싱할 수 있는 완전한 HTML 형태를 제공하는 장점이 있다.
• SSR을 제공하는 대표적인 프레임워크로는 React의 Next.js, Vue의 Nuxt.js가 있다.

 

(5) 용도에 맞는 태그 사용하기

• HTML 태그는 웹 페이지의 구조와 콘텐츠의 명확성을 높여준다.
• 이러한 태그들은 검색 엔진이 페이지의 콘텐츠를 이해하고 색인화하는 데 도움을 준다.

태그 종류	설명
p 태그	- 문단을 나타내며, 웹 페이지의 주요 텍스트 콘텐츠를 구성함 - 검색 엔진은 이 태그로 페이지의 주요 내용을 파악하고, 관련 키워드 및 문맥을 분석
해딩 태그 (h1, h2, h3, ..., h6)	- 페이지의 제목과 부제목을 나타냄 - h1 태그는 가장 중요한 제목이며, 페이지당 하나만 사용하는 것이 좋음 - 하위 해딩 태그들은 페이지의 내용을 구조화하고, 하위 주제를 나타냄
a 태그	- 하이퍼링크를 생성함 - 내부 링크 (사이트 내 페이지 간 연결)와 외부 링크 (다른 사이트로의 연결) 모두 SEO에 영향을 미침
시맨틱 태그(header, nav, …)	- 시맨틱 태그는 콘텐츠의 의미를 나타내는 태그 - 검색 엔진은 이 태그를 통해 페이지의 구조와 콘텐츠의 상대적 중요도를 이해함
strong과 em 태그	- strong은 중요한 내용을 강조 - em은 텍스트를 강조 - 검색 엔진은 이 태그를 통해 특정 텍스트의 중요성을 파악함

 

(6) Robots.txt로 색인 방지하지 말 것!

• robots.txt 파일은 웹사이트의 루트 디렉토리에 위치하는 텍스트 파일로,
• 검색 엔진이 사이트의 어떤 부분을 크롤링하거나 혹은 인덱싱하면 안 되는지를 지정할 수 있다.
• 이 파일은 "User-agent" 지시어로 검색 엔진 봇에게 경로 접근을 허용하거나 차단하는 규칙을 설정한다.
• 이처럼 robots.txt은 검색엔진에 중요한 역할을 하므로 색인 생성을 방지하는 설정이 없는지 주의해야한다.

3) SEO 측정하는 법!

📌 SEO를 최적화하는 6가지에 대해 알아보았다. 그럼, 내가 만든 사이트가 SEO가 잘 됐는지 어떻게 확인할 수 있을까? 바로 크롬에서 Lighthouse를 쓰는 것이다!

• 먼저, 크롬에서 터미널을 연다.
• 그리고 Lighthouse에서 검색엔진 최적화(SEO) 을 선택하고 페이지 로드 분석을 실시한다.

 

• 그러면 해당 페이지에 대한 SEO 점수를 알려준다.
• 내가 분석했던 페이지는 SEO 점수가 75점이었는데, 왜 점수가 낮는지 [콘텐츠 권장사항]에서 확인할 수 있다.

 

• [통과한 검사] 목록에서는 어떤 점이 SEO 점수에 긍정적인 영향을 줬는지 알려준다.
• 이처럼 우리는 Lighthouse 페이지 분석으로 SEO에 영향을 주는 항목을 확인하고 개선할 수 있다.

3. 마치며…

이번 시간에는 구글 검색 엔진의 동작과 함께 검색 엔진 최적화(SEO)를 알아보았다.

검색 엔진 최적화(SEO)를 하기 위해서는 여러가지 방법이 있는데, 사이트의 타이틀 태그를 구체적이고 간결하게 작성하고, 서버 사이드 렌더링(SSR)을 사용해 페이지의 초기 로딩 시간을 단축하고, 용도에 맞는 HTML 태그를 사용하여 페이지의 구조와 콘텐츠의 명확성을 높여야 했다. 또한 robots.txt 파일에서 색인 생성을 막는 설정이 없는지 주의해야 했다.

만약 사이트의 SEO 성능은 알고 싶다면, 크롬의 Lighthouse를 사용하여 측정할 수 있는데, [콘텐츠 권장사항]를 통해 SEO를 향상시킬 수 있다.