next.js 13에 dynamic import 적용 시 SEO 영향
173
작성한 질문수 6
안녕하세요, 아래와 같은 방식으로 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"])),
},
};
};
답변 2
1
구글 봇은 자바스크립트를 실행할 수 있습니다. 그래서 dynamic import한 부분이라도 검색엔진에 나올 수 있습니다. 다만 반드시 나와야하는 내용이라면 head의 meta 태그로 넣어두는 것이 더 낫습니다. 자바스크립트를 실행하지 못하는 검색엔진들에서는 내용이 안 나올 수 있습니다.
0
안녕하세요, 인프런 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과 검색 엔진 최적화에 대한 다양한 팁을 제공합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
캡처링부분 질문있습니다.
0
97
2
깃에 소스코드를 찾을 수 없습니다.
0
129
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
103
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
124
2
css 라이브러리 추천 부탁드립니다
0
159
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
139
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
123
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
181
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
198
3
폴링이 필요없는 이유
0
103
2
next Request Memoization과 react cache
0
116
2
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
0
92
2
next.js 서버fetch 에러 fallback ui 구현 방법
0
176
2
프레임워크 여론 파악법
0
133
2
필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??
0
112
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
112
2
template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈
0
71
2
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
0
139
2
next.js 에서 로그인에 관하여
0
145
1
Next의 route handler에 대한 질문이 있습니다.
0
103
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
105
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
92
2
vanilla-extract 못찾는 문제
0
235
2
fetch 캐싱과 revalidate 관련
0
94
2