SEO(1) - SEO는 무엇이고 왜 중요한가
📌시작하며
Next.js를 학습하고, 목표했던 프로젝트 제작이 전체적으로 마무리되었다. 이제 Meta Data와 Open graph등을 적용하는 단계가 남았다. 이런 과정은 모두 더 나은 SEO를 위해서인데, 이번 포스팅 시리즈(?) 에서는 SEO와 프론트엔드에서 SEO를 위해 어떤 것을 사용할 수 있는지 학습한 내용을 정리하고자 한다.
이 글은 아래와 같이 이어집니다.
✅SEO와의 만남
사실 SEO는 개발을 시작하고 처음 들었던 단어가 아니라, 마케터 인턴으로 일했던 시절에 처음으로 접한 단어였다. 업무를 전달 받으면서, SEO 중요성에 대해 말씀하셨던 기억이 있는데, 프론트엔드에서 또 이 단어를 만나게 될 줄은 몰랐었다. 😄
✅SEO란?
SEO는 검색 엔진 최적화 (Search engine optimization)를 말한다. 위에서 언급한 것 처럼 SEO는 현대 사회 대부분의 비즈니스에서 중요한 역할을 하게 된다.
인터넷은 흔히 정보의 바다🌊라고도 한다. 단순히 기본 티셔츠를 구매하고자 ‘흰 티셔츠’를 검색하더라도, 엄청난 양의 정보를 접하게 된다.
이때 사용자가 1페이지에서 보이는 흰 티셔츠를 클릭할 확률이 높을까, 1000000 페이지의 티셔츠를 클릭할 확률이 높을까? 단순히 생각해보았을 때, 조건이 맞는다면 앞 페이지에 노출되는 상품을 구매할 확률이 높을 것이다.
이렇게 사용자(소비자)에게 자사 제품, 서비스, 페이지 등의 가시성을 높이기 위한 것이 바로 SEO인 것이다.
✅SEO의 종류
SEO의 종류는 3가지가 존재한다. 이 세가지 중에서 off-site는 개발자가 통제하기 어려운 부분이다.
| SEO 종류 | 설명 |
|---|---|
| Technical SEO | 웹사이트의 기술적 측면을 최적화 |
| On-site SEO | 사용자와 검색엔진에 맞게 웹사이트 콘텐츠를 최적화 |
| Off-site SEO | 브랜드 자산을 만들어 브랜드 인지도를 높여, 궁극적으로 수요 창출을 목표로하는 작업 |
✅Technical SEO
Technical SEO는 웹사이트의 기술적 측면을 최적화 하는 것으로, 검색 엔진이 크롤링하고 색인을 생성할 수 있는 웹사이트를 만들기 위해 최적화 하는 것을 말한다.
✅On-site SEO
On-site SEO (ON-page SEO)는 검색엔진과 사용자를 위해 웹사이트 내부 요소를 최적화 하는 것을 말한다.
설명만 봐도 프론트엔드에서 해야 할 전략들이 있음이 떠오른다.👀
➡️대표적인 On-site SEO 개선 방안
<head>내의<title>/<meta>태그 설정<title>: 페이지의 제목에 주요 키워드를 포함해 검색 엔진이 콘텐츠 주제를 파악 하도록 한다.<meta>: 페이지에 대한 설명에 키워드를 포함해 사용자 클릭률을 높인다. 여기에 오픈 그래프, 트위터 카드 등이 포함된다.
콘텐츠 최적화:
- 키워드 사용: 콘텐츠 내에서 주요한 키워드를 사용해 검색 엔진이 콘텐츠의 주제를 파악할 수 있도록 한다.
<h1> ~ <h6>: 제목, 부제목에는heading Tag를 사용해 페이지 구조를 명확하게 만든다.
웹사이트 구조 최적화:
- URL 구조: 의미 있는 URL을 사용해 검색 엔진 과 사용자가 페이지 주제를 이해하기 쉽도록 한다.
<a>: 페이지 간의 내부 링크를 설정해 다양한 페이지들의 연결성을 높여 사용자가 웹 사이트를 쉽게 탐색할 수 있도록 하며, 검색엔진이 웹사이트를 크롤링하고 색인화 할 수 있도록 한다.
이미지 최적화
- 적절한 이미지 포맷 사용: 이미지 파일을 압축하고 적절한 크기로 조정하여 웹페이지의 로딩 속도를 향상시킨다.
- 이미지 태그 (Alt Tags): 이미지에 적절한 설명을 제공하고 키워드를 포함해 검색엔진이 이미지를 이해하기 쉽도록 한다. 설명을 제공하고 키워드를 포함하여 검색 엔진이 이미지를 이해하고 색인화할 수 있도록 한다.
- 속도 최적화
- 브라우저 캐싱: 정적 리소스를 브라우저 캐시에 저장하여 사용자가 웹페이지를 다시 방문할 때 로딩 시간을 단축한다.
✅Google의 검색 작동 방식
브라우저마다 검색엔진이 작동하는 방식이 다르지만, Google의 검색 작동 방식을 이해하면 SEO를 위해 어떤 것이 중요한지 더 잘 이해할 수 있을 것 같아 관련 내용을 찾아보았다.
➡️ 1. 크롤링
Google은 크롤러라는 자동화된 프로그램을 사용하여 인터넷에서 찾은 페이지로부터 텍스트, 이미지, 동영상을 다운로드한다. 크롤링 하는 동안 최신 Chrome 버전을 사용해 페이지를 렌더링하고, JS를 실행시킨다.
만약, 사이트를 처리하는 서버에 문제가 발생할 경우 크롤링 속도가 저하되어 Googlebot이 사이트를 호스팅 하는 서버에 도달할 수 없어, 크롤링 하는 URL 색인을 생성할 수 없으므로 이미 색인이 생성되었으나 도달할 수 없는 URL은 며칠 내로 Google 색인에서 삭제되어 궁극적으로 SEO에 부정적인 영향을 미치게 된다.
➡️ 2. 색인 생성
페이지가 크롤링되면 Google은 페이지의 내용을 파악하려고 하는데, 이 과정을 색인 생성 이라고 한다. ‘색인 생성’ 작업에서는 <title> 요소 및 Alt 속성, 이미지, 동영상 등 텍스트 콘텐츠 및 핵심 콘텐츠 태그와 속성을 처리하고 분석하는 작업이 포함된다.
➡️ 3. 검색결과 게재
사용자가 검색어를 입력하면 색인에서 일치하는 페이지를 검색하여 사용자의 검색어와 가장 관련성이 높고 품질이 높다고 판단되는 결과를 반환한다. 이때의 관련성은 사용자의 위치, 언어, 디바이스(데스크톱 또는 휴대폰) 등의 정보를 포함한 수백 가지 요소에 의해 결정된다.