SEO를 알고 나의 성공시대 시작됐다​

안녕하세요 SOPT 36기 웹 YB 김예지입니다. 

오늘은 내가 만든 웹 사이트를 더 많은 사람들에게 뽐내서 성공시대 시작할 수 있게 도와주는 SEO에 대해 소개해보려 합니다. 

 

 

SEO란?

SEO(Search Engine Optimization)는 검색 엔진에서 웹사이트의 노출을 높이기 위한 최적화 기법입니다.

 

다시 말해, 검색 엔진이 좋아하는 구조와 요소를 갖춘 웹 사이트 를 만들어 검색 결과를 통해 트래픽의 양과 질을 높이는 작업입니다. 

 

SEO는 왜 중요할까요?

검색 결과 상단에 노출 되기 때문에 사용자의 방문자수를 늘릴 수 있고, 광고 없이도 꾸준한 트래픽을 확보할 수 있습니다. 

광고 섹션이 아닌 순수 검색 결과 부분의 상단에 위치하기 때문에 사이트의 신뢰도를 향상시킬 수도 있습니다. 

 

 

Google에서 자바스크립트를 처리하는 방식

많이 사용하는 Google을 기준으로 자바스크립트를 어떻게 처리하는지 살펴보겠습니다. 

1. Googlebot이 URL을 크롤링 대기열에 추가

2. robots.txt로 크롤링 가능 여부 확인

3. meta 태그 등으로 색인 허용 여부 파악

4. HTML을 분석하며 <a href>에 있는 링크들을 계속 크롤링

5. 렌더링 엔진이 자바스크립트 실행 후 최종 HTML 생성

6. 이 렌더링된 HTML을 바탕으로 색인(검색엔진 DB에 저장)

 

참 신기합니다. 무심코 흘겨보던 robots.txt 친구의 어마무시한 역할을 알 수 있었습니다 🤔 .

 

 

 

웹 개발자가 챙겨야 할 주요 SEO 요소

내가 개발한 웹이 검색 상단에 뜨도록 아름다운 요소와 구조를 갖춘 페이지를 만들기 위해 아래와 같은 요소들을 챙겨가면 좋을 거 같습니다.

 

 

1. title태그 

<title>스웹 팀 블로그</title>

 

title 태그는 각 페이지마다 고유하게 작성하고, 키워드를 포함하며 간결한 문장으로 작성하는 것이 좋습니다. 

 

 

2. meta description, meta keyword

<meta name="description" content="36기 SOPT WEB 파트 팀 블로그입니다.">

<meta name="keyword" content="IT, 스웹, 개발, WEB, 동아리, 팀블로그, SOPT">

페이지에 대한 간단한 설명으로 검색 결과에 미리보기로 보여집니다. keyword는 요즘 영향이 줄었다고는 하지만 작성해두면 검색 키워드에 걸릴 수 있기 때문에 작성하는 것이 좋습니다. 

 

 

3. 시멘틱 태그 

무의미한 무한 div 지옥보다 구조적 형태를 띄우는 시멘틱 태그를 사용하면 크롤러가 페이지 구조와 콘텐츠를 이해하는 데 도움을 줄 수 있습니다. 

(<header>, <main>, <article>, <aside>, <section>, <p>, <footer>, <a> ..) 

 

 

4. <h1> 태그

검색 엔진은 h1 태그를 통해 페이지의 주요 주제를 파악하기 때문에 한 페이지에 딱 한 번! 핵심 내용을 간결하게 나타내는 것이 좋습니다. 

 

 

5. 이미지 최적화 

불필요하게 큰 이미지는 webp 등의 포맷을 활용하면 화질 손실을 최소화하며 용량을 줄일 수 있습니다. 

또한, 지연로딩 기법을 사용하여 초기 로딩 속도를 개선할 수 있습니다. 

 

 

6. HTTPS 적용하기 

같은 사이트 주소일 때, http 보다 https 보안 프로토콜을 사용하는 사이트에 SEO 점수를 추가 부여하기 때문에 https를 적용하는 것이 좋습니다. 

 

 

7. 로딩 속도 최적화 

로딩 속도는 직접적인 SEO 영향 요소 이기 때문에 Lighthouse 검사를 통해 성능을 개선할 수 있는 지점들을 찾아 불필요한 JS/CSS 지우기, 코드 압축, 텍스트 압축 등으로 로딩 속도를 개선하는 것이 좋습니다. 

 

 

8. SSR 도입하기 

CSR(Client Side Rendering)은 브라우저에서 자바스크립트를 실행해 화면을 구성하는 방식입니다. 이 경우, 자바스크립트가 실행되기 전까지는 화면에 아무것도 없기 때문에 Googlebot이 HTML 구조를 제대로 읽지 못하는 경우가 생길 수 있습니다.

 

하지만 SSR(Server Side Rendering)은 서버에서 HTML을 미리 완성해서 브라우저로 전달하기 때문에, 검색 엔진이 자바스크립트를 실행하지 않아도 콘텐츠를 바로 읽을 수 있습니다.

 

 

9. 반응형 디자인 

모바일 기기에서 잘 보이지 않는 웹 사이트는 검색 엔진에게 감점 요소가 되기 때문에 viewport 설정을 통해 기기 대응을 해주는 것이 좋습니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

 

 

10. 접근성 

스크린 리더, 보이스 오버 등을 위해 접근성 태그를 신경써주는 것도 중요합니다. 

이미지에 alt 속성을 추가하여 이미지에 대한 대체 텍스트를 제공하거나, form 요소에 label 을 사용하여 입력 필드를 설명하는 텍스트를 제공하는 것이 좋습니다. 

 

https://validator.w3.org/ 사이트에서 HTML 코드가 웹 표준과 접근성에 맞는지 확인할 수 있다고 합니다 ㅎㅎ. 

 

 

마무리 

SEO는 단순히 검색 결과에 노출되기 위한 기술이 아니라, 사용자에게 더 좋은 웹 사용 경험을 제공하기 위한 노력이기도 합니다.

SEO를 알고 나의 성공시대 시작 될 수 있도록 개발하는 과정에서 슬쩍슬쩍 신경 써보면 좋을 거 같습니다 ^_^