인프런 커뮤니티 질문&답변
작성한 질문수
메타 태그 질문입니다.
작성
·
186
0
안녕하세요
Nuxt3를 이용해서 서비스를 개발중인 수강생입니다.
저는 middleware단에 useSeoMeta를 사용해서, 각 페이지별로 메타태그가 들어가게 해놓고,일부 페이지는 axios 모듈로 api 서버에 request하고 response받은 값을 useHead()를 통해 meta태그로 설정하려고 하고 있습니다.
빌드해서 확인해보니, 콘솔에는 해당 페이지에 사용하고자 하는 메타태그가 잘 찍히는데, 막상 페이스북 공유하기 버튼이나 카카오톡에 링크를 붙여넣는등의 행위를 할때 이미지나 타이틀등이 안보입니다.
미들웨어에서 페이지의 메타태그를 한번 씌워놓으면 해당 pages 폴더의 vue파일에서 다시 메타태그 설정이 안되는지 궁금하고, api response값을 메타태그에 사용하려면 어떻게 하는지 궁금합니다.
크롬 개발자도구에서 head 부분을 보면, 메타 태그는 잘 들어가 있는걸 확인할 수 있었습니다.
답변 1
0
안녕하세요.
질문) 미들웨어에서 페이지의 메타태그를 한번 씌워놓으면 해당 pages 폴더의 vue파일에서 다시 메타태그 설정이 안되는지 궁금하고
답변) 미들웨어(middleware)에서 메타태그(useSeoMeta) 설정 후 페이지(pages)에서 메타태그(useSeoMeta)를 재정할 수 있습니다.
만약 원하는 결과가 나오지 않는다면
동기/비동기 문제인지
SNS 공유 캐시의 문제인지
체크해 보는 것도 괜찮을 것 같습니다.
간단한 문자열로 Nuxt의 스펙을 테스트해보시면 해당 문제를 파악하는 데 도움이 되실 것 같습니다.
PS. 그리고 메타태그의 값을 확인하실 때는 웹 페이지에서 [마우스 우클릭] > [페이지 소스보기] 해서 확인하시는 것을 권장드립니다.
답변 감사드립니다
큰 도움이 되었습니다