SEO, 어디서부터 시작해야 할까?

Published: at 오후 06:00

웹 개발을 공부하다 보면, 종종 “React는 SEO에 적합하지 않다”거나 “Next.js는 SEO에 더 좋다”는 말을 듣게 된다. 이런 말들은 어느 정도 근거가 있지만, 실제로는 더 복잡한 주제이다.
React는 동적 웹 애플리케이션을 만드는 데 탁월한 JavaScript 라이브러리이지만, 기본적으로 클라이언트 사이드 렌더링을 사용하기 때문에 SEO에 약점이 있을 수 있다. 반면 Next.js는 React를 기반으로 한 프레임워크로, 서버 사이드 렌더링을 지원하여 SEO에 더 유리한 면이 있다.

하지만 이런 차이점을 이해하려면 먼저 SEO가 무엇인지, 그리고 왜 중요한지 알아야 한다.
그렇다면 SEO란 정확히 무엇일까? 그리고 우리의 웹 개발 접근 방식에 어떤 영향을 미칠까?

SEO란 무엇일까?

SEO는 Search Engine Optimization의 약자로, ‘검색 엔진 최적화’라고 한다. 이는 웹사이트나 웹페이지가 검색 엔진 결과 페이지(SERP)에서 더 높은 순위에 노출되도록 최적화하는 과정을 말한다.

검색 엔진 결과 페이지, 즉 Search Engine Result Page는 사용자가 검색어를 검색 엔진에 입력한 후 보게 되는 페이지를 말한다. 아래와 같은 사진이 그에 해당 된다!

serp

이 SERP에서 파란색 박스의 Ad 또는 스폰서라는 광고 라벨이 노출되는 링크는 Paid Search Result라고 하는데, 인터넷으로 찾아보면 Non-organic Search 라고도 하는 것 같다. 자연적으로 노출된 빨간색 박스의 링크들은 Organic Search Result이다.

유료 광고가 아닌 사용자가 검색엔진을 통해 직접 검색하여 자연스럽게 유입된 트래픽이 오가닉 트래픽(Organic traffic)인데, 이런 오가닉 트래픽은 SEO를 통해 한 번 만들어 놓으면, 비용을 쓰거나 콘텐츠를 더 발행하지 않아도 트래픽을 만들 수 있다.

구글 광고를 집행하면 트래픽이 발생하지만, 광고를 없애면 트래픽이 사라진다. 꾸준히 광고 비용을 내야 트래픽을 유지할 수 있다. 하지만 오가닉 트래픽은 아니다.

구글에 search engine optimization organic 을 검색 했을 때 나오는 ‘What is Organic Search?‘라는 글은 2022년 글임에도 불구하고 상위 노출이 되어 있다. 이렇게 SEO를 통해 오가닉 트래픽을 발생 시킬 수 있다.

organic-traffic

검색엔진은 어떻게 작동하는 걸까?

구글의 검색엔진이 어떤 원리로 동작하는지 알아보자면,

  1. 첫번째 단계는 크롤링으로, 웹에 어떤 페이지가 존재하는지 파악을 한다. 구글봇(웹 크롤러)를 통해 텍스트, 이미지, 동영상등의 웹 콘텐츠를 다운로드 한다.
  2. 두번째 단계로는 색인 생성으로, 페이지가 크롤링 되면 구글은 페이지의 내용을 파악하려고 한다. 이 때 <title> 요소 및 alt 속성, 그 외 콘텐츠 및 콘텐츠 태그와 속성을 처리하고 분석하여 대규모 데이터베이스인 구글 색인에 이 정보를 저장한다.
  3. 마지막으로 사용자가 검색어를 입력하면 구글 컴퓨터는 색인에서 일치하는 페이지를 검색한 다음 품질이 가장 높고 사용자의 검색어와 가장 관련성이 크다가 판단되는 결과를 반환한다.

SEO는 크게 세 범주로 나눌 수 있는데, 웹페이지 자체의 콘텐츠와 HTML 코드를 최적화 하는 온페이지 SEO, 웹사이트 외부에서 이루어지는 최적화 활동인 오프페이지 SEO, 검색 엔진이 콘텐츠를 쉽게 크롤링하고 색인할 수 있도록 웹사이트의 기술적인 측면을 돋는 최적화 작업인 테크니컬 SEO가 있다.

