SEO 입문 가이드: 구글과 함께 알아보는 검색 엔진 최적화의 기본과 핵심

#SEO#웹
작성 : 2023-11-29수정 : 2023-11-29

목차 펼치기

머리말

SEO

(Search Engine Optimization : 검색 엔진 최적화)는 검색 결과에서 웹 페이지의 높은 랭킹을 위해 매우 중요한 요소다. 하지만 검색 엔진의 알고리즘은 비공개 상태로 정기적으로 업데이트 되기 때문에 이에 맞춰 SEO를 고도화하기란 여간 어려운 일이 아니다. 심지어 검색 엔진 별 알고리즘도 다르다. 그렇기 때문에 깊이 보다는

구글의 SEO 기본 가이드

를 토대로 핵심 원칙을 이해하고, 높은 우선 순위를 얻기 위한 기본적인 최적화 기술을 살펴보고 정리해보려고 한다.

구글을 기준으로 한 것이지만 기본적인 내용이기 때문에 다른 엔진에서도 충분히 도움이 될 수 있는 내용이라고 생각한다. 사용자 노출이 핵심인 서비스라면 이를 통해 효과적인 SEO 전략을 수립해 이익을 높일 수 있을 것이다. 예를 들면 글로벌 OTA(온라인 여행사) 서비스는 SEO를 통해 숙소를 검색하는 사용자들에게 자사 서비스에 등록된 숙소를 더 먼저 노출시켜 예약 페이지로 후킹할 수 있을 것이다.



1. 기본 용어 정의

색인

  • 수집한 웹 페이지의 정보를 구조화해 저장하는 것으로 구글은 주기적으로 페이지를 수집하고 색인에 추가하여 빠르고 효율적으로 검색되도록 한다.

  • 구글이 모든 웹 페이지를 저장하는 곳으로, 각 페이지의 콘텐츠 및 위치(URL)를 명시한다.


검색 엔진

  • WWW(World Wide Web)의 정보를 색인해 사용자 검색에 맞는 결과를 제공해주는 정보 검색 시스템이다.


스니펫

  • 검색 결과에서 페이지의 내용을 요약해서 제공하는 것으로 검색 내용과 연관된 페이지 내용이나 메타데이터가 포함된다.

  • 구조화된 데이터를 기반으로 검색 엔진이 동적으로 생성한다.


리치 결과

  • 이미지, 별점, 리뷰 등 다양한 방식으로 제공해주는 검색 결과로 사용자의 눈길을 끌어 더 많은 상호작용을 유도할 수 있다.

  • 구글 검색 시 스키마 등 구조화된 데이터를 기반으로 동적으로 생성된다.

  • 리치 검색결과 테스트

    서비스를 통해 미리 확인해볼 수 있다.


크롤링

  • 신규 또는 업데이트 된 페이지를 찾는 과정이다.

  • 페이지 링크, 사이트맵 등 여러 방법으로 찾을 수 있다.


크롤러

  • 크롤링을 하는 자동 소프트웨어를 말한다.

  • 사용하는 포털마다 검색 엔진은 다를 수 있는데 대표적으로는 다음과 같다.

    • 구글 : Googlebot

    • 빙 : Bingbot

    • 네이버 : Yeti

    • 다음 : Daum

    • 야후 : Slurp


2. 크롤러 초대하기

2.1 Googlebot 크롤러 자세히 알기

  • 사용자 권한 요청을 거부할 것이라고 예상하기 때문에 사용작 권한이 필요한 기능에는 접근할 수 없다.

  • 네트워크 요청 및 리소스 사용을 줄이기 위해 적극적으로 캐싱한다.

  • WebGL과 같이 모든 사용자 에이전트에서 지원되지 않을 수 있는 기능들은 Googlebot도 지원하지 않을 수 있다.

  • HTTP 연결에서 콘텐츠를 확인한다. WebSockets, WebRTC 등 다른 연결은 지원하지 않는다.



2.2 크롤링 프로세스 이해하기

  1. 구글은 크롤링이 허용된 페이지를 크롤링 및 렌더링 대기열에 추가한다.

  2. 이후 리소스가 확보되면 Chromium이 페이지를 렌더링하고 자바스크립트를 실행한다.

  3. 렌더링된 HTML에서 페이지의 색인을 생성하며 발견되는 URL을 크롤링 대기열에 추가한다.


