[Next.js] SEO 최적화하기

 

SSR와 CSR의 SEO

 

CSR (React.js)

 

CSR(ClientSide Rendering)의 경우 초기에 빈 html 문서를 전달하기 때문에, 봇이 데이터를 수집하기 어렵기때문에 SEO에 불리하다. 

 

 

SSR(Next.js)

하지만, SSR(ServerSide Rendering)은 클라이언트가 요청한 페이지를 서버에서 동적으로 생성해 브라우저에 보내는 방식으로, 이미 서버쪽에서 만들어진 완성된 html을 검색엔진들이 크롤링이 가능하기때문에 검색에 유리해진다.

 

SEO 진단

✅ SSR의 장점인 SEO 성능 최적화 작업하기 전, SEO checkup을 해보았다.

https://pagespeed.web.dev/analysis/https-balanco-vercel-app/hxv2uh2yl9?form_factor=desktop

 

 

pagespeed가 무슨 기준인지는 모르겠지만, pagespeed에서 처음 검사해본결과 아무런 작업을 안했는데 너무 높은 점수가 나오길래 이상하다 싶어 다른 사이트로 SEO 진단을 해보았다.

PageSpeed Insights

 

우왕 굉장히 자세하게 분석해서 알려준다!

 

 

function Heading({ children }: { children: React.ReactNode }) {
  return (
    <h1 className="font-bold text-3xl sm-max:text-2xl text-center mb-12 sm-max:mb-6">
      {children}
    </h1>
  );
}

export default Heading;

각 page에서 heading 컴포넌트를 사용해 각 페이지의 타이틀로 사용하는데, h2태그에서 h1태그로 변경해주었다.

 

Robots.txt

 

robots.txt 파일은 검색 엔진 로봇 또는 크롤러에게 웹 사이트의 어떤 부분을 크롤링할 수 있는지에 대한 지침을 제공하는 텍스트 파일로, 검색 엔진이 사이트를 방문할 때 첫 번째로 확인하는 파일 중 하나라고 한다.

 

• 검색 엔진 크롤러 제어: robots.txt 파일을 사용하여 특정 디렉토리 또는 파일을 검색 엔진 크롤러에게 숨기거나 허용할 수 있습니다. 이를 통해 개인 정보 보호를 위한 중요한 파일이나 디렉토리를 보호하거나, 검색 결과에 표시되기를 원치 않는 콘텐츠를 숨길 수 있습니다.
• 크롤링 최적화: 웹 사이트의 크기가 크거나 일부 페이지가 검색 결과에 표시되기를 원치 않을 때, robots.txt 파일을 사용하여 특정 디렉토리나 URL을 크롤링에서 제외할 수 있습니다. 이를 통해 검색 엔진 크롤러가 불필요한 페이지를 크롤링하지 않고, 리소스를 효율적으로 사용할 수 있습니다.

User-agent: * //로봇 배제 프로토콜의 버전
Disallow: //모든 경로 허용 (로봇이 접근을 허용할 URL 지정)

 

 

 

https://developers.google.com/search/docs/crawling-indexing/robots/create-robots-txt?hl=ko

robots.txt 파일 만들기 및 제출 | Google 검색 센터  |  문서  |  Google for Developers

 

 

siteMap

siteMap은 웹 사이트 내의 페이지,동영상,이미지 등 콘텐츠의 목록들을 나열하고 그 관계의 정보들을 계층적이고 체계적으로 명시하는것을 말한다. 이를 통해 구글같은 주요 검색엔진들이 해당 정보를 바탕으로 좀 더 효율적으로 크롤링할 수 있도록 돕는다고 한다.

하지만 사이트맵을 추가한다고해서 생각보다 SEO효과가 크진 않다고 하는데, 기본적으로 페이지 구조와 링크관계가 정상적으로 잘 구성되어 있다면, 굳이 사이트맵 없이도 검색엔진 대부분이 페이지를 찾아 크롤링 및 인덱싱이 가능하다고 한다.

 

 

siteMap이 필요한 경우

• 규모가 큰 사이트
• 연결되는 외부 링크가 많지않은 사이트
• 미디어 콘텐츠(동영상, 이미지)가 많거나 뉴스에 노출되는 사이트

 

siteMap이 필요하지 않은 경우

• 규모가 작은 사이트
• 내부적으로 링크관계가 긴밀하게 구성된 사이트
• 노출 미디어 콘텐츠가 만하지 않거나 없는 사이트

 

https://velog.io/@sejinkim/%EC%82%AC%EC%9D%B4%ED%8A%B8%EB%A7%B5-SEO-%EA%B0%80%EC%9D%B4%EB%93%9C

사이트맵 SEO 가이드

 

 

 

https://velog.io/@suyeon9456/%EA%B2%80%EC%83%89%EC%97%94%EC%A7%84%EC%B5%9C%EC%A0%81%ED%99%94SEO-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-with-%EA%B5%AC%EA%B8%80%EC%95%A0%EB%84%90%EB%A6%AC%ED%8B%B1%EC%8A%A4

검색엔진최적화(SEO) 알아보며 적용하기 with 구글애널리틱스

 

Google Analytics

웹 사이트의 방문자 행동과 성과를 추적하고 분석하는 데 사용되는 웹 분석 도구로,

방문자의 행동 분석, 성과 측정, 마케팅 효율성 평가, 컨텐츠 최적화, 사용자 경험 향상 등을 확인해 볼 수 있다고 한다.

 

 

 

Favicon

favicon 또한 SEO에 영향을 미치는 요소임을 확인할 수 있었다.