SEO
-
[Next.js] SEO - 6. Monitoring your Core Web Vitals공부 2021. 11. 9. 15:28
사이트 최적화를 하면, 계속해서 반복할 수 있도록 프로덕션 중에 모니터링 하는 것이 중요하다. Core Web Vitals을 모니터링 할 때, 일회성 랩 테스트에 의존하는 것보다 시간 경과에 따른 추적이 핵심이다. Next.js Analytics Next.js Analytics는 Core Web Vitals를 사용하여 페이지의 성능을 측정하고 분석한다. Vercel 배포에서 구성 없이 Real Experience Score를 수집할 수 있고, 자체 호스팅하는 경우 분석에 대해서도 지원한다. Custom Reporting 또한 Next.js Analytics에서 사용하는 내장 relayer를 사용하여 데이터를 사용자 자신의 서비스로 전송하거나 Google Analytics에 푸시할 수도 있다. 이제 이것을..
-
[Next.js] SEO - 3. Rendering and Ranking공부 2021. 11. 3. 16:12
JavaScript는 웹 개발 생태계의 중요한 부분이다. 과거에는 대부분의 프로그래밍 언어가 모든 콘텐츠를 서버에서 직접 전송했다. JavaScript와 같은 기술을 통해 브라우저에서 정보를 가져오는 것이 그 어느때보다 대중화 되었다. 이는 대부분의 봇이 서버에서 초기 HTML만 분석하고 브라우저로 로드하기 때문에 검색 엔진과 페이지를 이해하는 능력에 영향을 미쳤다. Rendering Strategies 1. Static Site Generation (SSG) Static site generation은 빌드 시 HTML이 생성되는 곳이며, 이 HTML은 각 요청에 사용된다. Static site generation은 사전 렌더링 되기 때문에 페이지 로드에 모든 HTML이 있을 뿐만 아니라 페이지 성능에도..
-
[Next.js] SEO - 1. Introduction to SEO공부 2021. 11. 1. 16:26
SEO는 검색 엔진 최적화(Search Engine Optimization)를 의미한다. SEO의 목표는 검색 엔진 결과에서 순위를 높이는 전력을 만드는 것이다. 순위가 높을수록 사이트에 더 많은 유기적 트래픽이 발생하여 궁극적으로 더 많은 비즈니스로 이어진다. Why is SEO so important? SEO는 브랜드에 대한 전환율과 자신감을 높이는 열쇠이다. 더 높은 검색 순위 배치는 더 많은 유기적 방문자와 동일하다. 검색 엔진 유기적 트래픽(검색 엔진에서 결과를 클릭하여 사이트를 방문하는 방문자)은 다음 세가지 이유로 많은 비즈니스의 핵심이다. 질적으로 - 방문자가 고객으로 전환될 가능성이 높아진다. 신뢰할 수 있는 - 브랜드 또는 사명에 대한 더 높은 자신감 저비용 - 소요된 시간과 노력을 제..
-
[Next.js] 1. Create a Next.js App공부 2021. 10. 21. 22:56
1. yarn으로 react 시작하기 yarn create next-app 프로젝트명 yarn add next react react-dom 2. Next.js에서 페이지들은 파일 이름에 따라 라우팅 되기 때문에 pages 라는 디렉토리(폴더)가 반드시 필요함 mkdir pages 3. pages 디렉토리 아래에 index.js파일 만들기 // 예시 import Head from "next/head"; import Link from "next/link"; export default function Home() { return ( Read{" "} this page! Get started by editing pages/index.js ); } 3. packages.json 파일 수정 "scripts": { ..
-
[React] 검색엔진 최적화(SEO)공부 2021. 9. 30. 17:38
React는 SPA로 HTML이 하나이며, CSR(클라이언트 사이드 렌더링)을 하기 때문에 렌더링(자바스크립트 실행)이 되기 전까지는 껍데기 HTML만 나오므로 검색 엔진 최적화가 어려움. meta tag HTML의 head부분에 있는 를 활용. React는 정적 페이지가 index.html 하나이므로 페이지별로 메타태그를 적용하려면 라이브러리 사용. 라이브러리 react-helmet 설치. (yarn add react-helmet) 적용하고 싶은 페이지로 가서 Helmet import하고, 안에 child로 넘겨주고 싶은 메타태그 작성. // 예시 const One = () => { return ( page one ) } pre-rendering 빌드 시 미리 특정 페이지를 렌더링 해서 html파일을 ..