메타 태그 질문입니다.
265
작성한 질문수 1
안녕하세요
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. 그리고 메타태그의 값을 확인하실 때는 웹 페이지에서 [마우스 우클릭] > [페이지 소스보기] 해서 확인하시는 것을 권장드립니다.
Nuxt 4 관련 강의 업데이트 계획이 있으실까요?
0
73
2
eslint 설정 관련 질문
0
81
1
vscode 자동 저장 시 탭 사이즈 조절 안되고 있습니다..
0
75
1
eslint 설정 오류 질문드립니다.
0
171
2
pageContainerStyle 이름을 찾을 수 없습니다 에러
0
56
1
npm create nuxt <project-name> 현재는 nuxi 로 프로젝트 생성하는 것이 권장으로 적혀있지 않는 것 같은데
0
129
2
타입체크 관련질문입니다.
1
216
1
eslint prettier 설정 오류
0
200
2
clearNuxtState() 사용 문의
0
99
1
nuxt 빌드 환경 질문드립니다!
0
363
2
피니아 persist 질문드립니다!
0
179
1
prefetching 질문
0
112
1
[nuxt] [request error] [unhandled] [500] __QUASAR_SSR_SERVER__ is not defined
0
290
4
사진 오류
0
105
1
@pinia/nuxt 버전이 0.9.0인 경우 @pinia-plugin-persistedstate/nuxt와 충돌
1
187
2
Nuxt3는 SSR인가요? USR인가요?
1
340
2
VSCode처럼 멀티 Title & Menu Bar로 개발할려면?
0
261
2
Course 데이터 가져오기에서 궁금한 점
1
209
2
프로젝트 생성
0
336
3
웹 서버, WAS 그리고 api 서버 관련
0
400
2
$route 관련 에러
0
166
1
package.json 구성 관련 문의
0
196
1
코드에서 $i18n, $route 등 provide로 제공된 객체가 템플릿에서 붉은색으로 표시됩니다.
0
250
2
fetch와 axios에 대한 질문
0
180
1