구글 크롤러의 경우 JS까지 해석하기 때문에 CSR에서도 페이지의 콘텐츠를 수집해 색인을 생성할 수 있다. 하지만 여전히 일부 크롤러는 JS를 실행할 수 없으며 SSR이 더 빨리 로드된다는 측면에서 SEO를 위한다면 SSR을 고려하는 것이 좋다.


2.3 사이트맵 제출하기

  • 사이트맵

    을 이용해 사이트에 있는 페이지들에 대한 정보를 크롤러에 제공하여 효과적으로 크롤링 할 수 있도록 도와줄 수 있다.

    • robots.txt

      에 명시하여 제공할 수 있다.

    • Google Search Console을 통해 제공할 수 있다.

  • 대부분 동적으로 사이트맵을 생성해야 하는 경우가 더 많을텐데, 사용하는 프레임워크와 개발환경에 맞게 적절한 방법을 선택하면 된다.

  • 크기가 작은(페이지 500개 이하) 사이트에서는 필요하지 않을 수도 있다.


2.4

robots.txt 허용하기

plain text
1User-agent: *
2Allow: /
3
4Sitemap: https://weezip.treefeely.com/sitemap-index.xml
  • robots.txt

    파일 설정을 통해 크롤러의 접근을 허용하거나 차단할 수 있다.

  • 렌더링과 색인 생성 최적화를 위해서 JS, CSS, 이미지 파일 등에 항상 접근할 수 있도록 허용하는 것을 권장한다.

  • 만약 하위 도메인의 특정 페이지에 대해 차단이 필요할 경우, 하위 도메인 레벨에서

    robots.txt

    를 작성해주어야한다.

  • 현재 사이트에서 허용하지 않았더라도 다른 사이트에서 연결될 경우 색인이 생성될 수 있다. 이를 원하지 않을 경우

    <head>

     태그에 

    <meta name="robots" content="noindex">

     태그를 추가한다.

    • 또는 HTTP 응답 헤더에

      X-Robots-Tag: noindex

      를 반환해 사용할 수 있다.

  • robots.txt 작성하는 방법에 대해 예전에 간단히 작성한 내용

    이 있어 링크를 첨부한다. 개인 블로그는 특별히 접근을 제한할 페이지가 없으므로 모든 크롤러에 대해 모든 페이지의 크롤링을 허용했다.


2.5

Google Search Console 등록하기

일반적으로 구글 크롤러는 지속적으로 웹을 탐색하기 때문에 별도로 등록하지 않아도 된다. 실제로 대부분의 페이지는 크롤러가 자동으로 색인했다. 하지만 컨텐츠를 제출하거나 검색 실적을 모니터링하는 데 유용하므로 이왕이면

Google Search Console

에 등록하는 게 좋다. Googlebot의 크롤링 속도를 조절할 수도 있다.


2.6

색인 확인하기

site:{site_name}

을 구글에 검색하여 특정 사이트에 어떤 페이지들이 색인되었는지 확인할 수 있다. 예를 들면

site:weezip.treefeely.com

을 검색해서

내 블로그에서 색인된 페이지들을 한 번에 확인할 수 있다.


3. 크롤러가 이해할 수 있는 콘텐츠 만들기

3.1 title 태그

html
1<head>
2	<title>페이지별 고유한 제목이다.</title>
3</head>
<head>

태그 내에

<title>

태그를 사용해 페이지의 고유한 제목을 만든다. 이는 검색결과 페이지에서 제목 링크로 표시될 수 있다.


🙆‍♂️ 

이렇게 사용하자

  • 페이지 별 고유한 텍스트를 만든다.

  • 간단하지만 콘텐츠를 정확하게 설명하는 텍스트를 사용한다.


🙅‍♂️ 

이렇게 사용하지 말자

  • ‘제목 없음’이나 ‘새 페이지 1’과 같은 기본값이나 불분명한 텍스트는 지양한다.


3.2 meta description 태그

html
1<head>
2	<meta name='description' content='저자: Ethan, 발행일: 2023.11.19, 내용: 불사대마왕 페이커 롤드컵 4회 우승!'/>
3</head>
<head>

태그 내에

description

<meta>

태그를 사용해 페이지의 내용을 요약하여 제공한다. 이는 검색결과 페이지의 스니펫으로 사용될 수 있다. 단, 구글에서 페이지의 내용 중 사용자의 검색어와 잘 어울리는 텍스트가 있다면 이 텍스트가 표시될 수도 있다. 길이 제한이 없어 짧은 단락 정도로도 길어질 수 있지만, 사용자 기기 폭에 맞춰 잘릴 수 있다.


🙆‍♂️ 

