인프런 커뮤니티 질문&답변
작성한 질문수
9.2) 14분 10초 - SEO 패러렐 라우트 페이지 미적용 문제
해결된 질문
작성
·
22
0
62. 검색 엔진 최적화(SEO)에서 보면
상세페이지의 메타데이터 설정하는 부분에서
이전시간에 적용한 인터셉트/패러렐 라우트 때문인지
모달 형태로 뜨면 book/[id]에 설정한 메타 태그가 적용되지 않고, 최상위 (with-searchbar) 부분에 적용한 부분이 뜹니다.
하지만 새로고침해서 최초 접속 상태로 상세페이지에 접근하면 book/[id]에 설정한 meta태그랑 오픈그래프가 보입니다!
이게 의도하신 부분 맞을까요? 어차피 링크로 공유할때는 맨 처음 접속하는 것과 마찬가지니까 크게 상관 없는 부분일까요!?
강의 잘 수강하고 있습니다! 감사합니다.
답변 2
0
안녕하세요 이정환입니다
네 이는 의도된 부분입니다. 말씀하신대로 링크 공유시에는 인터셉트 라우트가 동작하지 않기에 모달 형태로 렌더링 될 때에는 굳이 메타태그를 설정할 필요가 없어 이와 같이 구현되었습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 보키님.
SEO 문제와 관련하여 질문 주셔서 감사합니다. SEO 적용의 경우, 특히 모달과 같은 인터셉트 라우팅을 사용할 때는 일부 설정이 예상과 다르게 동작할 수 있습니다. 이는 주로 모달이 열린 상태에서는 최상위 라우트의 메타데이터가 그대로 유지되기 때문입니다.
문제 이해 및 검토 사항:
SEO 및 모달의 구분: 모달이 열린 상태일 때는 브라우저의 URL이 바뀌지 않기 때문에, 기존의 페이지 메타데이터가 그대로 유지됩니다. 이는 브라우저의 기본적인 동작이며, SEO 측면에서 모달을 사용하는 페이지는 보통 최초 로드 상태의 메타태그를 가져갑니다.
최초 접속 상태와의 차이: URL에 직접 접근하거나 새로고침을 할 경우, 서버 사이드에서 해당 페이지의 메타데이터를 적절히 제공할 수 있습니다. 이는 검색 엔진이 페이지를 처음 크롤링할 때의 동작과 일치합니다.
의도적 구현: 일반적으로 사용자 경험(UX)을 개선하기 위해서 모달을 활용할 때는 SEO 부분에서 다소 제약이 있을 수 있습니다. 특히 공유할 링크는 직접 페이지로 접근하는 방식을 상정하기 때문에, 모달 상태에 대한 메타데이터 적용은 생략되곤 합니다.
추가 리소스:
이해를 돕기 위한 자료들은 SEO 및 Next.js 설정을 어떻게 적용할지에 대한 정보를 제공하여, 불필요한 혼동을 줄여줄 수 있을 것입니다.
문제 해결에 도움이 되었길 바라며, 추가적으로 궁금한 점이 있으시면 이어서 질문해 주세요. 지식공유자께서 곧 답변해 주실 것입니다. 더 좋은 이해를 위해 도움을 드리겠습니다. 🙏
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
넵 감사합니다!