당신의 넥스트JS 웹사이트를 2022년에 더욱 친근하게 만드세요. 자동...

당신의 넥스트JS 웹사이트를 2022년에 더욱 친근하게 만드세요. 자동...

반응형

NextJS를 사용하여 다음 자바스크립트 웹 사이트를 개발하기로 선택했다면, 플레인 리액트(React)에 비해 이를 사용할 때의 SEO의 이점을 이미 고려했을 것입니다.

그런 생각을 못했거나 넥스트JS가 SEO를 어떻게 도울 수 있을지 궁금하다면, 이 포스트는 어느 정도 정리한다.

그래서, 단순히 NextJS에서 당신의 웹사이트를 만드는 것을 선택함으로써, 당신은 당신의 웹사이트의 잠재적인 검색 순위에 관한 한 이미 우위를 점하고 있다.

오늘은 한 단계 더 끌어올려 사이트맵을 추가해 넥스트JS 웹사이트의 SEO 친화성을 더욱 높일 수 있는 방법을 알아보려고 한다. 그리고 우리는 그렇게 하는 것이 얼마나 간단하고 쉬운지를 정확하게 살펴볼 것이다.

자, 이제 신선한 커피 한 잔을 끓이고 시작합시다.

먼저, 사이트맵이 정확히 무엇인가요?

간단히 말해서, 사이트맵은 당신의 웹사이트의 따라 하기 쉬운 청사진이다.

검색엔진의 주된 이점은 검색엔진을 위한 것으로, 검색엔진이 몇 가지 다른 것들을 기어 다닐 수 있도록 도와준다.

검색 엔진에게 웹 사이트의 어떤 페이지가 가장 중요한지, 즉 어떤 페이지가 다른 모든 페이지보다 우선되어야 하는지 알려줍니다.

그것은 검색 엔진이 당신의 웹사이트에서 찾을 수 있는 모든 것을 찾고, 기르고, 색인화하는 것을 돕습니다.

사이트맵을 웹 사이트를 탐색하는 로드맵으로 생각해 보십시오.

아니면 건물 디렉토리라고 생각해보세요.

거대한 사옥에 들어서면 로비에 당신을 위한 편리한 디렉토리가 있어 어떤 회사가 그 건물에 사무실을 가지고 있는지 정확히 알 수 있다. 그 사무실들은 몇 층에 있는지 알 수 있을 거예요. 때때로, 그것은 여러분이 가고 싶은 사무실에 도착하기 위해 어느 층의 엘리베이터에서 내리면 좌회전해야 하는지 우회전해야 하는지를 알려줄 것입니다. 그거 참 편리하네요, 그렇죠?

사이트맵이 바로 그거에요. 당신의 웹사이트의 개별 페이지는 다른 사무실입니다. 당신의 웹사이트는 전체적으로 사무실 건물입니다. 이 경우 방문자는 구글 검색 색인 크롤러입니다.

사이트맵이 무엇인지 또는 사이트맵이 있어야 하는 이유와 사이트맵을 만들 수 있는 다양한 방법에 대해 자세히 알고 싶다면 백링코의 이 자세한 게시물에 대한 항목을 읽어보십시오.

사이트맵 필요하세요?

NextJS 웹 사이트의 사이트 맵을 만드는 방법을 시작하기 전에 사이트 맵이 필요한지 여부에 대한 질문을 간단히 해결해 보겠습니다.

엄밀히 말하면, 당신의 웹사이트가 사이트맵을 가질 필요는 없다.

오늘날 검색 엔진은 상당히 강력한 웹 크롤러를 사용하여 컨텐츠를 찾고 인덱싱하며 분류하기도 합니다. 따라서 웹 사이트의 페이지가 적절하게 연결되어 있는 한 웹 크롤러는 전부는 아니더라도 대부분의 콘텐츠를 상당히 쉽게 찾을 수 있습니다.

그러므로, 당신의 웹사이트에 사이트맵이 없다면 그것은 거래를 깨는 것이 아니다. 하지만, 그것은 여전히 좋은 생각입니다. 결국, 만약 당신이 검색 엔진을 당신의 웹사이트를 더 나은 방법으로 탐색하도록 안내할 수 있다면, 왜 그것을 원하지 않겠는가? 사이트맵을 갖는 것에 단점이 없고, 잠재적인 상승세도 크다. 이제 NextJS 웹 사이트를 위한 웹 사이트를 만들어 보겠습니다.

그렇다면, NextJS 프로젝트에서 Sitemap은 어떻게 만들까요?

백링코 기사를 살펴봤다면 웹 사이트를 위해 만들 수 있는 사이트맵에는 네 가지 종류가 있다는 것을 알았을 것이다.

