All Articles

SEO(검색엔진최적화)

Search Engine Optimization

검색엔진이 이해하기 쉽도록 홈페이지의 구조와 페이지를 개발해 검색 결과 상위에 노출될 수 있도록 하는 작업을 말한다. 검색엔진은 정보를 수집하여 색인을 만들기 위해 로봇(즉, 크롤러)를 이용하여 크롤링을 하게 되는데, 이 때 크롤링이 ‘잘’ 되게끔 하는 것이다.

대표적 검색엔진별 로봇

  • 구글: Googlebot
  • 구글이미지검색: Googlebot-image
  • 네이버: Yeti, Naverbot
  • 다음: Daumoa
  • 빙: Bingbot

SPA와 SEO

  • 주로 클라이언트사이드 렌더링을 하게 되는 SPA에서는 SEO상으로 불리함이 있다고 알려져있다. React로 만들어진 페이지에서 소스보기를 눌렀을 때, root Element가 비어있는 것을 우리도 볼 수 있는데 이는 로봇이 보기에도 마찬가지다. 로봇은 (보편적으로) 정적인 사이트여야 잘 파악한다.
  • 그런데 검색엔진 중 구글의 경우에는 자바스크립트 실행할 수 있기 때문에, 구글 SEO에만 대응할 거라면 클라이언트사이드렌더링도 문제없다.
  • 네이버나 다음 등 다른 검색엔진의 SEO에 대응하려면 서버사이드렌더링이 더 유리하다.

SEO를 위한 가이드(구글 기준)

구글이 작성한 (엄청나게 긴) 검색 엔진 최적화 기본 가이드를 요약했다. 누구나 알 만한 너무 기본적인 것에 대해서는 세부내용을 모두 생략하겠다.

SEO의 기본

  • 명확하고 독창적인 title의 사용

    • 페이지마다 고유한 title 태그가 있는 것이 효과적이다. 사이트 내의 서로 다른 페이지를 구별하는데 도움이 된다.

  • description 메타 태그 활용하기

    • 페이지마다 다른 description 메타 태그를 사용하면 좋다.

사이트의 구조를 개선하기

  • 페이지의 URL 구조를 개선하기

    • URL에 숫자보다는 (의미있는) 단어를 사용하자.
    • URL의 뎁스도 너무 깊지 않은 게 좋다.

  • 사이트 내에서 이동하기 쉽게 만들기

    • 이동경로를 위해 텍스트 링크를 사용하자
    • 사이트맵도 마련하자.(HTML 및 XML 모두)

콘텐츠 최적화

  • 우수한 품질의 콘텐츠와 서비스를 제공하기

  • 보다 나은 앵커 텍스트 작성

    • 링크를 걸 텍스트를 제대로 작성해달란 소리다.

  • 이미지 사용의 최적화

    • alt 속성을 잘 쓰자.
    • 이미지들은 하나의 디렉토리 안에서 모두 관리하자.

  • 제목 태그의 적절한 활용

    • h1~h6를 제목태그라고 하는데, 한 문서 안에서 적절히 쓰자는 뜻이다.

검색 로봇에 대한 대처

  • robots.txt를 효과적으로 활용하기

    이부분에 대해서는 뒤에서 따로 다루어보겠다.

  • rel=”nofollow” 링크 속성 사용시 유의

    • 이 링크로 인지도를 전달하고 싶지 않을 때 쓴다.

모바일을 위한 최적화

  • Google 에게 모바일용 사이트 알리기

    • Googlebot-Mobile을 포함한 모든 User-agent의 접근을 허용하기를 권장한다.

  • 모바일 사용자 정확하게 안내하기

    • 잘 리다이렉트 해주잔 얘기다. 요즘은 반응형으로 웹개발을 하는 경우가 많으므로 그렇구나 하고 넘어가자.

사이트 홍보와 분석

  • 웹사이트를 올바르게 홍보하기
  • 무료로 제공되는 웹마스터 도구 활용하기

그밖에…

구글에서 발행한 가이드 외에 참고할 만한 내용은 아래와 같았다.

  • 동일사이트라면 http로 서비스 하는 것보다, https로 서비스 할 경우 구글 검색엔진에서 전체 점수의 약 1% 정도에 해당하는 랭킹 가산점을 부여함
  • 모든 페이지에는 메인 페이지로 이동할 수 있는 링크를 설치해 전체 사이트의 동선을 개선하는 것이 좋음
  • 웹마스터도구를 이용하면 내가 만든 웹사이트의 SEO가 어느 정도 될지 체크해볼 수 있다. 참고로, 네이버 웹마스터도구를 활용하게 되면 사이트 정상 접속 여부, robots.txt, 로봇 메타 태그, 사이트 제목, 사이트 설명, Open Graph 제목, Open Graph 설명에 대한 테스트결과를 보여준다.

robots.txt

  • robots.txt 파일은 사이트의 루트에 위치한다. (ex: www.example.com/robots.txt)

예시

# Group 1
User-agent: Googlebot
Disallow: /nogooglebot/

# Group 2
User-agent: *
Allow: /

Sitemap: http://www.example.com/sitemap.xml

이 의미는 다음과 같다.

1. 이름이 'Googlebot'인 사용자 에이전트(크롤러)는 http://example.com/nogooglebot/ 폴더 또는 이 폴더의 하위 디렉토리를 크롤링해서는 안 됩니다.  
2. 다른 모든 사용자 에이전트는 전체 사이트에 액세스할 수 있습니다. 기본적으로 전체 액세스가 허용된다고 가정되기 때문에 이 부분을 생략해도 결과는 같습니다.  
3. 사이트의 사이트맵 파일은 http://www.example.com/sitemap.xml에 있습니다.

React에 적용하기

CRA를 사용했다면 public directory가 있을 것이다. 거기 있는 index.html을 기본적으로 활용하면 되고, 만일 robots.txt와 sitemap.xml을 생성하고자 할 때에도 이 디렉토리에 생성하면 된다.

[참고자료]
https://support.google.com/webmasters/answer/6062596?hl=ko
https://static.googleusercontent.com/media/www.google.com/ko//intl/ko/webmasters/docs/search-engine-optimization-starter-guide-ko.pdf

Published 21 Dec 2019

잘못된 내용이 있다면 Pull Request로 고쳐주시거나 혹은 Issue를 통해 제게 꼭 알려주세요! 댓글도 좋습니다.HyunSangHan > TIL on Github