next.js 13에 dynamic import 적... - Inflearn

Next + Create a SNS service with React Query

Implementing real-time chat with WebSockets

next.js 13에 dynamic import 적용 시 SEO 영향

Written on

Edited

안녕하세요, 아래와 같은 방식으로 dynamic import 적용하려는데 SEO에 부정적인 영향이 가는지 궁금해서 질문드립니다.

조금 찾아보니 Dynamic Import로 모두 제외해 버렸기 때문에 Google Bot 등의 크롤러가 웹 페이지에 방문했을 때 접속한 document 페이지에 크롤링할만한 정보가 없게 될 것이라는 이야기가 있어서 사실인지 궁금합니다.

사실이라면 dynamic import의 해당 단점을 보완할 수 있는 방법으로 ssr:true 설정 이외에 무엇이 있는지 궁금합니다

import dynamic from "next/dynamic";

const Zerocho = dynamic(() => import("features/Zero/components/templates/Zerocho"), { ssr: false });

export default function Hi() {
  const seo = getPageSeo("hihi");

  return (
    <>
      <NextSeo {...seo} />
      <SchemaScript schema={schema} />
      <Head>
        <meta name="hello" content={seo.hh} />
      </Head>
      <Title>{seo.title}</Title>
      <Body>
        <Zerocho />
      </Body>
    </>
  );
}

export const getServerSideProps = async (context) => {
  return {
    props: {
      mode: true,
      modeCont: false,
      ...(await serverSideTranslations(context.gggg, ["hihi", "dodo"])),
    },
  };
};

next.jsseodynamicimport다이나믹임포트다이내믹임포트

Answer 2

zerocho

Instructor

구글 봇은 자바스크립트를 실행할 수 있습니다. 그래서 dynamic import한 부분이라도 검색엔진에 나올 수 있습니다. 다만 반드시 나와야하는 내용이라면 head의 meta 태그로 넣어두는 것이 더 낫습니다. 자바스크립트를 실행하지 못하는 검색엔진들에서는 내용이 안 나올 수 있습니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. ㅎㅇㄴ님.

Dynamic Import를 사용하면 초기 로드 시 서버 사이드 렌더링(SSR)을 비활성화하게 되며, 이는 SEO에 영향을 줄 수 있습니다. 당신이 전달한 코드에서는 ssr: false 옵션을 사용하였기 때문에, 이 컴포넌트는 클라이언트 사이드에서만 렌더링됩니다. 이는 Google이나 다른 검색 엔진의 크롤러가 페이지를 로드할 때, JavaScript가 실행되기 전까지는 해당 컴포넌트의 내용이 문서에 포함되지 않음을 의미합니다.

SEO에 중요한 요소는 주로 메타 태그, 타이틀, 및 초기 문서의 포괄적인 HTML 콘텐츠입니다. 당신이 NextSeo나 SchemaScript, 그리고 <Head> 안에 SEO 관련 요소를 잘 설정하였다면, 크롤러는 여전히 해당 정보를 읽어들일 수 있습니다. 하지만 클라이언트에서 추가된 콘텐츠는 처음 크롤링 시 미반영될 수 있습니다.

SEO에 대한 부정적 영향을 최소화하기 위해서는:

SEO에 중요한 콘텐츠는 가능한 SSR로 제공하거나, 미리 렌더링된 HTML에 포함시킵니다.
서버 컴포넌트로 제공할 수 있는 부분은 SSR을 고려해보세요.
크롤링이 필요한, SEO 상 중요한 콘텐츠는 가능한 한 초기 로드에 포함시키세요.

관련된 두 질문 및 답변 URL을 추천드리니 참고해보세요:
- Dynamic Import와 SEO
- 이 답변에서는 SSR과 Dynamic Import의 관계에 대해 심도 있게 설명합니다.
- SEO, Dynamic Routing에 대한 기술 답변
- SSR과 검색 엔진 최적화에 대한 다양한 팁을 제공합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

Inflearn Community Q&A

next.js 13에 dynamic import 적용 시 SEO 영향