최소한 XML 사이트맵이 있어야 하며, 대부분의 웹 사이트에서 사이트맵만 있으면 됩니다. 그래서 그것이 바로 우리가 계속 집중할 수 있는 것이다.

이제 그만하고 NextJS로 돌아가자 NextJS를 사용하는 경우 페이지 개념에 이미 익숙할 것입니다. 이러한 구성 요소는 일종의 Responent 구성 요소일 뿐이며 애플리케이션 라우팅과 관련하여 어떻게 동작하는지 알게 되었습니다.

백링코 기사를 통해 https://ourdomain.com/sitemap.xml에서 사이트맵에 액세스할 수 있기를 원합니다.

그러면 페이지 폴더에 새 파일을 만들어 보겠습니다. 필요한 URL에서 액세스할 수 있도록 sitemap.xml.jsx라고 부릅니다.

sitemap.xml.jsx 파일에 넣을 코드는 다음과 같습니다.

이 구성 요소가 null을 반환하는 이유는 무엇입니까?

우리는 애플리케이션이 이 구성 요소에서 어떤 것도 렌더링하는 것을 원하지 않기 때문입니다.

여기서 getServerSideProps를 사용하는 것의 관련성은 무엇입니까?

sitemap url이 히트했을 때, 우리는 애플리케이션이 최신 정보로 응답하기를 원하며, 이것이 바로 getServerSideProps가 우리가 할 수 있는 일이다.

자세한 내용은 NextJS 설명서의 Data Fetching에서 확인할 수 있습니다.

그래서, 여기서 무슨 일이 벌어지는 거죠?

