y.developer
[TIL] Day 37 SPA에서 SEO(검색엔진최적화) 최적화 전략 본문
2023.11.24 금
SPA(Single Page Application)는 전통적인 다중 페이지 웹 애플리케이션과는 다르게,
페이지 전환이 일어나면서 전체 페이지를 새로고침하지 않고 동적으로 업데이트된다.
이러한 특성 때문에 SPA는 일부 검색 엔진에 대한 최적화에 어려움을 겪는다.
그래서 SEO(Search Engine Optimization)를 위해서는 몇 가지 고려해야 할 사항이 있다.
SPA에서 SEO를 최적화하기 위한 몇 가지 전략을 알아보자.
1. 서버 사이드 렌더링(SSR) 도입
SPA는 클라이언트 측에서 JavaScript를 사용하여 페이지를 동적으로 렌더링하므로, 검색 엔진이 페이지 콘텐츠를 수집하는 데 어려움이 있다.
따라서 서버 사이드 렌더링(SSR)을 도입하여 초기 페이지 로딩 시 서버에서 HTML을 렌더링하고 클라이언트에 전달함으로써 SEO를 향상시킬 수 있다.
서버 사이드 렌더링(SSR)
SSR은 클라이언트와 서버 간에 웹 페이지를 렌더링하는 방식 중 하나이다.
기존의 SPA(Single Page Application)는 클라이언트 측에서 JavaScript를 사용하여 동적으로 페이지를 생성하므로 검색 엔진이 페이지 콘텐츠를 인덱싱하기 어렵게 만들 수 있다.
SSR은 이러한 문제를 극복하기 위해 서버에서 웹 페이지의 초기 렌더링을 담당하는 방식이다.
SSR을 사용하면 서버는 요청된 페이지의 HTML을 미리 렌더링하여 클라이언트에게 전송한다.
이렇게 하면 검색 엔진이 페이지의 콘텐츠를 더 쉽게 수집하고 이해할 수 있게 된다.
SSR의 주요 특징
1. 검색 엔진 최적화
SSR은 검색 엔진 최적화에 유리하다.
검색 엔진은 정적인 HTML 콘텐츠를 수집하고 색인화하기 쉽게 한다.
2. 초기 로딩 성능 개선
사용자가 페이지에 접근할 때 서버에서 이미 렌더링된 HTML을 받아오기 때문에 초기 로딩 속도가 빨라진다.
3. 소셜 미디어 쉐어링
SSR을 사용하면 소셜 미디어에서 페이지를 미리 렌더링된 형태로 공유할 수 있다.
SSR은 전통적인 방식으로 서버에서 HTML을 생성하기 때문에 초기 로딩 속도가 빠르고 SEO에 유리하지만,
SPA에 비해 더 많은 서버 자원이 필요하고 구현이 복잡할 수 있다.
개발자는 웹 애플리케이션의 특정 요구 사항에 따라 SSR 또는 SPA를 선택할 수 있어야 한다.
2. 사이트맵 제공
검색 엔진은 사이트맵을 통해 웹 사이트의 페이지 구조를 이해하고 크롤링한다.
SPA에서는 명시적으로 사이트맵을 제공하여 검색 엔진이 모든 페이지에 쉽게 액세스할 수 있도록 해야 한다.
크롤링
크롤링은 웹 크롤러 또는 스파이더라고 불리는 프로그램을 사용하여 웹 사이트를 자동으로 탐색하고 정보를 수집하는 프로세스를 의미한다.
크롤링은 주로 검색 엔진이 웹 페이지를 색인하고 검색 결과를 생성하는 데 사용된다.
크롤러는 일련의 웹 페이지를 순회하며 각 페이지의 내용을 수집하고 분석한다.
이를 통해 웹 크롤러는 웹 사이트의 구조를 이해하고 새로운 페이지를 발견할 수 있다.
크롤러는 하이퍼링크를 따라가거나 웹 페이지의 내용을 해석하여 새로운 URL을 추출한다.
크롤링의 주요 목적
1. 검색 엔진 색인화
검색 엔진은 크롤러를 사용하여 웹 페이지를 색인화하고 검색 결과를 생성한다.
이를 통해 사용자가 검색할 때 더 빠르고 정확한 결과를 제공할 수 있다.
2. 데이터 수집
크롤러를 사용하여 특정 웹 사이트나 특정 주제에 관련된 데이터를 수집할 수 있다.
예를 들어, 가격 비교 사이트는 여러 웹 사이트의 제품 가격 정보를 수집한다.
3. 웹 사이트 변경 감지
일부 크롤러는 특정 웹 사이트의 변경 사항을 주기적으로 모니터링하여 업데이트된 정보를 수집한다.
크롤러는 웹 사이트의 robots.txt 파일에 명시된 규칙을 따라야 하며, 웹 사이트의 소유자 또는 운영자의 정책을 준수해야 한다.
일부 웹 사이트는 크롤러의 접근을 제한하거나 특정 규칙을 설정하여 자체적인 정책을 시행하기도 한다.
3. 메타 태그 활용
각 페이지에는 적절한 메타 태그를 활용하여 페이지 제목, 설명, 키워드 등을 명시적으로 정의해야 한다.
이를 통해 검색 결과에 표시되는 정보를 개선할 수 있다.
메타 태그
메타 태그는 HTML 문서의 <head> 섹션에 위치한 태그로, 웹 페이지의 메타데이터를 정의하는데 사용된다.
이 메타데이터는 브라우저나 검색 엔진 등이 웹 페이지를 더 잘 이해하고 처리할 수 있도록 도와준다.
메타 태그는 사용자에게는 보이지 않지만, 웹 페이지의 정보를 기술하고 브라우저에게 지시를 전달하는 중요한 역할을 한다.
메타 태그 예시
1. <meta charset="UTF-8">
문서의 문자 인코딩을 지정한다. 대부분의 경우, UTF-8이 사용되며 다국어 지원을 위한 권장 문자 인코딩이다.
2. <meta name="viewport" content="width=device-width, initial-scale=1.0">
모바일 장치에서의 뷰포트 설정을 지정한다. 이를 통해 모바일 기기에서 레이아웃이 적절하게 조정된다.
3. <meta name="description" content="웹 페이지의 간단한 설명">
검색 결과 페이지에서 웹 페이지에 대한 간단한 설명을 제공한다. 검색 엔진은 이 설명을 활용하여 사용자에게 적절한 검색 결과를 제시한다.
4. <meta name="keywords" content="키워드1, 키워드2, ...">
웹 페이지의 키워드를 지정한다. 이전에는 검색 엔진이 이를 사용했지만, 현재는 큰 영향을 미치지 않는다.
5. <meta name="author" content="작성자 이름">
웹 페이지의 작성자를 지정한다.
6. <meta name="robots" content="index, follow">
검색 엔진 크롤러에 대한 지침을 설정한다. "index"는 페이지를 색인화하라는 의미이고, "follow"는 해당 페이지의 하이퍼링크를 따라가라는 의미이다.
7. <meta http-equiv="refresh" content="5;url=http://example.com">
일정 시간 간격 후에 지정된 URL로 자동으로 리디렉션되도록 설정한다.
이러한 메타 태그들은 웹 페이지의 성능, 검색 엔진 최적화(SEO), 소셜 미디어 공유 등 다양한 측면에서 중요한 역할을 한다.
4. 프리렌더링(Prerendering)
특정 페이지나 컨텐츠는 미리 렌더링하여 정적 HTML 파일로 제공하는 방식을 고려할 수 있다.
이는 검색 엔진이 콘텐츠를 쉽게 인덱싱하고 이해할 수 있도록 도움을 줄 수 있다.
인덱싱
색인(indexing)은 데이터베이스나 검색 엔진과 같은 시스템에서 데이터를 효율적으로 검색하고 접근하기 위해 사용되는 기술이다.
쉽게 말해, 색인은 데이터에 대한 일종의 목차 또는 색인을 만들어 검색 작업을 가속화한다.
예를 들어, 책에서 특정 단어가 나왔는지 찾으려면 전체 책을 처음부터 끝까지 읽어야 한다.
하지만 색인이 있다면 책의 특정 단어가 나온 페이지 번호를 빠르게 찾아낼 수 있다.
이렇게 색인을 통해 데이터에 대한 빠른 검색이 가능해지는 것이다.
데이터베이스에서도 비슷한 원리가 적용된다.
색인은 데이터의 일부를 정리하고 정렬하여, 특정 조건에 맞는 데이터를 빠르게 찾을 수 있도록 도와준다.
이는 데이터베이스의 성능을 향상시키고 사용자가 원하는 정보에 더 빠르게 접근할 수 있도록 도와주는 중요한 기술이다.
5. 로딩 성능 개선
빠른 페이지 로딩 속도는 검색 엔진이 선호하는 요소 중 하나이다.
이미지 최적화, 코드 번들링, 브라우저 캐싱 등을 통해 로딩 성능을 개선시켜 사용자 경험과 SEO를 향상시킬 수 있다.
코드 번들링(Code Bundling)
여러 개의 파일로 나누어져 있는 코드들을 하나로 합치는 과정을 말한다.
이렇게 하면 웹 페이지가 로딩될 때 여러 번의 서버 요청을 하지 않고, 한 번에 필요한 모든 코드를 받아올 수 있다.
이는 웹 페이지의 성능을 향상시키고, 빠른 로딩을 가능하게 한다.
브라우저 캐싱(Browser Caching)
이미 다운로드한 파일을 재사용하는 기술이다.
한 번 다운로드한 파일은 브라우저에 저장되어, 동일한 자원이 필요할 때 매번 서버에서 새로 받아올 필요 없이 저장된 자원을 사용할 수 있다.
이는 불필요한 네트워크 요청을 줄여서 웹 페이지의 로딩 시간을 단축하는 데 도움을 준다.
6. 링크 구조 최적화
SPA에서는 라우팅이 클라이언트 측에서 처리되기 때문에 링크의 구조를 최적화해야 한다.
검색 엔진이 이해하기 쉬운 URL 구조를 사용하고, 페이지 간의 내부 링크를 적절하게 설정해야 한다.
라우팅
네트워크나 웹 애플리케이션에서 사용되는 중요한 개념 중 하나다.
라우팅은 어떤 지점에서 다른 지점으로 이동하는 경로를 결정하는 과정을 나타낸다.
특히 웹 개발에서는 웹 페이지 간의 이동을 다루는 것으로 이해할 수 있다.
1. 웹 페이지 라우팅
라우팅은 주로 웹 애플리케이션에서 여러 페이지 간의 이동을 관리하는 데 사용된다.
예를 들어, 사용자가 웹 애플리케이션에서 특정 링크를 클릭하면 해당 페이지로 이동하는데, 이때 라우팅이 사용된다.
2. URL 경로
라우팅은 URL의 경로를 기반으로 이동 경로를 결정한다.
사용자가 웹 페이지로 이동하거나 특정 기능을 수행할 때 URL이 변경되고, 이에 따라 특정 컴포넌트나 페이지가 렌더링된다.
3. SPA (Single Page Application)
현대의 웹 애플리케이션은 SPA로 구현되는 경우가 많다.
SPA에서는 페이지가 새로고침되지 않고 동적으로 업데이트되므로, 라우팅이 중요한 역할을 한다.
사용자가 다른 섹션으로 이동할 때마다 적절한 컴포넌트가 렌더링되어 화면이 업데이트된다.
4. 라우팅 라이브러리
대부분의 프론트엔드 프레임워크와 라이브러리에서는 라우팅을 관리하기 위한 도구나 라이브러리를 제공한다.
React에서는 React Router, Vue에서는 Vue Router 등이 있다.
5. 상태 유지
라우팅은 사용자가 페이지 간에 이동하더라도 현재 애플리케이션의 상태를 유지하는 데 도움이 된다.
예를 들어, 사용자가 특정 폼을 작성 중이던 상태에서 다른 페이지로 이동한 후에도 이전 상태를 유지할 수 있다.
웹 개발에서 라우팅은 사용자 경험을 향상시키고, 애플리케이션을 보다 동적이고 유연하게 만드는 데 중요한 역할을 한다.
하루를 마치며
이러한 기술적인 접근 방법 외에도, 고품질의 콘텐츠를 제공하고 소셜 미디어를 적극 활용하는 등의 기초적인 SEO 전략을 따르는 것이 중요할 것이다.
SPA에서도 SEO를 고려하면서 웹 사이트를 구축하고 운영하면 검색 엔진에서 더 잘 찾아지고 노출될 수 있게 만들 수 있다!
오늘의 한 줄
내 블로그도 SEO를 고려하자