이렇게 사용하자

  • 가능하면 특정 페이지를 정확하게 나타내는 설명을 작성한다.

  • 저자, 발행일, 작성자 정보 등 콘텐츠 관련 정보를 포함하기에 적합하다.

  • 페이지 별 데이터에는 콘텐츠를 기반으로 자동으로 생성하는 방식이 적합하다.


🙅‍♂️ 

이렇게 사용하지 말자

  • 키워드만 사용하기

  • 페이지의 모든 내용을 사용하기

  • 일반적인 설명만 사용하기

  • 여러 페이지에서 동일하게 사용하기


3.3 SEO를 위한 meta 태그들

html
1<meta name="content-language" content="kr" />
2<meta name="description" content={desc} />
3<!-- <meta name="keywords" content={'foo, bar'} /> -->
4
5<meta property="og:locale" content="ko_KR" />
6<meta property="og:type" content="website" />
7<meta property="og:title" content={title} />
8<meta property="og:description" content={desc} />
9<meta property="og:url" content={url} />
10<meta property="og:site_name" content={siteName} />
11
12<meta property="twitter:card" content="summary_large_image" />
13<meta property="twitter:title" content={title} />
14<meta property="twitter:description" content={desc} />
15<meta property="twitter:url" content={url} />
16
17<meta name="image" content={image} />
18<meta property="og:image" content={image} />
19<meta property="og:image:width" content="1200" />
20<meta property="og:image:height" content="600" />
21<meta property="twitter:image" content={image} />

SEO를 위해 사용하면 좋을

<meta>

태그들을 정리해보았다.

  • name

    속성은 문서의 일반적인 메타정보를 정의하는 데 사용되고,

    property

    속성은 주로 소셜 미디어와 같은 외부 서비스와의 통합을 위해 사용된다.

  • content-language

    설정은

    <html lang=’ko’>

    설정으로 사용할 수도 있다.

  • kewords

    설정은 현재 대부분의 검색 엔진에서 무시되고 있기 때문에 별로 영향을 끼치지 않는다. 이 태그보다는 콘텐츠 자체에 키워드를 적절히 사용하는 것이 중요하다.

  • og:image:width

    와

    og:image:height

    속성은 너무 큰 이미지를 사용할 때 적절한 크기로 지정하기 위해 사용한다.



3.4 계층을 나타내는 h 태그

의미있는 표제

를 사용해 콘텐츠의 계층 구조를 만들어 쉽게 탐색할 수 있도록 제공한다.


🙆‍♂️ 

이렇게 사용하자

  • 개요를 작성하고 있다고 상상하며 페이지에 꼭 필요한 부분에만 사용한다.


🙅‍♂️ 

이렇게 사용하지 말자

  • 과도하게 사용하거나, 너무 길게 사용하는 것은 지양한다.

  • <em>

    ,

    <strong>

    이 사용될 곳에 표제 태그를 사용하는 것은 지양한다.

    • <em>

      은 의미론적 강조에 사용하고,

      <strong>

      은 시각적 강조에 사용한다.


3.5 링크를 나타내는 a 태그

🙆‍♂️ 

이렇게 사용하자

  • 설명을 제공하는 좋은 링크 텍스트를 작성한다.

  • 내 사이트에서 다른 사이트로 이동할 경우, 내 사이트의 평판을 넘겨주게 된다. 이를 원하지 않을 경우 앵커 태그에

    rel=”nofollow”

    을 설정한다.

    • 만약 모든 링크에 적용하려면

      <head>

       태그에 

      <meta name="robots" content="nofollow">

       태그를 추가한다.

    • 출처를 신뢰할 수 없을 때만 사용한다.

    • 링크 비용을 지급받은 경우

      sponsored

      를 사용한다.

    • 사용자가 링크를 삽입하는 경우

      ugc

      또는

      nofollow

      를 추가한다.

    • 링크의 관계 알리기

  • 출처를 인용하는 등 외부 링크를 사용하면 사이트 신뢰성에 도움이 된다.


🙅‍♂️ 

이렇게 사용하지 말자

  • 페이지의 URL을 사용하거나, ‘여기를 클릭하세요’ 처럼 지나치게 일반적으로 작성하는 건 지양한다.

  • 일반 텍스트처럼 보이게하는 스타일은 지양한다.

  • 스크립트나 애니메이션을 기반으로 하거나 이미지를 사용하는 건 지양한다.

  • 불필요한 링크는 작성하지 않는다.


3.6 적절한 시맨틱 마크업

