SEO (검색엔진 최적화)

SEO ( Search Engine Optimization )

• 내가 만든 사이트를 구글이나 네이버같은 포털 사이트에 더 잘 검색되게 하는 법

🔎 SEO 방법

1. pre-rendering

빌드할 때 미리 특정 페이지를 렌더링해서 html 파일을 만들어 두는 것

• 첫번째 요청에서 그대로 전송되는 정적인 파일만을 가져오는 것

• 서버 측 데이터는 없다.

• react-snap 라이브러리를 이용해서 사용할 수 있다.

2. SSR ( 서버 사이드 렌더링 )

서버에서 사용자에게 보여줄 페이지에 필요한 데이터를 가지고 와 미리 채운 다음에 페이지를 로드하는 방식

• 서버에서 페이지를 구성하기 때문에 클라이언트에서 페이지를 구성하는 CSR보다는 페이지 구성 속도가 느리지만, 전체적으로 사용자에게 보여주는 컨텐츠 구성 속도는 더 빠르다.

• CSR은 데이터없이 화면만 받고 데이터 로딩창을 띄우면서 백엔드에 데이터를 요청해 화면을 렌더링한다.

• 결국 페이지에 로딩창만 있기 때문에 검색엔진이 상위에 잘 노출시키지 않는다.

3. title 태그

브라우저 탭에 표시되는 페이지의 타이틀

• html 내 head 태그의 자식 요소

• JS를 이용해서 각 세부 페이지마다 동적으로 타이틀이 바뀔 수 있다.

• 최대한 핵심만을 넣어 간결하게 쓴다.

4. meta 태그

<meta charset="UTF-8">

• 한글을 포함해 모든 언어를 해당 웹페이지에 표현할 수 있다.

<meta name="description" content="검색엔진 최적화(SEO) 방법">

• name="description"을 통해 웹페이지에 대한 설명을 쓴다

5. 반응형 웹

• 모바일 사이트와 웹 사이트를 나눠서 관리하기 보다 동일한 URL을 사용하는 하나의 웹 사이트를 만들어서 사용하면, 그만큼 사용자들이 분산되어 검색하는 것이 아니라 한 사이트에 몰리면서 이용하게 된다.

• 많은 사용자들이 검색하고 사용할수록 검색엔진에 선택되기 쉽다.

• meta name="viewport"를 사용함으로 모바일에 최적화 되어있음을 알리는 것도 좋은 방법이다.

6. semantic 태그

• 제목 같은 경우는 h1 태그를 사용하고 img 태그를 사용할 때는 alt를 사용해서 이미지에 대한 설명을 붙여준다.