서론
웹 개발을 공부하면서 느끼는 점은 사용자의 경험이 제일 중요하다는 것이다.
사이트 이용을 하는데 어려움이 있고, 속도가 느리다면 사용자의 이탈율은 당연이 높을 것이다.
하지만 사용자 경험보다 더 중요한 것은 검색 사이트 상위 노출이라고 생각한다.
아무리 사용자 경험과 로딩 속도를 개선해도 사이트를 상위 노출시키지 못한다면 내가 개발한 홈페이지를 보여줄 수가 없다.
그래서 이번 프로젝트에는 기업의 홈페이지가 검색 사이트 상위 노출을 할 수 있도록 검색엔진 최적화에 중점을 두었다.
검색엔진 최적화(SEO)란?
검색엔진 최적화(SEO)란 관련성이 높은 트래픽을 더 많이 유도하기 위해 검색엔진에서의 웹사이트 페이지 검색 가능성을 향상시키는 프로세스이다. - 구글 검색 센터
간단한 SEO 체크리스트
Title, Meta 태그
<meta name="description" content="..." />
<meta name="keywords" content="..." />
<title>제목</title>meta 태그는 페이지의 설명을 제공하거나 주요 키워드를 설정하는 태그이고,
title 태그는 페이지의 제목을 설정한다. description과 title은 브라우저 탭에 표시되며, 검색 엔진 결과에서도 제목으로 사용된다.
이 두 태그는 SEO에 가장 중요한 태그이다.
Alt 속성
<img src="image.jpg" alt="이미지 설명 대체 텍스트" />alt 속성은 이미지에 대한 설명을 적는 속성이고, 이미지 태그를 사용할 때 웹접근성을 위해 꼭 필요하다.
검색 엔진은 이미지의 내용이나 의미를 이해할 수 없으므로, alt 속성을 사용해서 대체 텍스트를 넣는다면 검색 엔진이 페이지의 콘텐츠를 더 잘 이해하고, 이미지가 검색 결과에 나타나게 할 수 있다.
시맨틱 태그
<header>
<nav>
<section>검색 엔진은 의미론적 마크업을 페이지의 검색 순위에 영향을 줄 수 있는 중요한 키워드로 간주한다. - MDN
시맨틱 태그는 웹 페이지의 구조를 명확하게 정의하는 HTML 요소이며 웹접근성을 향상시킨다.
시맨틱 태그의 활용은 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 안내판으로 사용할 수 있다.
HTTPS 적용
구글은 https를 적용한 사이트를 상위 노출시킨다.
https를 적용시킨 사이트에 높은 접수를 주는 가장 주된 이유는 보안이라고 한다.
또한 구글은 보안이 가장 핵심적인 원칙이라고 하니 https는 필수적으로 적용시켜야 한다.
https://korea.googleblog.com/2018/07/chrome-security.html
SSR 적용
React는 기본적으로 CSR이기 때문에 페이지의 내용을 자바스크립트를 사용하여 동적으로 로드한다. 이로 인해 초기 페이지 로드 시 컨텐츠가 제대로 표시가 안되어 검색 엔진이 제대로 크롤링하기 어려울 수 있다.
NextJS를 활용하면 다른 설정 없이 SSR로 페이지를 불러오기 때문에 SEO에 더 유용하다.
검색 상위 노출 확인
도움을 받은 블로그보다 많은 체크리스트를 적용하지 않았지만 상위에 노출되는 걸 확인할 수 있었다!
도움 받은 블로그
1. https://itconquest.tistory.com/entry/HTTPS와-SEO의-관계-SSL이-검색결과에-주는-영향
2. https://velog.io/@rnrn99/리액트-개발자를-위한-SEO-기초