적절한 시맨틱 마크업을 사용하면 HTML의 각 요소에 의미를 부여해 의미있는 구조를 더 명확하게 표현할 수 있다. 이는 웹 접근성이나 코드 가독성과 유지보수성 측면에서도 중요하지만 크롤러가 문서를 파악하고 색인하는 데 있어서도 많은 도움을 줄 수 있다. 즉, 개발자와 사용자 그리고 검색 엔진 모두에게 긍정적인 효과를 줄 수 있다.


  • <header>

    ,

    <footer>

    ,

    <main>
  • <article>

    ,

    <section>
  • <aside>

    ,

    <nav>
  • <ul>

    ,

    <ol>

    ,

    <li>
  • <strong>

    ,

    <em>

    ,

    <small>
  • <a>

    ,

    <button>
  • <h1~6>

    ,

    <b>

    ,

    <i>

    ,

    <u>

    ,

    <s>

    ,

    <p>

    ,

    <span>
  • <time>

    ,

    <code>

    ,

    <pre>

    ,

    <abbr title=””>

    ,

    <blockquote>
  • <cite>

    ,

    <address>
  • <dl>

    ,

    <dt>

    ,

    <dd>
  • <hr>
  • <sub>

    ,

    <sup>
  • <del>

    ,

    <ins>
  • <progress>

    ,

    <meter>
  • <dialog>
  • <table>
    • <caption>

      ,

      <thead>

      ,

      <tbody>

      ,

      <tfoot>
    • <tr>

      ,

      <th>

      ,

      <td>
    • <th scope=”row”>

      ,

      <th scope=”col”>
    • <colgroup>

      ,

      <col>
  • <details>

    ,

    <summary>

현재 HTML5는 2014년 W3C에 의해 공식 표준으로 채택되었으며 버전 단위의 진화가 아닌 꾸준한 업데이트를 통해 개선되고 있다. 그 중 적절히 사용하면 좋을 일부 태그들을 정리해보았다. 개인적으로 하나씩 의미를 다 공부하기 보다는 전체적으로 이런 게 있구나, 정도만 알아도 실제 작업하면서 적용하는 데 무리가 없을 거라고 생각한다. 코딩으로 자연스럽게 익히는 게 좋은 방법이라고 생각한다.



3.7 구조화된 마크업

페이지에 구조화된 데이터를 사용하면 크롤러가 페이지를 이해하는데 확실한 단서를 제공할 수 있으며 구글 리치 결과를 사용할 수 있다. 자주 보이는 FAQ, 리뷰 스니펫 등을 포함해 현재 31개의 리치 결과가 있으며 보다 자세한 건 아래 공식 사이트를 참고할 수 있다.


4. 검색 엔진을 위한 사이트 만들기

4.1 URL 구조

  • 모든 웹사이트에서

    https://

    를 사용하기를 권장하고 있으며 www와 www가 아닌 버전을 구분한다.

    • 즉, Search Console에 등록할 때 http, https, www, non-www URL을 모두 추가하는 게 좋다.

  • 호스트 뒤의 트레일링 슬래시는 동일하게 처리하지만,

    경로와 파일 이름 뒤에 올 경우에는 다른 URL이 될 수 있다.

    • 즉,

      https://weezip.treefeely.com/foo

      와

      https://weezip.treefeely.com/foo/

      는 다른 URL이다.

  • 경로, 파일 이름, 검색 문자열은 대소문자를 구분한다.

  • 프래그먼트(

    #

    태그)는 무시할 때가 많다.

  • 인코딩이 필요하다면 UTF-8을 사용한다.

  • 다국가 지원 시에는 국가별 도메인 또는 국가별 하위 디렉토리를 사용한다.

  • 단어는 하이픈(

    -

    )을 사용해 분리한다.

    • 언더바(

      _

      ), 통합된 단어 사용은 지양한다.

  • 정보를 전달할 수 있는 간단한 URL을 사용한다.

    • 긴 URL, 일반적인 페이지 이름, 과도한 키워드 사용은 지양한다.

    • 여러 매개변수를 가지고 있는 URL은 크롤러에 문제를 일으켜 필요 이상의 대역폭을 사용하거나, 일부 콘텐츠에 대한 색인을 완전히 생성하지 못하게 될 수 있다.