이 세 가지 SEO 유형은 상호 보완적이며, 종합적인 SEO 전략을 위해서는 모두 고려하는 게 좋다.


온페이지 SEO

온페이지 SEO는 텍스트나 이미지, 비디오 등 웹사이트 내부 콘텐츠를 최적화하는 활동을 의미한다. 이러한 작업은 검색엔진이 웹사이트의 내용을 쉽게 이해할 수 있도록 돕는다. 온페이지 SEO에서 가장 중요한 것은 키워드 최적화이다. 특정 키워드를 웹페이지의 제목, 본문, 메타 태그 등에 포함 시키는 것은 검색엔진에게 해당 페이지의 내용을 명확하게 전달하는데 도움을 준다.

온페이지 SEO을 위한 방법은 무엇이 있을까?


헤더 태그 사용

헤더 태그는 페이지의 제목을 지정하는데 사용하는 HTML 요소이다.

<h1>페이지 제목</h1>

<h2>에서 <h6>태그까지 가는 하위 제목도 있지만, 이 모든 것을 한 페이지에 사용할 필요는 없다. 헤더 태그의 계층 구조는 중요도에 따라 <h1>에서 <h6>태그까지 내림차순으로 진행된다.

각 페이지에는 페이지의 주요 주제를 설명하는 고유한 <h1>이 있어야 한다.

<h1>초보자를 위한 홈 가드닝 팁</h1>

<h2>실내 식물 기르기</h2>
  <h3>광량에 따른 식물 선택</h3>
  <h3>적절한 물주기 방법</h3>

<h2>베란다 채소 재배</h2>
  <h3>작은 공간에 적합한 채소</h3>
  <h3>용토 준비와 파종</h3>

예를 들어 위의 페이지의 주제는 <h1>에 소개되고, <h2>는 주요 섹션에 사용된다. <h3>는 각 섹션의 구체적인 내용을 나타낸다.


내부 링크 최적화

내부 링크는 같은 웹사이트 내의 다른 페이지로 연결되는 링크를 말한다. 내부 링크는 웹사이트의 페이지 간 관계를 명확히 하여 검색 엔진이 사이트 구조를 이해하는 데 도움을 준다.

내부 링크를 최적화하기 위해선,

콘텐츠 흐름에 맞게 자연스럽게 링크를 삽입한다. 드롭다운과 같은 클릭이 필요한 링크가 만약 웹사이트 내부 페이지로 가는 유일한 링크라면 해당 페이지를 색인화 하는데 문제가 있을 수도 있다. 이러한 경우엔 페이지에서 직접 엑세스할 수 있는 링크가 필요하다.

앵커 텍스트는 페이지의 콘텐츠와 관련하여 검색엔진에 신호를 보낸다. 예를 들어, “여기를 클릭하세요” 대신 “홈 가드닝 초보자 가이드”와 같이 구체적인 텍스트를 사용한다. 링크의 목적지 페이지 내용을 정확히 설명하는 앵커 텍스트를 사용하자.

<a href="http://www.example.com/"></a>
<a href="http://www.example.com/" title="홈 가드닝 초보자 가이드">홈 가드닝 초보자 가이드</a>

한 페이지에 너무 많은 링크를 넣으면 각 링크의 가치가 희석될 수 있다. 필요한 곳에만 적절히 링크를 사용하자.

내부 링크는 SEO의 중요한 요소지만, 과도하게 사용하거나 무관한 콘텐츠에 링크를 거는 것은 오히려 역효과를 낼 수 있으니 주의해야 한다.


이미지 최적화

이미지는 느린 웹페이지의 가장 큰 원인이다. 이를 해결하는 가장 좋은 방법은 이미지를 압축하는 것이다. 이미지 압축에 있어서는 모든 사람에게 맞는 단일 방법은 없지만, 포토샵에서 ‘save for web’ 옵션, 이미지 크기 조정, imageoptim for Mac 과 같은 압축 도구와 같은 다양한 옵션을 테스트하고 어떤 것이 가장 잘 작동하는지 평가하는 게 최선의 방법이다.

