제가 진행하고 있는 개발자 퀴즈 프로젝트에 대하여 SEO 최적화를 진행해보려합니다.
- 첫번째 글에서는 SEO 개념,가이드라인,필요한 요소들을 정리해보고
- 두번째 글에서는 저의 프로젝트의 적용 후기를 정리해보려합니다.
SEO란?
검색엔진 최적화(SEO)란 관련성이 높은 트래픽을 더 많이 유도하기 위해 검색엔진에서의 웹사이트 페이지 검색 가능성을 향상시키는 프로세스입니다.
검색엔진 최적화는 검색엔진에서 더 찾기 쉽도록 사이트를 개선하는 프로세스입니다.
SEO 적용 이유
프로젝트에 SEO를 적용해야겠다는 생각이 든 이유는 여러 퀴즈 페이지가 구글 검색 엔진에 노출되게 하고 싶어서입니다.
퀴즈 페이지에서는 여러가지 프론트엔드 개념들을 각각의 퀴즈 페이지에서 담을 예정인데요. 각 퀴즈 페이지에서는 자바스크립트-클로저,리액트-virtual DOM 등 관련 개념들을 담고 있습니다.
저는 유저들이 구글에 위와 같은 프론트엔드 개념을 검색했을 때, 그에 알맞은 퀴즈 페이지가 노출되게 하고 싶어요.
다음과 같이 자바스크립트 클로저 퀴즈라고 검색했을 때, 저의 퀴즈 페이지가 나오게 하고 싶은거죠.
그래서 프로젝트에 SEO 최적화 작업을 진행해보려합니다.
그에 앞서 먼저 SEO 관련 개념,가이드 라인, 필요한 요소들을 알아보겠습니다.
구글 검색 센터 문서를 기준으로 필요한 요소들을 작성해보았습니다.
SEO 관련 개념
크롤링(Crawling)
크롤링이란 새로운 웹페이지나 업데이트된 웹페이지를 찾는 과정입니다.
'크롤러'라는 자동 프로그램으로 찾아서 웹페이지를 검색할 수 있도록 한다고 해요.
크롤링 과정
URL 탐색
Google은 계속해서 새 페이지와 업데이트된 페이지를 검색하여 파악된 페이지 목록에 추가합니다. 이 과정을 'URL 탐색'이라고 합니다. Google이 방문한 적이 있는 페이지는 파악된 페이지 목록에 추가되어 있습니다.
다른 페이지는 파악된 페이지에서 새 페이지로 연결되는 링크를 따라갈 때 발견됩니다.
새로운 페이지는 대게 Google이 URL을 따라가서 발견합니다. 특정 페이지의 링크를 따라 링크에 대한 페이지로 이동하여 크롤링합니다.
크롤러
Google에서 페이지의 URL을 발견하면 내용을 확인하기 위해 페이지를 방문(또는 '크롤링')할 수 있습니다. Google은 막대한 수의 컴퓨터를 사용하여 웹에 있는 페이지 수십억 개를 크롤링합니다. 이때 웹페이지를 가져오는 프로그램을 Googlebot(또는 크롤러, 로봇, 봇, 스파이더)이라고 합니다. GoogleBot은 사람이 아닌 봇이 제어하는 브라우저라고 생각하면 됩니다.
Google Bot이 발견하는 모든 URL은 크롤링하지는 않습니다. 공개적으로 엑세스할 수 있는 URL만 크롤링하는데요. 예를 들어, 로그인을 해야 접근가능한 페이지는 크롤링하지 않습니다.
Download and Fetching URL
크롤러는 탐색한 URL을 통해 Html,Css,Javascript를 다운로드하여 페이지를 가져옵니다. 그리고 Google Bot은 해당 파일들을 통해 시각적으로 표현하며 렌더링합니다. 이 과정에서 최신 chrome 버전을 사용해서 발견한 Javascript를 실행합니다.
Google Bot은 렌더링 기능을 가지고 있다고 합니다.
Googlebot이 크롤링한 페이지를 렌더링하기 위해 Chrome 기반의 렌더링 엔진을 사용한다고 하네요.
Google Bot의 렌더링 과정이 중요한 이유는 웹사이트에서 Javascript를 페이지 콘텐츠를 가져와 동적으로 표현하는 경우가 많기 때문입니다. 예를 들어,최근에는 SPA 애플리케이션,React,Vue 등을 이용하는 경우가 많은데요. 이 라이브러리들을 사용하여 애플리케이션을 만들면 페이지의 모든 컨텐츠들을 자바스크립트로 만듭니다. 때문에 크롤러의 자바스크립트 실행여부가 중요한 것이죠.
색인 생성
페이지가 크롤링되면 Google은 페이지의 내용을 파악하려고 합니다. 이 단계를 색인 생성이라고 하며 <title> 요소 및 Alt 속성, 이미지, 동영상 등 텍스트 콘텐츠 및 핵심 콘텐츠 태그와 속성을 처리하고 분석하는 작업이 포함됩니다.
색인 생성 프로세스 중에 Google에서는 페이지가 인터넷에 있는 다른 페이지와 중복되는지 아니면 표준 페이지인지 판단합니다. 표준 페이지는 검색결과에 표시될 수 있는 페이지입니다. 표준 페이지를 정하기 위해 Google은 먼저 인터넷에서 찾은 비슷한 콘텐츠의 페이지를 그룹으로 묶은 다음(클러스터링이라고도 함)한 다음 이 그룹을 가장 잘 대표하는 페이지를 선택합니다.
GoogleBot
Google에서 페이지의 URL을 발견하면 내용을 확인하기 위해 페이지를 방문(또는 '크롤링')할 수 있습니다. Google은 막대한 수의 컴퓨터를 사용하여 웹에 있는 페이지 수십억 개를 크롤링합니다. 이때 웹페이지를 가져오는 프로그램을 Googlebot(또는 크롤러, 로봇, 봇, 스파이더)이라고 합니다.
Googlebot은 다음 두 가지 유형의 웹 크롤러가 있습니다.
- Googlebot 데스크톱: 데스크톱 사용자를 시뮬레이션하는 데스크톱 크롤러입니다.
- Googlebot 스마트폰: 휴대기기 사용자를 시뮬레이션하는 모바일 크롤러입니다.
요청의 사용자 에이전트 문자열을 통해 Googlebot의 하위유형을 식별할 수 있습니다. 하지만 두 크롤러 유형 모두 robots.txt의 동일한 제품 토큰(사용자 에이전트 토큰)을 준수하므로 robots.txt를 사용하여 Googlebot 스마트폰 또는 Googlebot 데스크톱을 선택적으로 타겟팅할 수는 없습니다.
대부분의 사이트에서 Google은 주로 모바일 버전 콘텐츠의 색인을 생성합니다. 따라서 대부분의 Googlebot 크롤링 요청에 모바일 크롤러가 사용되며 그 외 소수의 요청에 데스크톱 크롤러가 사용됩니다.
대부분의 사이트는 Googlebot에서 평균적으로 몇 초에 한 번 정도만 액세스합니다. 하지만 지연으로 인해 단기적으로 빈도가 약간 높아질 수도 있습니다.
AMP
Google 검색은 빠르고 안정적인 웹 환경을 제공하기 위해 AMP 페이지의 색인을 생성합니다. AMP 페이지가 있는 경우 리치 결과와 캐러셀의 일부로 모바일 검색에 표시될 수 있습니다. AMP 자체는 순위 지정 요소가 아니지만 Google 검색에서 속도는 순위 지정 요소입니다.
SEO 가이드라인
Google에 URL 재크롤링 요청하기
최근 사이트에서 페이지를 추가하거나 변경한 경우 다음 방법 중 하나를 사용하여 Google에 페이지의 색인을 다시 생성하도록 요청할 수 있습니다.
크롤링은 며칠에서 몇 주까지 걸릴 수 있습니다. 크롤링이 완료될 때까지 기다리는 동안 색인 상태 보고서 또는 URL 검사 도구를 사용하여 진행 상황을 모니터링하세요.
URL 검사 도구 사용(소수의 URL을 제출하는 경우)
개별 URL 크롤링을 요청하려면 URL 검사 도구를 사용하세요. URL 검사 도구에서 색인 생성을 요청하려면 Search Console 속성의 소유자 또는 전체 권한 사용자여야 합니다.
개별 URL을 제출하는 데는 할당량이 있으며, 동일한 URL에 재크롤링을 여러 번 요청하더라도 더 빨리 크롤링되지는 않습니다.
사이트맵 제출(한 번에 여러 URL을 제출하는 경우)
URL 수가 많으면 사이트맵을 제출하세요. 사이트맵을 사용하면 Google에서 사이트의 URL을 발견할 수 있습니다. 사이트를 방금 출시했거나 최근에 사이트 이전을 수행한 경우 매우 유용할 수 있습니다.
페이지 HTTP 상태 코드에 따른 GoogleBot 처리
2xx (success)
Google은 색인 생성 시 콘텐츠를 고려합니다. 페이지가 200 응답이 온다면 정상적으로 색인합니다.
4xx (client errors)
Google의 색인 생성 파이프라인은 4xx 상태 코드를 반환하는 URL을 색인 생성 대상으로 고려하지 않습니다. 이미 색인 생성된 URL 중 4xx 상태 코드를 반환하는 URL은 색인에서 삭제됩니다.
5xx (server errors)
5xx 및 429 서버 오류는 Google 크롤러에 크롤링 속도를 일시적으로 낮추라고 요청합니다. 이미 색인 생성된 URL은 색인에 보존되지만 결국에는 삭제됩니다.
Googlebot이 5xx 상태 코드를 반환하는 URL에서 수신한 모든 콘텐츠는 무시됩니다.
Google의 색인 생성 파이프라인은 서버 오류를 지속적으로 반환하는 색인에서 URL을 삭제합니다.
중복 페이지 URL 표준화 및 표준 태그 사용
하나의 페이지를 여러 URL로 액세스할 수 있거나 서로 다른 페이지에 유사한 콘텐츠가 있는 경우(예: 한 페이지에 모바일 버전과 데스크톱 버전이 모두 있는 경우), Google은 이러한 페이지를 같은 페이지의 중복 버전으로 간주합니다. Google은 URL 중 하나를 표준 버전으로 선택하여 크롤링하고, 나머지 모든 URL은 중복 URL로 간주하여 크롤링 빈도를 줄입니다.
어떤 URL이 표준 버전인지 Google에 분명하게 알리지 않으면 Google이 사용자 대신 표준 버전을 선택하거나 두 페이지의 중요도를 동일하게 취급하기도 합니다.
표준 URL이란 무엇인가요?
표준 URL은 Google이 사이트의 중복된 페이지 중 가장 대표적이라고 간주하는 페이지의 URL을 말합니다. 예를 들어, 동일한 페이지의 URL이 여러 개 있는 경우(example.com?dress=1234및example.com/dresses/1234) Google은 하나를 표준 URL로 선택합니다.
표준 페이지 지정 방법
중복 URL 또는 비슷한 페이지에 대해 표준 URL을 지정하려면 다음 방법 중 하나를 선택합니다. 이러한 방법은 필수는 아니지만 활용하는 것이 좋습니다. 표준 URL을 지정하지 않은 경우 Google이 어떤 버전 또는 URL이 최선인지 판단합니다.
방법 1- rel=canonical <link> 태그
rel=”canonical” 링크 태그(표준 태그)는 페이지가 다른 페이지와 중복된다는 것을 표시하기 위해 HTML의 헤드 섹션에 사용되는 태그입니다. 페이지가 다른 페이지의 중복 페이지임을 나타내려면 HTML의 head 섹션에 <link> 태그를 사용하면 됩니다.
다양한 URL을 통해 이 콘텐츠에 액세스할 수 있으나, https://example.com/dresses/green-dresses를 표준 URL로 지정하려고 한다고 가정해 보겠습니다. 다음 단계를 사용해 이 URL이 표준 URL임을 나타내세요.
rel="canonical" 링크 태그로 모든 중복 페이지를 표시합니다.
rel="canonical" 속성이 있는 <link> 요소를 중복 페이지의 <head> 섹션에 추가하여 표준 페이지로 연결되도록 합니다. 예를 들면 다음과 같습니다.
<link rel="canonical" href="https://example.com/dresses/green-dresses" />
rel="canonical" link 태그에는 상대 경로보다는 절대 경로를 사용하세요.
✅ 좋은 예시:
https://www.example.com/dresses/green/greendress.html
🚫 좋지 않은 예:/dresses/green/greendress.html
방법 2- rel=canonical HTTP 헤더
서버를 구성할 수 있는 경우, HTML 태그보다는 rel="canonical" HTTP 헤더를 사용하여 PDF 파일과 같이 HTML이 아닌 문서를 포함해 Google 검색에 지원되는 문서의 표준 URL을 나타낼 수 있습니다.
방법 3 - 사이트맵
- 사이트맵에서 표준 페이지를 지정합니다.
사이트맵에 표준이 아닌 페이지를 포함하지 마세요. 사이트맵을 사용하는 경우 사이트맵에 표준 URL만 지정합니다.
SEO 최적화에 필요한 요소
Server side Rendering
SSR로 구성된 웹사이트가 CSR,즉 SPA로 구성된 웹사이트보다 검색 우선순위가 더 높습니다.
React와 같이 SPA로 구성된 웹사이트는 하나의 index.html파일로 초기 템플릿이 있고 컨텐츠를 javascript를 통해 렌더링하여 채웁니다.
구글은 크로니움(Chronium)이라는 것을 통하여 javascript을 실행하여 색인을 생성하여 크롤링합니다. 첫번째 색인과정,크롤러가 URL로부터 html,css,js를 받아와 페이지를 렌더링할 때에는 HTML에 컨텐츠가 비어있으니 비어있는 HTML로 색인 생성을 합니다. 두번째 색인과정, 크롤러는 javascript를 렌더링 후 그에 대한 색인 생성을 합니다.
즉, React로 만든 사이트도 크롤링 가능하다는 것인데요.
하지만 javascript를 통해 실행된 사이트의 콘텐츠가 검색에 표시되거나 업데이트되는데에는 시간이 더 오래걸릴 수 있다고 합니다. 이 사이트는 구글봇이 크롤링할 때,렌더링 단계라는 추가 단계가 필요합니다. 이 렌더링 단계는 비용이 많이 든다고 하고 때문에 항상 즉시 완료된다고 보장하기가 힘들다고 하네요.
하지만 SSR은 초기부터 HTML에 컨텐츠가 존재합니다. CSR에 비해 크롤러가 색인 생성을 하여 크롤링을 하기 더 편하죠. 때문에 구글은 SSR 사이트를 CSR 사이트보다 검색 우선순위에 둔다고 합니다.
그러니 SEO 최적화시에는 SSR 방식이 더 유리할 수 있겠죠.
React index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
따라서 웹사이트에서 여러 페이지들이 각각에 맞게 검색엔진에 노출되게 하고 싶다면 SSR방식으로 검색엔진이 크롤링해갈 수 있도록 페이지들을 구성하는게 유리하겠네요.
nextjs 페이지들
meta 태그(title,description ...)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Author: A.N. Author, Illustrator: P. Picture, Category: Books, Price: £9.24, Length: 784 pages">
<meta name="google-site-verification" content="+nxGUDJ4QpAZ5l9Bsjdi102tLVC21AIh5d1Nl23908vVuFHs34=">
<title>Example Books - high-quality used books for children</title>
<meta name="robots" content="noindex,nofollow">
</head>
</html>meta 태그는 검색엔진과 기타 클라이언트에 페이지에 대한 추가 정보를 제공하는 데 사용되는 HTML 태그입니다. meta 태그는 HTML 페이지의 head 섹션에 추가되며 검색엔진에 도움이 되는 주요 메타 태그는 다음과 같습니다.
타이틀 태그 <title> 태그
페이지의 제목을 정의하며 검색 결과에 표시됩니다.
검색엔진이 페이지 주제를 이해하는데 중요한 신호를 제공하고 사용자 클릭 여부를 결정짓는 중요한 요소입니다.
Google은 <title> 요소 내의 단어 (제목 텍스트라고도 함)와 페이지의 다른 제목을 포함하여 이 제목 링크를 생성하는 데 몇 가지 소스를 사용합니다.
메타 설명 <meta name="description">
페이지 내용을 요약한 설명으로 검색 결과에 표시됩니다.
구글에서는 이 태그를 사용하여 간단한 페이지 설명을 제공하라고 하며 페이지 설명은 검색결과에 표시되는 스니펫에 사용되기도 한다고 합니다.
스니펫
일반적으로 제목 링크 아래의 검색 결과에는 타겟 페이지에 관한 설명이 포함되어 있어 사용자가 검색 결과를 클릭해야 하는지 결정하는 데 도움을 줍니다. 이를 스니펫이라고 합니다.
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Author: A.N. Author, Illustrator: P. Picture, Category: Books, Price: £9.24, Length: 784 pages">
....
</head>
</html>meta keywords
keywords 메타 태그는 검색에 전혀 영향을 미치지 않는다고 하네요.
메타 태그는 아무래도 title,description이 제일 중요한 것 같아요. 위 태그들은 꼭 설정하는 것이 좋겠네요.
heading 태그,h1 h2...
heading 태그는 검색엔진이 콘텐츠의 주제와 구조를 이해하도록 돕는다고 합니다. H1 태그는 페이지의 주요 제목, H2 이하 태그는 하위 섹션으로 사용하면 됩니다.
구글 문서에서는 페이지에 h1 태그를 넣는 것이 검색엔진 노출에 도움이 된다고 하고 있어요.
sitemap
사이트맵은 사이트에 있는 페이지, 동영상 및 기타 파일과 그 관계에 관한 정보를 제공하는 파일입니다. Google과 같은 검색엔진은 이 파일을 읽고 사이트를 더 효율적으로 크롤링합니다. 사이트맵은 내가 사이트에서 중요하다고 생각하는 페이지와 파일을 Google에 알리고 중요한 관련 정보를 제공합니다
사이트맵은 검색엔진에서 사이트의 URL을 발견하도록 도와주지만 사이트맵의 모든 항목이 크롤링되고 색인 생성된다고 보장하지는 않습니다. 하지만 대부분의 경우 사이트에 사이트맵이 있다면 도움이 됩니다.
사이트맵은 웹사이트의 구조와 콘텐츠를 검색 엔진과 사용자에게 알려주는 파일입니다. 특히 검색 엔진이 사이트를 효과적으로 크롤링하고 인덱싱할 수 있도록 도와줍니다.직접적으로 검색 순위를 높이지는 않지만, 검색 엔진이 사이트를 더 쉽게 탐색하고 색인화하도록 도와 간접적인 효과를 가져옵니다.
- 검색 엔진 크롤링 도움: 검색 엔진이 사이트 내 모든 페이지를 빠르게 찾고, 중요도와 우선순위를 파악할 수 있도록 돕습니다.
- 중요 페이지 강조: 사이트에서 중요도가 높은 페이지를 명확히 표시합니다.
사이트맵은 보통 XML 형식으로 작성됩니다.
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://example.com/</loc>
<lastmod>2024-11-25</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://example.com/blog</loc>
<lastmod>2024-11-20</lastmod>
<changefreq>weekly</changefreq>
<priority>0.8</priority>
</url>
</urlset>언제 써먹을까?
다음과 같은 경우 사이트맵이 필요할 수 있습니다.
- 연결되는 외부 링크가 많지 않은 새로운 사이트. Googlebot 및 기타 웹 크롤러는 한 페이지에서 다른 페이지로 연결되는 링크를 따라 이동하여 웹을 크롤링합니다. 따라서 다른 사이트가 페이지에 링크되어 있지 않으면 Googlebot이 페이지를 찾지 못할 수도 있습니다.
다음과 같은 경우 사이트맵이 필요하지 않을 수 있습니다.
- 내부적으로 긴밀히 연결된 사이트. Google은 홈페이지에서 시작되는 링크를 따라가서 사이트에 있는 중요한 페이지를 모두 발견할 수 있습니다.
Google Search Console에 제출
사이트맵이 있다면 Google Search Console에 사이트맵을 제출하여 검색 엔진에 인덱싱 요청할 수 있습니다.
robots
robots.txt 파일은 크롤러가 사이트에서 액세스할 수 있는 URL을 검색엔진 크롤러에 알려 줍니다.
robots.txt는 웹사이트의 루트 디렉토리에 위치한 텍스트 파일로, 검색 엔진의 크롤러(로봇)에게 특정 페이지나 디렉토리를 크롤링할 수 있는지에 대한 지침을 제공합니다. 크롤링을 제한하고 싶거나, 크롤러가 사이트를 효율적으로 탐색하도록 돕는 데 사용됩니다.
Robots.txt 파일의 기본 구성
robots.txt는 단순한 텍스트 파일이며, 다음과 같은 규칙으로 작성됩니다
- User-agent: 크롤러(검색엔진 로봇)의 이름을 지정.
- Disallow: 크롤링을 허용하지 않을 경로를 지정.
- Allow: 특정 경로를 크롤링하도록 허용.
- Sitemap: 사이트맵의 위치를 명시.
# 모든 검색 엔진의 크롤링 허용
User-agent: *
Disallow:
# 모든 검색 엔진에서 특정 디렉토리 크롤링 금지
User-agent: *
Disallow: /admin/
Disallow: /private/
# 특정 검색 엔진(Googlebot)에게만 지침 제공
User-agent: Googlebot
Disallow: /test/
Allow: /test/allowed-page.html
# 사이트맵 위치 명시
Sitemap: https://example.com/sitemap.xml
robots.txt 파일은 사이트의 루트에 위치합니다. 따라서 www.example.com 사이트의 경우 robots.txt 파일은 www.example.com/robots.txt에 있습니다.
robots.txt에서 허용되지 않은 페이지라도 다른 사이트에서 연결된 경우 여전히 색인이 생성될 수 있습니다.
Google은 robots.txt 파일을 통해 차단된 콘텐츠를 크롤링하거나 콘텐츠의 색인을 생성하지 않지만, 허용되지 않은 URL이 웹상의 다른 곳에 연결된 경우 관련 정보를 찾아 색인을 생성할 수는 있습니다.
URL이 Google 검색결과에 표시되지 않게 하려면 서버의 파일을 비밀번호로 보호하거나 noindex meta 태그 또는 응답 헤더를 사용하거나 페이지 전체를 삭제합니다.
단순한 URL 구조 유지하기
사이트의 URL 구조는 가능한 한 단순해야 합니다. 콘텐츠를 정리하여 URL을 논리적이고 가장 이해하기 쉬운 방식으로 구성하는 것이 좋습니다.
가능하면 URL에 긴 ID 숫자보다는 읽을 수 있는 단어를 사용하세요.
예)권장: URL에 간단하면서 구체적인 단어를 사용하는 경우
Google의 SEO 기본 가이드에 따르면, URL 구조는 검색결과에 탐색경로로 표시될 수 있습니다. 이는 사용자가 검색결과를 통해 페이지의 내용을 더 쉽게 이해하도록 돕는다고 하네요. 따라서, URL이 페이지 내용과 밀접하게 연관되어 있고 설명적일수록 검색엔진과 사용자 모두에게 긍정적인 영향을 미칠 수 있습니다.
예를 들어, /pets/cats.html과 같은 URL은 페이지의 주제를 명확하게 나타내어 검색엔진이 콘텐츠를 이해하고 색인화하는 데 도움이 됩니다. 반면에, /2/6772756D707920636174와 같은 임의의 식별자만 포함된 URL은 사용자와 검색엔진 모두에게 혼란을 줄 수 있습니다.
예)
https://www.example.com/pets/cats.html(좋음)
vs
https://www.example.com/2/6772756D707920636174(나쁨)
Good Case ⭕️
Bad Case ❌
- 하이픈 사용 권장
하이픈을 사용하여 URL 내의 단어를 분리해 보세요. 사용자와 검색엔진이 URL의 개념을 더 쉽게 식별할 수 있습니다. URL에 밑줄(_) 대신 하이픈(-)을 사용하는 것이 좋습니다.
✅
https://www.example.com/summer-clothing/filter?color-profile=dark-grey
❌https://www.example.com/summer_clothing/filter?color_profile=dark_grey
페이지 로딩 속도
일반적으로 빠른 페이지가 느린 페이지에 비해 사용자 만족도가 높습니다. 코어 웹 바이탈 보고서를 사용하여 사이트 전체 성능 수치를 확인하거나 PageSpeed Insights를 통해 개별 페이지의 성능을 테스트할 수 있습니다.
페이지 로딩 속도가 짧은 웹사이트에 더 높은 우선 순위를 부여한다고 합니다.
- https://pagespeed.web.dev/
페이지 속도를 측정할 수 있는 Google PageSpeed Insights를 사용해 개선할 수 있겠네요.
모바일 중심 색인 생성
Google에서 색인을 생성하고 순위를 지정하는 데 스마트폰 에이전트로 크롤링된 모바일 버전의 콘텐츠를 우선적으로 사용합니다. 이를 모바일 중심 색인 생성이라고 합니다.
모바일 기기 사용자가 증가하며 구글은 모바일 버전을 기준으로 검색 우선 순위를 결정한다고 합니다. 구글 문서에서는 모바일 버전이 있는 것을 적극 권장하고 있어요.
따라서 검색 우선순위를 높이기위해서는 모바일 관련 화면도 반응형으로 구성해놓는게 좋겠네요.
데스크탑과 모바일, 동일한 콘텐츠 구성
동일한 콘텐츠라도 데스크톱 페이지와 모바일 페이지에서 DOM 또는 레이아웃에 차이가 있으면 Google에서 콘텐츠를 다르게 이해할 수 있습니다. 하지만 데스크톱 버전과 모바일 버전에서 동일한 콘텐츠를 사용하면 같은 키워드에 대해 두 버전 모두 순위가 지정될 수 있습니다.
모바일 사이트에 데스크톱 사이트와 동일한 콘텐츠가 포함되어 있는지 확인합니다. 모바일 사이트에 포함된 콘텐츠가 데스크톱 사이트보다 적다면 모바일 사이트의 주 콘텐츠가 데스크톱 사이트와 동일하도록 모바일 사이트를 업데이트하는 것이 좋습니다.
모바일에서는 디자인을 다르게 하여 사용자 환경을 극대화할 수 있습니다(예: 아코디언이나 탭으로 콘텐츠 이동). 사이트의 거의 모든 색인 생성이 모바일 사이트에서 이루어지므로 콘텐츠가 데스크톱 사이트와 동일한지만 확인하면 됩니다.
HTTPS 사용
Google에서는 웹사이트에서 HTTPS(HTTP가 아님)를 사용하여 사용자 및 사이트 보안을 강화하도록 권장합니다.
구글의 경우, HTTPS를 사용하면 검색 우선순위에 가산점을 부여한다고 합니다.
구글은 사용자에게 안전하고 신뢰할 수 있는 웹사이트를 제공하는 것을 목표로 하며, HTTPS는 이러한 목표를 달성하는 중요한 요소로 간주됩니다.
시맨틱 태그 사용
시맨틱 태그를 사용하는 것은 페이지의 구조와 콘텐츠의 의미를 명확하게 전달하는 데 기여하며, 이는 검색엔진이 페이지를 더 잘 이해하고 색인화하는 데 간접적으로 도움이 됩니다.
시맨틱 태그(<header>, <article>, <section>, <nav>, <footer> 등)를 사용하면 다음과 같은 장점이 있습니다
-
페이지의 구조를 명확히 전달
검색엔진 크롤러는 페이지의 구조를 기반으로 콘텐츠의 계층적 관계와 중요도를 분석합니다.
예를 들어:
<header>: 페이지나 섹션의 머리말.
<article>: 독립적인 콘텐츠 단위.
<section>: 콘텐츠 그룹화.
<footer>: 페이지나 섹션의 바닥글.
이러한 태그를 사용하면 검색엔진이 페이지의 콘텐츠를 더 잘 이해할 수 있습니다. -
접근성과 사용자 경험 개선
시맨틱 태그는 스크린 리더와 같은 보조 기술이 콘텐츠를 올바르게 해석하는 데 도움을 줍니다.
구글은 사용자 경험(UX)을 중요한 검색 순위 요소로 평가하므로, 시맨틱 태그를 사용해 UX를 개선하면 간접적인 SEO 혜택을 받을 수 있습니다. -
크롤링 효율성 향상
검색엔진은 페이지의 의미와 맥락을 더 쉽게 파악할 수 있습니다.
예를 들어,<article>로 감싸진 콘텐츠는 독립적인 콘텐츠로 간주되고,<nav>로 정의된 내비게이션 링크는 중요하지만 페이지 본문이 아닌 것으로 분류됩니다.
시맨틱 태그를 사용하는 것이 검색 우선순위에 큰 도움이 되지는 않는다고 합니다. 하지만 페이지 구조를 명확히 하고, 사용자 경험과 접근성을 개선하며, 검색엔진이 페이지를 더 잘 이해하도록 돕는 간접적인 이점을 제공한다고 합니다.
구조화된 데이터로 구성(Json-ld)
HTML 및 기본적인 코딩에 익숙하다면 개발자 가이드라인에 따라 직접 구조화된 데이터를 추가할 수 있습니다. 도움이 필요하면 WYSIWYG 구조화된 데이터 마크업 도우미를 사용하여 기본적인 구조화된 데이터를 생성할 수 있습니다.
링크를 크롤링 가능하게 설정하기
Google은 인식 가능한 URL에 유효한
<a>태그를 사용하는 링크만 추적할 수 있습니다.
적절한 <a> 태그 사용
Google에서는 href 속성이 포함된 <a> 태그인 경우에만 링크를 추적할 수 있습니다. 다른 형식으로 된 링크는 Google 크롤러가 추적하지 않습니다. Google은 href 속성이 없는 <a> 링크나 스크립트 이벤트로 인해 링크처럼 작동하는 다른 태그는 추적하지 못합니다.
✅ 추적 가능
<a href="https://example.com">
<a href="/relative/path/file">
<span href="https://example.com">
🚫 인식 불가능
javascript:goTo('products')
javascript:window.location.href='/products'
#
레퍼런스
