profile
프론트엔드개발자
post-thumbnail

Next에서 SEO 처리하기

1. 프롤로그 기업과 관계자들이 Next를 선호하는 이유에는 SEO도 포함된다 SEO가 왜? 🤔🤔🤔 2. SEO 검색 엔진 최적화(Search Engine Optimization)는 사이트를 검색 결과에 잘 노출될 수 있도록 하는 것인데 구글, 네이버와 같은 검색 엔진은 자체적으로 만든 검색봇을 이용해서 수 많은 웹페이지에서 검색 결과에 근접한 페이지를 최상위에 매칭해준다 3. NEXT-SEO Next는 기본적으로 SSR을 지원하기 때문에 _document.js로 <head>안에 공통으로 들어가는 <meta>를 지정해줄 수 있는데 문제는 페이지마다 다른 메타, OG(오픈그래프)태그로 나눠서 처리해야 할 경우가 생긴다 다행히도 SEO를 더 쉽게 관리해주는 라이브러리가 존재한다 > 🌱 설치 > > 설치가 완료되면 next-seo를

2022년 2월 21일
·
0개의 댓글
·
post-thumbnail

React에서 SEO 처리하기

1. 프롤로그 대다수의 개발자들에게 SPA의 단점이 무엇인가 물어보면 SEO를 많이 얘기한다 SEO가 왜? 🤔🤔🤔 2. SEO 검색 엔진 최적화(Search Engine Optimization)는 사이트를 검색 결과에 잘 노출될 수 있도록 하는 것인데 구글, 네이버와 같은 검색 엔진은 자체적으로 만든 검색봇을 이용해서 수 많은 웹페이지에서 검색 결과에 근접한 페이지를 최상위에 매칭해준다 3. Rendering 이때, 검색봇이 수집할 때 활용하는 것으로 웹 브라우저 기반 해석(렌더링)이 있다. > 대표적인 웹 브라우저 렌더링 방식 > > 1. Client-side rendering(CSR) > 1. Server side rendering(SSR) 핵심은 검색 엔진이 렌더링된 웹페이지를 해석할 때 자바스크립트를 사용하여

2022년 2월 18일
·
0개의 댓글
·