또 다른 방법은 올바른 이미지 형식을 선택하는 것이다.

이미지 관련하여 중요한 것이 하나 더 있다. 이미지 내의 대체 텍스트이다! 이는 웹 접근성의 원칙이며, 화면 판독기를 통해 시각 장애인에게 이미지를 설명하는데 사용된다. 시각 장애인이 웹사이트의 그림이 무엇을 묘사하는지 이해할 수 있도록 대체 텍스트 설명을 하는 것이 중요하다.

검색엔진 봇은 이미지를 잘 이해하기 위해 대체 텍스트를 크롤링하여 검색엔진에 더 나은 이미지 컨텍스트를 제공하는 추가 이점도 제공한다.

<!-- 좋지 않은 예 -->
<img src="tomato-plant.jpg" alt="토마토, 토마토 식물, 가정 재배, 채소 가꾸기, 유기농 토마토">

<!-- 좋은 예 -->
<img src="tomato-plant.jpg" alt="햇빛 가득한 정원에서 자라는 건강한 토마토 식물">

제목 태그 최적화

페이지의 <title> 태그는 특정 웹페이지의 제목을 지정하는 설명적 HTML 요소이다. 각 페이지 헤드 태그 내에 중첩되며 다음과 같다.

<head><title>예시 제목</title></head>

웹사이트의 각 페이지에는 고유하고 설명적인 <title> 태그가 있어야 한다. 타이틀 태그 필드에 입력한 내용은 검색 결과에 표시되지만, 어떤 경우네는 구글에서 타이틀 태그가 검색 결과에 표시되는 방식을 조정할 수 있다.

title-page

웹 브라우저에서도 아래와 같이 나타날 수 있다.

title-page-2

효과적인 <title> 태그는 무엇일까?


메타 태그

<title> 태그와 마찬가리고 메타 태그는 해당 페이지의 내용을 설명하는 HTML 요소이다. 또한 head 태그에 중첩되어 있으며 다음과 같다.

<head>
<meta name="description" content="페이지 설명이 입니다."/>
</head>

이렇게 설명 필드에 입력한 내용은 다음과 같이 표시된다.

title-page

효과적인 메타 설명을 구성하기 위해선 어떤 요소가 필요할까?

그 외 open graph에 관련된 메타 태그도 지정해주는게 좋다.

Open graph란?

kakao 
<meta property="og:type" content="website">
<meta property="og:url" content="웹사이트 URL">
<meta property="og:title" content="타이틀">
<meta property="og:image" content="미리보기에서 보여질 이미지 URL">
<meta property="og:description" content="해당 페이지의 설명">
<meta property="og:site_name" content="사이트 명">

프로토콜: HTTPS

구글은 모든 웹사이트에 보안 프로토콜(https)를 사용할 것을 권장한다. URL이 http:// 대신 https:// 프로토콜을 사용하도록 하려면 SSL(Secure Sockets Layer) 인증서를 받아야 한다. SSL 인증서는 데이터를 암호화하는데 사용된다. 구글 크롬은 모든 http 사이트에 대해 ‘주의요함’를 표시하여 방문자에게 신뢰할 수 없는 사이트로 보이고 사이트를 떠나게 할 수 있다.

not-secure

테크니컬 SEO

테크니컬 SEO는 검색 엔진 최적화 작업에서 기술적으로 해결해야 하는 여러 가지 요소들을 아우르는 용어이다. 이는 한 번에 해결되는 것이 아니며 콘텐츠를 작성하고 발행하며 중간에 발견되는 기술 사항들을 지속적으로 개선하려고 노력해야 한다.


웹 사이트 측면

HTTP 응답 상태 코드

HTTP 응답 상태 코드는 클라이언트가 보낸 HTTP 요청에 대한 서버의 응답을 나타낸다. 테크니컬 SEO 진단 시에 페이지 응답 상태를 확인하는 것이 중요하다. 페이지 상태 코드에 따라 부정적인 영향을 미칠 수 있기 때문이다.

