useSeoMeta
useSeoMeta 컴포저블은 사이트의 SEO 메타 태그를 완전한 TypeScript 지원과 함께 평면 객체로 정의할 수 있게 해줍니다.
이것은 property 대신 name을 사용하는 것과 같은 일반적인 실수나 오타를 피하는 데 도움이 됩니다. 100개 이상의 메타 태그가 완전히 타입 지정되어 있습니다.
이것은 XSS 안전하고 완전한 TypeScript 지원을 제공하므로 사이트에 메타 태그를 추가하는 권장 방법입니다.
사용법
app.vue
useSeoMeta({
title: 'My Amazing Site',
ogTitle: 'My Amazing Site',
description: 'This is my amazing site, let me tell you all about it.',
ogDescription: 'This is my amazing site, let me tell you all about it.',
ogImage: 'https://example.com/image.png',
twitterCard: 'summary_large_image',
})반응형 태그를 삽입할 때는 계산된 getter 문법 (() => value)을 사용해야 합니다:
app.vue
const title = ref('My title')
useSeoMeta({
title,
description: () => `This is a description for the ${title.value} page`
})매개변수
100개 이상의 매개변수가 있습니다. 소스 코드에서 전체 매개변수 목록 보기.
이것도 참고 getting-started > seo-meta성능
대부분의 경우, SEO 메타 태그는 반응형일 필요가 없습니다. 검색 엔진 로봇은 주로 초기 페이지 로드를 스캔하기 때문입니다.
더 나은 성능을 위해 메타 태그가 반응형일 필요가 없을 때 useSeoMeta 호출을 서버 전용 조건으로 감쌀 수 있습니다:
app.vue
if (import.meta.server) {
// 이 메타 태그는 서버 사이드 렌더링 중에만 추가됩니다
useSeoMeta({
robots: 'index, follow',
description: 'Static description that does not need reactivity',
ogImage: 'https://example.com/image.png',
// 다른 정적 메타 태그...
})
}
const dynamicTitle = ref('My title')
// 필요한 경우에만 조건 외부에서 반응형 메타 태그를 사용하세요
useSeoMeta({
title: () => dynamicTitle.value,
ogTitle: () => dynamicTitle.value,
})이전에는 useServerSeoMeta 컴포저블을 사용했지만, 이 접근 방식으로 대체되었습니다.
※이 페이지는 Nuxt.js 공식 문서의 비공식 번역 페이지입니다.
공식 문서의 해당 페이지는 여기 있습니다:
https://nuxt.com/docs/3.x/api/composables/use-seo-meta