이 URL(https://ourdomain.com/sitemap.xml)에 액세스할 때마다 getServerSideProps 함수가 호출되고 사이트맵이 준비된 다음 응답으로 반환됩니다.

그것이 우리가 원하는 sitemap url과 그것이 어떻게 동작하기를 원하는 것이 바로 sitemap url의 동작 방식입니다. 이렇게 하면 언제 접근하든 간에 항상 가장 업데이트된 사이트 맵을 방문자(특히 검색 엔진 크롤러)에게 반환한다.

또한 헤더 타입은 일반 페이지가 아니라 XML 파일임을 명확히 나타내도록 설정하고 있습니다.

res.setHeader('Content-Type', 'text/xml');

사이트맵을 만드는 건

우리가 지금까지 한 모든 일은 설정 의 범주에 속합니다. 모든 것이 올바른 위치에 있는지 확인하고 올바른 데이터 가져오기 메커니즘을 배치했습니다.

이제 사이트맵을 실제로 만들 시간입니다.

우리는 웹사이트에 새로운 페이지를 추가할 때마다 수동으로 할 필요가 없도록 sitemap 생성 과정을 자동화하기를 원합니다.

그럼, 우리가 어떻게 해야 할지 봅시다.

NextJS 디렉터리 구조 활용

우리는 페이지 디렉토리가 자동으로 웹사이트의 페이지에 URL이 되는 리액트 구성 요소를 포함하고 있다는 것을 이미 알고 있습니다.

jsx는 https://ourdomain.com/about, 등에서 액세스할 수 있습니다.

이것은 우리가 실제 페이지의 URL을 동적으로 생성하기 위해 이용할 행동입니다.

웹 사이트 구조의 모든 동적 페이지를 관리합니다.

동적으로 생성되는 여러 페이지가 있을 수 있는 여러 가지 시나리오가 있습니다.

블로그 게시물일 수도 있어요.

웹 사이트에서 판매하는 개별 제품의 제품 페이지일 수 있습니다.

우리는 반드시 검색 크롤러가 이것들을 기어서 인덱싱할 수 있기를 바랍니다. 따라서 사이트맵에 모두 포함되어야 합니다. 그럼 어떻게 하죠?

이 작업은 두 가지 단계로 수행할 수 있습니다.

1단계. 데이터 가져오기

개별 블로그 게시물을 생각하든 제품 페이지를 생각하든 상관 없으며, 다른 무엇보다도 모든 블로그 게시물 또는 제품 목록을 가져오는 API 호출을 이미 사용하고 있을 것입니다. 우리는 여기서 동일한 API를 사용할 수 있습니다.

2단계. URL을 생성하는 중

1단계에서 데이터를 가져온 후 해당 데이터를 사용하여 이러한 블로그 게시물 또는 제품에 액세스할 수 있는 URL을 만드는 것은 올바른 URL 구조에 할당하기만 하면 됩니다.

코드는 다음과 같습니다.

페이지 디렉토리에서 관련 파일만 추가

이제 사이트맵에 모든 동적 비트를 추가했으므로 정적 비트를 포함시킬 차례입니다.

페이지 디렉터리에 있는 모든 파일을 사이트맵에 추가할 예정입니다.

하지만 기다려라!

sitemap.xml 파일 라우트를 sitemap에 포함하지 않는 것이 좋습니다.

우리는 또한 404.js를 사이트맵에 포함시키고 싶지 않다.

우리는 sitemap이 _app.js, _document.js, 그리고 api 폴더와 같은 사용자 지정 페이지도 무시하기를 원합니다.

그래서 우리는 이것들을 무시하고 페이지 폴더에 있는 다른 것들을 추가하는 코드를 작성하겠습니다.

이 모든 것을 통합하여 최종 sitemap.xml.js 파일을 작성합니다.

현재 sitemap.xml.js는 다음과 같습니다.

검색 엔진을 위한 사이트맵이 준비되어 있습니다.

사이트맵은 앞서 살펴본 대로 https://ourdomain.com/sitemap.xml에서 확인할 수 있습니다.

결론

사이트맵을 만드는 것은 의무사항은 아니지만 SEO에 많은 도움이 됩니다. 앞서 링크한 기사 백링코를 꼭 읽어보길 권합니다. 그러나 그렇지 않다면 사이트 맵을 최대한 활용하기 위해 알아야 할 몇 가지 사항이 있습니다.

항상. 항상 사이트맵을 한 번이라도 검토하여 모든 것이 제대로 되었는지 확인하십시오.

검색 엔진 크롤러가 웹사이트와 사이트맵을 찾을 때까지 기다릴 수 있습니다. 또는 Google 검색 콘솔 계정을 통해 수동으로 사이트맵을 Google에 제출할 수 있습니다. 저는 꼭 한 번쯤은 이걸 하는 것을 추천합니다. Google이 웹 사이트에서 다른 페이지를 보고, 취급하는 방법을 확인할 수 있습니다.

구글이 성공적으로 사이트맵 보고서를 인덱싱하면 당신은 사이트맵 보고서를 확인해야 합니다. 오류, 경고, 제외 사항 등을 계속 주시해야 합니다.

기본적으로 사이트 맵과 Google의 사이트 맵 처리 보고서를 확인하여 일반적으로 웹 사이트가 인덱싱되는 방식에 문제가 있는지 확인할 수 있습니다. 이렇게 하면 콘텐츠의 검색 능력에 해를 끼치기 전에 앞서서 문제를 해결하는 데 도움이 됩니다.

사이트맵의 URL에는 일반적으로 마지막 수정 필드가 있습니다.

방금 작성한 코드에는 없지만, 베스트 프랙티스가 맞습니다. 이렇게 하면 페이지가 업데이트되는 시기와 빈도를 Google에 표시하며, 다시 색인화해야 합니다.

내용이 크게 변경되지 않은 한 업데이트 날짜를 변경하는 것은 결코 좋은 생각이 아닙니다. 구글은 스패미 행동과 같은 사소한 변화들을 취하면 당신은 그것에 대해 처벌을 받을 수 있다.

바로 그거야. 그게 다야. 그 외에도, 넥스트제이에스는 당신의 웹사이트가 SEO에 준비되어 있는지 확인하는 일을 꽤 확실하게 하고 있기 때문에, 그것은 당신을 그 일선에서 다루었습니다.

2022년에 프론트엔드 개발자가 될 계획인가요?

제가 배운 내용을 초보자 친화적인 책으로 정리하고 있습니다. 그것은 제가 아는 새로운 개발자에게 가장 빠르고 간단하며 효율적인 접근 방식을 따릅니다. 내가 책에서 요약하고 있는 것과 정확히 같은 접근법을 따랐기 때문에 나는 그것을 알고 있다.

만약 당신이 그 책의 사전 사본을 받고 싶다면, 저에게 이메일을 보내세요. 이 책에는 가장 인기 있고 잘 디자인된 웹 사이트 중 일부에서 선택하는 구성 요소를 설계할 수 있는 수십 개의 후속 튜토리얼이 포함되어 있습니다. 당신이 책을 다 읽을 때쯤, 당신은 어떤 웹사이트를 발견하든 단숨에 디자인할 수 있을 것이다.

얼리버드(Early-bird)를 이용하시면 최종 가격의 50%를 할인받으실 수 있으며, 다양한 무료 상품과 함께 평생 업데이트도 이용하실 수 있습니다.

지금 잡아.

오늘은 여기까지 하겠습니다. 다음 시간까지 잘 지내요!

from http://it-view.tistory.com/23 by ccl(A) rewrite - 2021-12-30 06:27:52