seo
-
Next.js로 SEO 최적화하기Next.js 2024. 6. 26. 13:23
Next.js는 빠르고 SEO 친화적인 React 애플리케이션을 구축하기 위한 강력한 프레임워크입니다.서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG) 및 동적 라우팅과 같은 기능을 활용하면 사이트의 SEO 성능을 크게 향상할 수 있습니다.SEO 최적화를 위한 주요 기능1. 서버 사이드 렌더링(SSR)SSR은 페이지를 서버에서 렌더링 하여 검색 엔진에 사전 렌더링된 HTML을 제공합니다.이는 인덱싱을 개선하고 검색 엔진이 콘텐츠를 쉽게 이해하고 순위를 매길 수 있도록 합니다.export async function getServerSideProps() { // API에서 데이터 가져오기 const res = await fetch('https://api.example.com/data'); con..
-
메타 태그 중복 생성 방지하기Tip 2022. 10. 27. 16:10
웹 사이트를 제작할 때 기본적으로 전체 웹 페이지에 적용되는 메타 태그를 동적인 주소와 같은 페이지에 접속했을 때만 변경해야 되는 상황이 있습니다. Next.js의 경우 Head태그를 이용해 간단히 변경하고자 하는 페이지에서 다른 메타 태그를 추가해 줄 수 있지만, 이렇게 될 경우 메타 태그가 중복하여 들어가는 문제가 발생합니다. 이를 해결하는 방법은 무척 간단합니다. 바로 변경이 일어날 수 있는 메타 태그에 key 값을 추가해 주는 것으로 간단하게 해결할 수 있습니다. // app.tsx // posts/[id].tsx 이렇게 설정하면 아래와 같이 간단하게 변경할 수 있다.
-
NextJS Data Fetching (feat. CSR, SSR, SSG, ISR)Next.js 2022. 8. 29. 16:43
1. Data Fetching이란 SPA가 Web 세상에서 새로운 시대를 열었다는 것에 의문을 제시할 사람은 없을 것이다. 기존에 페이지를 이동할 때마다 새로고침이 되며 빈 화면을 봐야 했던 이용자들은 이제 로딩이 없는 것과 비슷한 환경에서 사이트를 사용할 수 있게 되었기 때문이다. 이는 확실히 획기적이었고 대다수의 웹사이트가 이제는 SPA로 되어있고 변화하고 있다. 하지만 SPA에도 치명적인 문제가 있었다. 웹사이트의 운영자들은 어떻게든 네이버나 구글 등의 검색 결과에 자신의 웹사이트가 노출되기를 원하는데 SPA의 경우 페이지를 모두 그린 뒤 데이터를 가지고 오는 CSR방식이 기본이기에 검색 사이트들의 Bot이 웹사이트에 접속했을 때 아무것도 없는 빈 페이지로 판별해 버렸기 때문이다. (물론 최근 구글..
-
NextJS 사이트맵(Site Map) 만들기Next.js 2022. 7. 14. 16:47
(해당 글은 next@12.2 next-sitemap@3.1을 바탕으로 작성되었습니다.) 1. Site Map은 왜? 모든 게 다 좋아 보이는 NextJS를 사용할 때 문제가 되는 부분이 있다. 바로 사이트맵을 생성하는 일이다. 물론 사이트맵을 생성하지 않는 방법도 있다. 실제로 구글에서는 아래와 같이 사이트 맵의 필요성을 정의하고 있다. 매우 큰 사이트. 크기로 인해 Google 웹 크롤러가 신규 또는 최근에 업데이트된 페이지를 지나칠 수 있습니다. 서로 잘 연결되지 않거나 전혀 연결되지 않는 콘텐츠 페이지를 보관 처리하는 대규모 자료실이 있는 사이트. 사이트 페이지가 서로 자연스럽게 참조되지 않는 경우 페이지를 사이트맵에 표시하면 Google이 일부 페이지를 누락하는 일이 생기지 않습니다. 연결되는 ..