SEO란?

Haz·2023년 2월 8일

개발여행기

목록 보기

10/24

CEO는 들어봤어도, SEO는 처음 들어보는 사람이 많을 것 같다.
회사에서 일을 하다보면 아무래도 개발자 중에 SEO에 관심을 갖고 있는 사람은 드물다. 게다가 이 작업을 위해서 가이드를 만들어줘도 서비스 만들기도 바쁜데 이런 것까지 해야되냐는 느낌으로 몇 달이 걸려 겨우 해주는 경우도 다반사다.
하지만 거꾸로 SEO를 할 수 있는 개발자가 되면 마케팅 비용도 아끼고, 마케팅팀과 커뮤니케이션도 원활해지니 알아두면 내 능력치가 올라가는 일이다.

그렇다면 도대체 SEO란 무엇이며 왜 최적화를 해야하는 걸까?

SEO

SEO 정의

SEO(Search Engine Optimization)는 우리말로는 "검색엔진최적화"라고 한다. 간혹 SEO 최적화라고 하는 필자 같은 사람도 있지만 이는 동어 반복이므로 그냥 SEO라고 하는 게 맞다(전공병).

MDN에 따르면 SEO의 구체적인 정의는 아래와 같다.

웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정

여러 검색 플랫폼들이 있지만, 대부분 SEO를 하는 플랫폼은 구글과 네이버 정도다. 나머지는 이 두 플랫폼의 기준을 따라오기 때문에 모든 플랫폼에 맞추기보다는 두 개 플랫폼만 최적화하면 된다.

SEO 목적

목적이야 단순하다.

검색 플랫폼의 검색창에서 우리 서비스를 검색했을 때, 상위에 보이는 것.

그리하여 마케팅 비용을 줄이면서도 인지도를 높이되, 수익을 창출하는 것이다. SEO를 통해 각 검색 플랫폼의 크롤링봇이 웹사이트에 대해 파악하는 것을 돕고, 평가 점수를 높여 자연 유입 트래픽을 높여서 수익으로 직결되니 마케팅 비용을 줄이면서도 인지도는 올라간다.

SEO 방법

1. 플랫폼 서치 콘솔 활용하기

네이버와 구글을 예시로 들자면, 네이버에는 "서치 어드바이저"가 있고, 구글에는 "웹 마스터 도구(Search Console)"이 있다. 이 도구들을 활용하면 보다 쉽게 웹사이트 SEO가 가능하다.
보통 이 도구를 활용하면 웹사이트 도메인을 활용해 실제 웹사이트 소유주인지 먼저 확인한다. 그리고 그 이후에 robots.txt 파일이 제대로 수집이 되어 크롤링봇이 웹사이트 정보를 긁어가는데 이상이 없는지 확인한다. 또한 sitemap.xml 파일을 직접 제공할 수도 있는데 확실히 사이트 사이트맵을 그려주는 속도가 단축되는 효과가 있었다.

2. 코드로 작성하기

가장 중요한 작업이다. 플랫폼 서치 콘솔을 활용하더라도 크롤링봇에 제공할 웹사이트 정보가 담긴 코드가 없다면 SEO가 될 리가 없다.
이를 위해 기본적으로 작성해야할 것은 메타 태그다. 메타 태그는 네 가지 유형의 정보를 담는데 활용할 수 있다.

name: 문서 전역 레벨의 정보를 담음
http-equiv: 유사한 이름의 HTTP 헤더가 제공하는 정보와 동일한 "프래그마 지시문"
charset: 문서 인코딩에 사용한 문자 인코딩을 나타내는 "문자 집합 선언"
itemprop: "사용자 정의 메타데이터"를 제공

charset의 경우, 기본적으로 들어가는 속성이며 마케팅에 활용할 때는 보통 name을 활용하게 된다.

<meta name="keywords" content="SEO, 웹사이트 최적화">
<meta name="Description" content="Web, html, 웹 표준">
<meta name="og:title" content="메타 태그를 통한 검색엔진 최적화" />
<meta
  name="og:description"
  content="웹페이지 크롤링시키기 대작전"
/>

위와 같은 식으로 name에 어떤 용도의 메타 태그인지를 쓰고 content에 적고 싶은 내용을 적으면 된다. og:image도 추가하여 웹사이트를 공유할 때 브랜드 이미지가 같이 공유되도록 할 수도 있다.

또한 구글의 경우에는 구조화된 데이터가 추가되면 더 빠르게 SEO가 되므로 추가하면 좋다. 구조화된 데이터, JSON-LD의 경우 schema.org에서 필드를 정의해놓고 있으므로 참고하면 좋다.
JSON-LD 스크립트는 하위와 같은 구조를 가지고 있다.

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Product",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.7",
    "reviewCount": "76847"
  },
  "name":""
}
</script>