이 응답 상태 코드에서 SEO에 영향을 미치는 코드로는,

  1. 301(Moved Permanently) / 302(Moved Temporarily)

301와 302를 통해 리다이렉션을 할 수 있는데, 이는 보통 웹사이트를 새로운 도메인으로 옮겼거나 페이지 주소가 바뀌었을때, 이용자들을 하여금 변경된 주소로 자동으로 옮겨가게 만드는데 사용된다.
301은 영구 리디렉션이라고 부른다. 이는 요청된 URL이 영구적으로 다른 위치에 이동했음을 표시한다. 예를 들어 www.example.com/old에서 www.example.com/new로 이동을 했다고 하면 www.example.com/old는 없는 사이트로 취급하여 앞으로의 SEO 수집은 www.example.com/new에서 하겠다는 걸 의미한다.
이러한 영구 리디렉션을 이용하면, 포털 검색에 이전 URL을 없애주고 새 URL을 표시하게 해주고 링크 신호를 통합해주기 때문에 이전 URL의 백링크들을 새 URL를 직접 가리키는 것처럼 통합시켜 준다.
302는 일시 리디렉션이라고 한다. 요청된 URL이 임시적으로 다른 위치로 이동했음을 나타내고, 검색엔진은 보다 오랜 기간이 지난 후에 영구 리디렉션으로 처리할 수 있다. SEO 측면에서는 페이지 위치 변경이 일시적이어서 URL이 다시 회귀하는 경우에는 페이지 순위 및 링크에 대한 점수를 잃게 되므로 301 코드를 사용하면 안되고, 반대로 지속적인 리디렉션은 301이 권장된다.


  1. 404(Not Found)

404 Not Found 상태 코드는 클라이언트가 서버와의 통신은 가능하지만 요청한 페이지나 파일을 해당 서버에서 찾을 수 없을 때 발생한다.404 에러 코드는 개발자나 서버 유지보수 담당자의 실수로 인해 콘텐츠가 삭제되었을 때도 발생할 수 있는데, 삭제된 콘텐츠의 URL은 검색 엔진의 색인에서 제거되므로 해당 페이지는 더 이상 검색 결과에 나타나지 않는다. 구글은 404 에러가 SEO에 직접적인 영향을 미치지 않는다고 설명하고 있지만(link), 사용자 경험과 웹사이트 신뢰도에 부정적인 영향을 줄 수 있으므로 빠른 조치가 필요하다.


  1. 500(Internal Server Error), 502(Bad gateway)

500번대의 코드는 클라이언트가 아닌 서버에서 발생한 오류를 나타낸다. 이러한 오류는 서버가 요청을 처리할 수 없어 페이지를 올바르게 표시하지 못할 때 발생하며 일반적으로 서버 구성 오류로 인해 발생한다. 서버 오류가 계속 발생하고 지속되는 경우에는 검색 엔진이 해당 페이지를 신뢰할 수 없다고 판단하여 색인에서 삭제할 가능성이 있으므로 서버 상태를 지속적으로 모니터링하고 오류를 신속하게 해결해야 한다.


검색엔진 측면

Sitemap

사이트맵은 웹사이트 내 중요한 페이지 정보와 구조를 빠르고 쉽게 이해할 수 있도록 정리한 XML 형식의 파일을 말한다.

사이트맵은 왜 필요한 걸까?

사이트맵은 XML, RSS, Text 형식으로 구성할 수 있는데, 특징은 아래와 같다.


XML

장점

단점


RSS / mRSS / Atom 1.0

장점

단점


Text

장점

단점

일반적인 XML 형식은 아래와 같다.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.example.com/foo.html</loc>
    <lastmod>2022-06-04</lastmod>
  </url>
</urlset>

sitemaps.org에서 더 구체적인 예시를 확인할 수 있다.


Robot.txt

테스트 페이지와 같이 사이트 소유자가 크롤링을 허용하지 않는 페이지도 있고 사이트에 로그인해야 액세스할 수 있는 페이지 등 크롤러는 발견한 페이지를 모두 크롤링하는게 아니다. Robot.txt는 크롤러가 사이트의 어느 부분에 액세스할 수 있는지에 관한 규칙이 포함된 텍스트 파일을 말한다.

