9.2) 14분 10초 - SEO 패러렐 라우트 페이지 미적용 문제
62. 검색 엔진 최적화(SEO)에서 보면
상세페이지의 메타데이터 설정하는 부분에서
이전시간에 적용한 인터셉트/패러렐 라우트 때문인지
모달 형태로 뜨면 book/[id]에 설정한 메타 태그가 적용되지 않고, 최상위 (with-searchbar) 부분에 적용한 부분이 뜹니다.
하지만 새로고침해서 최초 접속 상태로 상세페이지에 접근하면 book/[id]에 설정한 meta태그랑 오픈그래프가 보입니다!
이게 의도하신 부분 맞을까요? 어차피 링크로 공유할때는 맨 처음 접속하는 것과 마찬가지니까 크게 상관 없는 부분일까요!?
강의 잘 수강하고 있습니다! 감사합니다.
답변 2
0
안녕하세요 이정환입니다
네 이는 의도된 부분입니다. 말씀하신대로 링크 공유시에는 인터셉트 라우트가 동작하지 않기에 모달 형태로 렌더링 될 때에는 굳이 메타태그를 설정할 필요가 없어 이와 같이 구현되었습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 보키님.
SEO 문제와 관련하여 질문 주셔서 감사합니다. SEO 적용의 경우, 특히 모달과 같은 인터셉트 라우팅을 사용할 때는 일부 설정이 예상과 다르게 동작할 수 있습니다. 이는 주로 모달이 열린 상태에서는 최상위 라우트의 메타데이터가 그대로 유지되기 때문입니다.
문제 이해 및 검토 사항:
SEO 및 모달의 구분: 모달이 열린 상태일 때는 브라우저의 URL이 바뀌지 않기 때문에, 기존의 페이지 메타데이터가 그대로 유지됩니다. 이는 브라우저의 기본적인 동작이며, SEO 측면에서 모달을 사용하는 페이지는 보통 최초 로드 상태의 메타태그를 가져갑니다.
최초 접속 상태와의 차이: URL에 직접 접근하거나 새로고침을 할 경우, 서버 사이드에서 해당 페이지의 메타데이터를 적절히 제공할 수 있습니다. 이는 검색 엔진이 페이지를 처음 크롤링할 때의 동작과 일치합니다.
의도적 구현: 일반적으로 사용자 경험(UX)을 개선하기 위해서 모달을 활용할 때는 SEO 부분에서 다소 제약이 있을 수 있습니다. 특히 공유할 링크는 직접 페이지로 접근하는 방식을 상정하기 때문에, 모달 상태에 대한 메타데이터 적용은 생략되곤 합니다.
추가 리소스:
이해를 돕기 위한 자료들은 SEO 및 Next.js 설정을 어떻게 적용할지에 대한 정보를 제공하여, 불필요한 혼동을 줄여줄 수 있을 것입니다.
문제 해결에 도움이 되었길 바라며, 추가적으로 궁금한 점이 있으시면 이어서 질문해 주세요. 지식공유자께서 곧 답변해 주실 것입니다. 더 좋은 이해를 위해 도움을 드리겠습니다. 🙏
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문
0
22
2
next.js 프로젝트
0
27
1
Next.js + Tanstack Query BFF 구조 질문
0
29
2
Next.js 사전렌더링 이해하기 부분
0
33
2
모달 관련 질문
0
42
3
렌더링 관련 질문
0
80
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
64
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
65
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
75
2
npx prisma db push 시 에러가 뜹니다.
0
94
3
vercel 배포를 실패하였습니다.
0
101
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
57
2
getServerSideProps 함수와 SSR의 관계
0
78
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
61
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
117
2
일반적인 nextjs project architecture에 대하여..
0
90
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
74
2
배포 시 오류 발생
0
90
2
백엔드 서버 오류납니다.
0
83
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
93
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
107
1
[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.
0
63
2
빨간줄 설정
0
77
2
익스텐션 질문
0
61
1