본문 바로가기
HTML

검색엔진최적화(SEO) 기초

by 강동동 2023. 3. 27.

검색엔진최적화(SEO) 기초

1. 검색엔진 최적화

  검색엔진 최적화, SEO(Search Engine Optimization)는 Google, Bing 등의 검색 엔진에서 웹사이트를 더 나은 검색 랭크를 갖도록 최적화하는 기술입니다. 이를 통해 더 많은 트래픽을 유도할 수 있기에, 검색 포털 사이트에서 사용자가 키워드 검색시 검색 결과 상위에 랭크되면 좋을만한 서비스 혹은 웹페이지를 가진 사람들이라면 관심 갖고 공부해야 할 기술입니다.

 

  기본적으로 검색 포털로 가장 많이 사용되는 서비스가 Google이므로 Google의 검색엔진을 예시로 간단하게나마 SEO에 대해 파악해봅시다.

 

2. Google 검색의 3단계

2-1. 크롤링

  크롤러가 인터넷에서 찾은 페이지로부터 텍스트, 이미지, 동영상을 다운로드합니다.

 

  크롤링하는 동안 Google은 브라우저에서 방문 페이지를 렌더링하는 방식과 유사하게 최신 버전의 Chrome을 사용하여 페이지를 렌더링하고 발견된 자바스크립트를 실행합니다.

 

2-2. 색인 생성

  페이지의 텍스트, 이미지, 동영상 파일을 분석하고 대규모 데이터베이스인 Google 색인에 이 정보를 저장. 즉, 페이지의 내용을 파악하는 과정입니다.

 

  <title> 요소 및 Alt 속성, 이미지, 동영상 등 텍스트 콘텐츠 및 핵심 콘텐츠 태그와 속성을 처리하고 분석하는 작업이 포함됩니다.

 

  인터넷에 있는 다른 페이지와 중복되는지 아니면 표준 페이지인지 판단합니다.

 

2-3. 검색결과 게재

  사용자가 Google에서 검색하면 Google에서는 사용자의 검색어와 관련된 정보를 반환합니다.

 

  이 때, 사용자의 검색어와 가장 관련성이 크다고 판단되는 결과를 반환합니다.

 

  여기서의 관련성은 사용자의 위치와 언어, 기기(데스크톱 또는 휴대전화)와 같은 정보를 비롯하여 수많은 요인으로 결정됩니다.

 

3. 구글 검색 기술의 기본적인 요구사항

3-1. 구글 검색 엔진의 주요 역할을 하는 크롤러인 Googlebot이 차단되면 안됩니다.

  구글의 웹 크롤러 Googlebot은 정기적으로 웹을 탐색하여 Google 색인(구글에서 연결 가능한 웹 사이트들과 관련된 방대한 데이터베이스, 그리고 그 곳에 담긴 웹 사이트들)에 추가할 페이지를 찾고 색인을 생성하는 역할을 합니다. 

 

  페이지를 비공개로 만드는 경우(예: 로그인해야 볼 수 있는 경우) Googlebot은 페이지를 크롤링하지 않습니다.

 

