검색엔진 최적화 방법

cocobirds·2023년 7월 17일

들어가기에 앞서, Google 검색 센터 문서에 있는 '검색엔진 최적화 기초'를 읽고 작성하는 글입니다. SEO에 대한 공부를 목적으로 작성하는 글이므로 잘못된 정보는 피드백을 남겨주시면 수정하겠습니다.

SEO를 알아보기 전에, 검색이 어떤 방식으로 동작하는지 소개하는 글이 있어 이해를 돕기 위해 간단하게 적어봤다.

구글 검색의 작동 방식

구글 검색은 자동화된 검색엔진인 웹 크롤러라는 소프트웨어를 사용하여 정기적으로 웹을 탐색한다. Google 색인에 추가할 페이지를 찾는데, 검색결과에 표시되는 페이지의 대부분 사이트 소유자가 검색결과를 위해 사이트를 직접 제출한 것이 아닌 Google 웹 크롤러가 웹 탐색시 발견한 사이트를 자동으로 추가한 것이다.

구글 검색 3단계

크롤링 : 크롤러라는 자동화된 프로그램(Googlebot)을 사용해 인터넷에서 찾은 페이지로부터 텍스트, 이미지, 동영상을 다운로드

발견한 페이지를 모두 크롤링하는 것은 아니다. 사이트 소유자가 크롤링을 허용하지 않는 페이지도 있고, 사이트에 로그인해야 액세스할 수 있는 페이지도 있다. 웹 사이트 중에는 자바스크립트를 사용해 페이지에 콘텐츠를 표시하는 경우가 많은데 크롤링하는 동안 Google은 페이지 렌더링시 발견된 자바스크립트를 실행하여 콘텐츠를 확인한다.
색인 생성 : 페이지의 텍스트, 이미지, 동영상 파일을 분석하고 대규모 데이터베이스인 Google 색인에 이 정보를 저장

페이지 내용을 파악하기 위한 단계를 색인 생성이라 하는데 title 요소 및 Alt 속성, 이미지, 동영상 등 텍스트 콘텐츠 및 핵심 콘텐츠 태그와 속성을 처리하고 이를 분석한다. 색인 생성은 페이지 콘텐츠 및 메타데이터에 따라 달라지는데, 페이지의 콘텐츠 품질이 낮거나 Robots meta 규칙이 색인 생성을 허용하지 않는다거나 웹사이트 디자인에 따라 색인 생성이 어려울 수 있다.
검색결과 게재 : 사용자가 검색 시 사용자의 검색어와 관련된 정보를 반환

Google 컴퓨터는 색인에서 일치하는 페이지를 검색해 품질이 가장 높고 사용자의 검색어와 가장 관련성이 크다고 판단되는 결과를 반환한다. 관련성은 사용자의 위치와 언어, 기기(데스크탑 or 핸드폰)와 같은 정보를 비롯한 수많은 요인으로 결정된다.

Google 검색 작동 방식
검색 UI 요소

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

웹페이지 검색 엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹페이지를 구성해서 검색 결과의 상위에 나올 수 있게 한다. 웹페이지와 관련된 검색어로 검색한 검색 결과 상위에 나오게 된다면 방문 트래픽이 늘어나기 때문에 효과적인 인터넷 마케팅 방법 중의 하나이며 비용처리 없는 마케팅이라고 할 수 있다.
출처 : 위키피디아

사용자에게 도움이 되는 웹사이트를 빌드하고 사용자 환경을 개선하는 것을 목표로 최적화해야 한다.

사용자에게 정확한 콘텐츠 제공하기

고유하고 정확한 페이지 제목

title 요소로 사이트의 각 페이지에 고유한 제목과 주제를 명확히 작성. title 요소의 텍스트가 너무 길거나 관련성이 낮으면 텍스트의 일부만 표시하거나 검색결과에 자동으로 생성된 제목 링크를 표시할 수 있다.

<html>
<head>
    <title>Brandon's Baseball Cards - Buy Cards, Baseball News, Card Prices</title>
    <meta name="description" content="Brandon's Baseball Cards provides a large selection of
    vintage and modern baseball cards for sale.
    We also offer daily baseball news and events.">
</head>
<body>
...

메타 설명 태그 사용

페이지의 meta 설명 태그는 페이지 내용을 요약하여 제공한다. 이 메타 태그를 검색결과에서 페이지의 스니펫으로 사용할 수 있다. 사용자가 site: 검색 연산자를 사용해 검색했을 때 검색에 도움이 될 수 있다. description meta 태그 길이의 최솟값과 최댓값은 없다.

콘텐츠 설명 작성 시 권장 사항
1) 흥미롭고 정확하게 콘텐츠를 요약한 설명
2) 표제 태그(h1 ~ h6) 사용하여 중요한 텍스트 강조

자세한 문서는 우수한 메타 설명을 만드는 방법 을 읽어보면 되겠다.

사이트 계층 구조 구성하기

사이트 구성 권장 사항
1) url에 단어를 사용하면 사이트의 콘텐츠와 구조를 빠르게 파악할 수 있다.
2) 간단한 디렉토리 구조

단순한 URL을 사용해 웹사이트 문서와 관련된 설명을 제공하는 카테고리 및 파일 이름을 만들면 사이트를 더 잘 구성할 수 있고 콘텐츠를 보는 사용자가 쉽게 이해하여 읽을 수 있다.

<!-- 파악하기 어려운 url -->
https://www.brandonsbaseballcards.com/folder1/22447478/x2/14032015.html

<!-- 파악하기 쉬운 url -->
https://www.brandonsbaseballcards.com/article/ten-rarest-baseball-cards.html

이미지 최적화하기

HTML 이미지 사용

HTML img 또는 picture 요소를 사용한다. 시맨틱 HTML 마크업을 사용하면 크롤러가 이미지를 찾고 처리할 수 있다. picture 요소를 사용하여 반응형 이미지를 위한 다양한 화면 크기에 여러 옵션을 지정할 수도 있다. 이미지에 landing="lazy" 속성을 사용하면 사용자가 페이지를 더 빠르게 로드할 수도 있다.
alt 속성 사용
JPEG, GIF, PNG, BMP, WebP 의 표준 이미지 형식 사용

모바일 친화적인 사이트 만들기

반응형 웹디자인

모바일 버전의 별도 URL

Google 검색엔진 최적화 기초

마치며

구글 공식 문서를 참고한 것이라 SEO를 제대로 숙지했다고 보기는 어려울 것 같다. 그래도 기본적인 이해를 하는데 도움이 되었고 구글 검색을 사용하는 경우가 많기 때문에 유용한 정보를 얻을 수 있었다. 크롤링 개념과 크롤러가 어떻게 활용되는지 또한 알 수 있었다.

cocobirds

접근성과 UX, 데이터 표현에 관심이 많습니다.

이전 포스트

class component에서 navigate 사용하기

다음 포스트

[가비아 + netlify] 도메인 연결해서 검색 결과 나오게 하기

1개의 댓글

happy

2023년 7월 18일

항상 좋은 글 감사합니다.

답글 달기