robot.txt의 역할은?

일반적인 robot.txt 형식은 아래와 같다.

User-agent: Googlebot
Disallow: /nogooglebot/

User-agent: *
Allow: /

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

위 파일의 의미는


사용자 경험 측면

HTML 태그

만약 다국어 페이지에서 디폴트 언어가 지정되지 않았다면, 스크린 리더는 사용자가 설정한 기본 언어로 페이지를 해석한다. 이 경우, 유저들은 번역된 페이지를 읽을 때의 어색함을 느낄 수 있으며, 언어의 부자연스러움으로 인해 페이지를 빠르게 떠날 수 있다. 이는 사용자 경험에 부정적인 영향을 끼진다.

<lang>태그는 HTML 구조 내에 삽입되며 아래와 같이 사용된다.

<html lang="ko">

모바일 방문자에게 긍정적인 경험 제공

오늘날 모든 웹 트래픽의 절반 이상이 모바일에서 발생하므로 모바일 방문자가 웹사이트에 쉽게 접근하고 탐색할 수 있어야 한다. 구글은 모바일 친화적인 페이지를 비모바일 친화적인 페이지보다 홍보하는 알고리즘을 업데이트를 출시하기도 했다. 이렇게 구글은 반응형 웹디자인을 권장하고 있다.

  1. 반응형 웹 디자인

반응형 웹사이트는 방문자가 사용하는 모든 유형의 기기 화면에 맞게 설계되었다 이는 방문자가 페이지의 콘텐츠를 보기 위해 두 번 탭하거나 핀치 앤 줌을 할 필요가 없기 때문에 이상적이다. 구글의 모바일 친화적 테스트를 사용하여 확인할 수 있다.

  1. 모바일 우선 색인 (MFI, Mobile First Index)

구글에서 색인을 생성하고 순위를 지정하는데 스마트폰 에이전트로 크롤링된 모바일 버전의 콘텐츠를 우선적으로 사용한다. 이러한 모바일 친화적인 사이트를 만들기 위해선 위에서 말했던 것과 같이 반응형 웹 디자인이 필요하고, 각 기기 및 변도 URL에 따른 다른 HTML의 게재를 권장한다.

이렇게 SEO에 대해서 알아봤는데, 찾아보면서 ‘사용자 경험’이라는 키워드가 많이 나와서 검색엔진 최적화에는 사용자 경험이 매우 중요한 요소임을 깨달았다. 실제로 구글은 2021년부터 ‘페이지 경험’을 랭킹 요소로 포함시키기 시작했는데, 이는 SEO가 단순히 검색 엔진을 위한 최적화가 아니라 궁극적으로 사용자를 위한 최적화임을 보여준다.

사용자 경험과 SEO는 다음과 같은 방식으로 밀접하게 연결되어 있다.

이러한 요소들을 고려하면, SEO는 단순히 검색 엔진을 위한 기술적인 최적화가 아니라 전반적인 웹사이트의 품질과 사용성을 향상시키는 과정임을 알 수 있다. 결국, 좋은 SEO 전략은 사용자에게 최상의 경험을 제공하는 것을 목표로 해야 한다.

SEO의 범위가 이렇게 방대하고 복잡하다는 것을 이번 조사를 통해 깨달았다. 기술적인 측면에서부터 콘텐츠 전략, 사용자 경험 디자인에 이르기까지 다양한 분야의 지식이 필요하다. 또한, 검색 엔진의 알고리즘이 계속 변화하기 때문에 SEO는 지속적인 학습과 적응이 필요한 분야라는 것도 알게 되었다.

앞으로 웹 개발을 하면서 SEO를 단순히 부가적인 요소가 아닌 핵심적인 고려사항으로 삼아야겠다고 생각했다. 특히 사용자 경험을 중심에 두고, 기술적인 최적화와 고품질의 콘텐츠 제공을 균형 있게 추구해야겠다. 이를 위해 웹 성능 최적화, 접근성 향상, 콘텐츠 전략 등에 대해 더 깊이 공부할 필요가 있을 것 같다.