3-2. Google에서 HTTP 200 (success) 상태 코드를 수신할 수 있어야 합니다.

  URL 검사 도구를 사용하여 특정 페이지의 HTTP 상태 코드를 확인할 수 있습니다. ( https://support.google.com/webmasters/answer/9012289?hl=ko  )

 

3-3. 웹 페이지에 색인 생성 가능한 콘텐츠가 있어야 합니다.

  텍스트 콘텐츠가 Google 검색에서 지원하는 파일 형식( https://developers.google.com/search/docs/crawling-indexing/indexable-file-types?hl=ko )으로 되어 있어야 합니다.

 

  단, 콘텐츠가 Google의 스팸 정책을 위반하면 안됩니다. 스팸 정책에 대해서는 아래에서 자세히 볼 수 있습니다.

 

4. Google 웹 검색의 스팸 정책

  아래와 같은 항목들에 대해서 Google은 스팸으로 처리합니다. SEO를 위해선 이들의 특징을 피하는 것이 좋습니다.

4-1. 클로킹

  검색 순위를 조작하고 사용자를 오도하려는 의도로 사용자와 검색엔진에 서로 다른 콘텐츠를 표시하는 행위를 클로킹이라고 합니다.

 

  예를 들어, 사용자에게 할인 의약품에 관한 페이지를 표시하면서 검색엔진에는 여행지에 관한 페이지 표시, 페이지를 요청하는 사용자 에이전트가 사람 방문자가 아니라 검색엔진일 때만 페이지에 텍스트나 키워드 삽입하는 경우가 이에 해당합니다.

 

4-2. 도어웨이

  구체적이고 유사한 검색어에 대해 순위가 결정되도록 만들어진 사이트나 페이지로, 최종 도착 페이지만큼 유용하지는 않은 중간 페이지로 사용자를 연결합니다.

 

4-3. 해킹된 콘텐츠

  사이트의 보안 취약점으로 인해 사이트에 무단으로 설치된 모든 콘텐츠를 의미합니다.

 

  첫 번째 예시로 코드 삽입이 있습니다. 해커가 웹사이트에 액세스할 때 사이트의 기존 페이지에 악성 코드를 삽입하려고 시도할 수 있습니다. 이 코드는 흔히 악성 자바스크립트의 형태를 취하며 사이트나 iframe에 직접 삽입됩니다.

 

두 번째 예시로 페이지 삽입이 있습니다. 간혹 보안상의 결함으로 인해 해커가 스팸이나 악성 콘텐츠가 포함된 새로운 페이지를 사이트에 추가할 수 있습니다. 대개 검색엔진을 조작하거나 피싱을 시도하기 위한 페이지입니다. 기존 페이지에는 해킹의 흔적이 나타나지 않지만, 새로 생긴 페이지가 사이트 방문자에게 피해를 주거나 검색결과에서 사이트 실적에 부정적인 영향을 미칠 수 있습니다.

 

  세 번째 예시로는 리디렉션이 있습니다. 해커가 웹사이트에 악성 코드를 삽입하여 일부 사용자를 유해한 페이지나 스팸 페이지로 리디렉션할 수 있습니다. 리디렉션의 유형은 리퍼러나 사용자 에이전트 또는 기기에 따라 달라질 수 있습니다. 예를 들어 Google 검색결과에서 URL을 클릭하면 의심스러운 페이지로 리디렉션되지만 브라우저에서 동일한 URL을 직접 방문하면 리디렉션되지 않을 수도 있습니다.

 

4-4. 숨겨진 텍스트 및 링크

  검색엔진만 조작하고 사람 방문자에게는 쉽게 드러나지 않는 방식으로 페이지에 콘텐츠를 배치하는 행위

 

  흰색 배경에 흰색 텍스트 사용하기, 이미지 뒤에 텍스트 숨기기, CSS를 사용하여 텍스트를 화면에 보이지 않도록 배치하기, 글꼴 크기 또는 불투명도를 0으로 설정, 단락 중간에 사용된 하이픈 등 작은 문자 하나만 연결하여 링크 숨기기 등의 행위가 이에 해당합니다.

 

4-5. 유인 키워드 반복

   Google 검색결과에서 순위를 조작하기 위해 웹페이지를 키워드나 숫자로 채우는 행위를 나타냅니다.

 

4-6. 링크 스팸

  Google 검색결과에서 순위를 조작하기 위한 링크

 

4-7. 머신 생성 트래픽(자동트래픽)

 

4-8. 멀웨어 및 악의적 행위

  멀웨어는 사용자의 동의 없이 소프트웨어를 설치하거나 바이러스와 같은 유해한 소프트웨어를 설치하는 등 악의적인 방식으로 작동합니다.

 

4-9. 혼동을 야기하는 기능

  실제로는 액세스할 수 없는 일부 콘텐츠나 서비스에 액세스할 수 있을 것처럼 사용자를 속이는, 혼동을 야기하는 기능과 서비스가 포함된 사이트를 의도적으로 만들어 검색 순위를 조작하는 경우를 말합니다.

 

4-10. 스크랩한 콘텐츠

  더 잘 알려진 다른 사이트에서 가져온('스크랩한') 콘텐츠를 기반으로 사이트를 구성, 저작권 침해에 해당할 수도 있습니다.

 

4-11. 부적절한 리디렉션

  사용자와 검색엔진에 서로 다른 콘텐츠를 표시하거나 사용자의 원래 요구에 맞지 않는 예기치 않은 콘텐츠를 표시하기 위해 악의적으로 실행하는 리디렉션을 의미합니다.

 

4-12. 자동 생성 스팸 콘텐츠

  고유한 내용을 생성하거나 충분한 가치를 추가하지 않고 프로그래매틱 방식으로 생성된 콘텐츠를 나타냅니다.

 

4-13. 사용자 생성 스팸

  콘텐츠를 대상으로 하는 채널을 통해 사용자가 사이트에 추가한 스팸 콘텐츠를 나타냅니다.

 

5. Google의 SEO 기본 가이드

5-1. 사이트가 Google 색인에 포함되어 있는지 확인하기

site:dong-x2.tistory.com/

과 같이 site: 뒤에 확인하려는 페이지의 URL을 넣고 구글 검색창에 검색해봅니다.

 

  나의 웹페이지가 발견되지 않는 다면 사이트맵을 구글측에 제출하는 것도 하나의 방법입니다. ( https://developers.google.com/search/docs/crawling-indexing/sitemaps/overview?hl=ko )

 

5-2. 크롤링되고 싶지 않은 콘텐츠에 대해서는 robots.txt에 설정하기

  robots.txt 파일을 통해 크롤링 가능한 부분과 크롤링을 허용하지 않을 부분에 대해서 컨트롤이 가능합니다. ( https://developers.google.com/search/docs/crawling-indexing/robots/intro?hl=ko )

 

  단순 크롤링 제외/비제외 컨트롤이 아닌 보안적인 부분에 대해서는 noindex 태그 사용이나 인증 절차, 페이지 삭제 등의 추가적인 방법이 필요합니다.

 

5-3. 고유하고 정확한 페이지 제목 만들기

  HTML 문서의 <head> 요소 내에 <title> 요소를 놓고, 사이트의 각 페이지에 고유한 제목 텍스트를 만듭니다. 이 때, 내용은 페이지의 콘텐츠를 정확하게 설명해야한다.

 

  문서가 검색결과 페이지에 표시될 때 <title> 요소의 내용이 검색결과의 제목 링크로 표시될 수 있습니다.

 

5-4. 메타 설명 태그 등록

<meta name=“description” ...>

  위와 같은 형식으로 시작하는 메타 설명 태그를 등록합니다.

 

  Google에서 설명 메타 태그를 Google 검색결과에서 페이지의 스니펫으로 사용할 수 있습니다.


  이 때, 설명에는 페이지 콘텐츠를 정확하게 요약된 내용이 들어가야하며, 각 페이지마다 고유한 설명을 사용해야 합니다.

 

5-5. 콘텐츠의 계층구조 만들기

  <h> 태그를 적절히 사용하여 웹 페이지가 담고 있는 내용, 즉 콘텐츠들을 적절하게 계층적으로 구조화해야 합니다.

 

5-6. 보안 연결 사용하기

  https:// 연결을 통해 신뢰할 수 있는 연결을 보장해야 합니다.

 

5-7. URL을 Semantic하고 계층적이도록 구성하기

  URL을 단순한 단어 위주로, 사용자가 URL만 보고도 페이지의 경로와 내용을 유추할 수 있을 정도로 URL을 계층적이고 알기 쉽게 구성해야합니다.

 

  이를 위해서는 디렉토리구조가 간단하고, 문서에 연결되는 URL을 하나의 버전만 제공하는 것이 좋습니다.

 

5-8. 사용자에게 고품질 콘텐츠를 제공하기

  사실상 가장 중요하고 근본이 되는 내용으로, 그 무엇보다 페이지가 담고 있는 내용이 사용자가 매력을 느낄 수 있을 만한, 정확하고 퀄리티 있는 내용이어야 합니다.

 

  또한 비슷한 맥락에서, 이미지를 콘텐츠에 포함할 때에는 alt 속성을 사용하는 것이 좋습니다. loading=“lazy"을 통해 사용자가 페이지를 더 빠르게 로드할 수도 있습니다. 이미지 파일의 이름도 단순하고 시맨틱한 단어를 사용하면 더 좋습니다.

 

5-9. 콘텐츠가 모든 크기의 화면에서 빠르게 로드되고 제대로 표시되도록 최적화

  사용자가 어떠한 크기의 화면이나 기기로 페이지를 보던간에, 수월하게 페이지에 접근하고 보기 쉽도록 최적화 해야합니다.

 

  반응형 웹디자인을 통해 모바일친화적 웹페이지 구성하는 것이 가장 좋습니다.

 

5-10. 탐색경로 목록(BreadcrumbList) 사용하기

도서 › 공상과학 › 수상작

  탐색경로(Breadcrumb)란 페이지 상단 또는 하단에 한 행으로 위치한 내부 링크로 방문자는 이를 사용하여 이전 섹션이나 루트 페이지로 빠르게 돌아갈 수 있는 기능을 제공하는 것을 나타냅니다.

 

5-11. 사이트맵 구성하기

 

5-12. 유용한 404 페이지를 표시하기

 

5-13. Google Search Console 등 분석도구 이용하기

 

5-14. 의미 있는 HTTP 상태 코드 사용하기

 

5-15. 구조화된 데이터 사용하기

 

6. 그 외의 SEO에 대한 방법

6-1. 코드를 간결하게 작성하기

  코드를 간결하게 작성하는 것은 개발자들 뿐만 아니라 크롤러가 사용하는 렌더링 엔진에게도 도움이 됩니다.

 

6-2. 페이지 로드 시간 줄이기

  페이지 로드 시간이 길어질 수록 사용자의 페이지 이탈율은 기하급수적으로 늘어납니다.

 

6-3. 301 리디렉션 및 302 리디렉션 적절하게 사용하기

  301 리디렉션은 웹사이트 또는 페이지가 영구적으로 이동했음을 검색 엔진에 나타냅니다. 301 리디렉션을 사용하면 검색 엔진이 원본 페이지의 링크 자산 대부분을 새 페이지로 이전합니다.

 

  반면에 302 리디렉션은 페이지가 일시적으로 이동했음을 나타냅니다. 사이트를 재설계하거나 업데이트할 때 이 기능을 사용할 수 있지만 여전히 원본 페이지의 링크 자산을 유지하고 싶을 수 있습니다.

'HTML' 카테고리의 다른 글

MIME 타입이란?  (0) 2023.03.28
WAI-ARIA 란 무엇인가  (0) 2023.03.28
웹 접근성(Accessibility)  (0) 2023.03.22
HTML Best Practice  (0) 2023.03.20
HTML Forms  (0) 2022.12.13