4.2 Canonical Link

  • 페이지에 있는 콘텐츠를 대표하는 다른 페이지가 있음을 나타내는데 사용한다.

    • 어떤 URL이 검색결과에서 사람들에게 표시될지 지정한다.

    • 유사하거나 중복된 페이지와 관련된 신호를 통합한다.

      쿼리스트링 매개변수가 많은 페이지일 경우 매개 변수가 없는 URL을 canonical로 설정하여 이를 주요 버전이라고 간주할 수 있다.

    • 단일 콘텐츠와 관련된 측정항목의 추적을 단순화한다.

    • 중복 페이지에 크롤링 시간을 낭비하지 않도록 방지한다.

    • 일반적인 경우라면 지정하지 않아도 괜찮지만 일부 경우에는 유용할 수 있다.

  • HTML 내에

    <link rel="canonical" href="" />

    를 추가하거나, HTTP 헤더에 추가해서 사용할 수 있으며 둘 중 하나의 방법으로만 사용하기를 권장한다.


4.3 탐색 경로 제공

  • 루트 페이지를 기준으로 구조를 설계하여

    구조화된 탐색 경로(Breadcrumb)

    를 제공한다.

  • 검색 엔진은 사이트의 구조(Navigation)를 파악하기를 원한다.

  • 구글의 예시에서는 이 탐색 경로에

    <ol>

    ,

    <li>

    ,

    <a>

    태그를 사용하고 있다.

  • 별도의 탐색 페이지를 만들어 사용자가 자연스러운 흐름을 따라 사이트의 모든 페이지로 이동하고, 찾을 수 있도록 하는 것도 좋다.


4.4 기타 정보 제공

  • 유용한

    404

    페이지를 표시한다.

    • 루트 페이지로 이동할 수 있게 한다.

    • 인기있는 콘텐츠 및 관련 콘텐츠 링크를 제공한다.

  • 알기 쉬운 디렉터리 구조를 사용한다.


4.5 좋은 콘텐츠를 작성하자.

  • 신선하고 독창적인 콘텐츠를 작성한다.

  • 검색 행동을 예상해서 특정 키워드를 섞어 콘텐츠를 작성하면 좋다.

  • 텍스트가 쉽게 읽히도록 작성한다.

  • 단락, 레이아웃 등을 활용해 콘텐츠를 구성한다.

  • 사용자 신뢰를 구축할 수 있는 사이트를 제공한다.

  • 전문성을 명확히 드러낸다.

  • 주제에 맞춘 적절한 양의 콘텐츠를 제공한다.

  • 주의를 분산시킬 수 있는 광고를 표시하지 않는다. 절대 광고로 인해 콘텐츠를 소비하지 못하는 일은 없어야한다.


4.6 이미지

  • 시맨틱 HTML 마크업(

    <img>

    ,

    <picture>

    )을 사용한다.

  • alt

    속성을 사용해 간단한 설명이 담긴 대체 텍스트를 제공한다.

  • 이미지를 링크로 사용할 때 대체 텍스트를 제공한다.

  • JPEG, GIF, PNG, BMP, WebP와 같은 표준 이미지 형식을 사용한다.

  • 색인을 생성할 이미지를 CSS로 사용하는건 지양한다.



5. 모바일 친화적으로 만들기

  • 이제 대다수 사람들은 휴대기기를 사용해 검색하고 있기 때문에 모바일 기능을 지원해야 온라인 인지도를 유지할 수 있다.

  • 모바일 검색 사용자가 불편할 경우 순위가 낮아지거나 결과에 경고가 나타날 수 있다.

  • 반응형 웹 디자인으로 지원하는 것을 제일 권장한다.

  • 구글의 모바일 친화성 가이드

    를 더 참고할 수 있다.




6. 홍보하기

효과적인 홍보 전략은 사이트의 트래픽을 증가시키고 백링크를 얻는 데 도움이 된다.

  • 콘텐츠를 생성하고 업데이트할 때 소셜 미디어, 뉴스레터, 커뮤니티 등을 활용해 해당 정보를 홍보하고 공유할 수 있다.

  • 적절한 해시태그와 함께 소셜 미디어를 적극적으로 활용한다.

  • 웹사이트의 관심사와 관련된 커뮤니티에 참여하여 사이트와 콘텐츠를 소개할 수 있다.



7. 검색 실적과 사용자 행동 분석하기

웹사이트를 평가하고 향상시키기 위해 정량적 데이터는 매우 중요하다. 다양한 도구를 활용하여 실적을 분석하고 사용자 행동을 모니터링 할 수 있다.


이 글은 어떠셨나요?
댓글과 반응은 큰 힘이 됩니다. ❣️

Wanna get in touch?

All Icons byiconiFy

Copyright 2023. Ethan.lee all rights reserved.