useSeoMeta

Исходный код
SEO-метатеги плоским объектом с полной поддержкой TypeScript через композабл useSeoMeta.

Композабл снижает риск типичных ошибок — например, путаницы name и property — и даёт автодополнение по более чем сотне метатегов.

Рекомендуемый способ задавать метатеги: безопаснее по XSS и удобнее в TypeScript.
Узнать больше Docs > 3 X > Getting Started > Seo Meta.

Использование

app.vue
<script setup lang="ts">
useSeoMeta({
  title: 'Мой удивительный сайт',
  ogTitle: 'Мой удивительный сайт',
  description: 'Это мой удивительный сайт, позвольте мне рассказать вам о нём',
  ogDescription: 'Это мой удивительный сайт, позвольте мне рассказать вам о нём',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})
</script>

Для реактивных значений используйте геттеры () => value:

app.vue
<script setup lang="ts">
const title = ref('Мой заголовок')

useSeoMeta({
  title,
  description: () => `Описание страницы «${title.value}»`,
})
</script>

Параметры

Более 100 полей; полный перечень — в исходниках zhead.

Узнать больше Docs > 3 X > Getting Started > Seo Meta.

Производительность

Чаще всего SEO-метатеги не должны быть реактивными: поисковики опираются на первый HTML.

Если реактивность не нужна, вызывайте useSeoMeta только на сервере — так дешевле:

app.vue
<script setup lang="ts">
if (import.meta.server) {
  useSeoMeta({
    robots: 'index, follow',
    description: 'Статическое описание без реактивности',
    ogImage: 'https://example.com/image.png',
    // другие статические метатеги...
  })
}

const dynamicTitle = ref('Мой заголовок')
// Реактивные метатеги — вне условия, только когда это действительно нужно
useSeoMeta({
  title: () => dynamicTitle.value,
  ogTitle: () => dynamicTitle.value,
})
</script>

Раньше для этого использовали useServerSeoMeta; этот подход предпочтительнее.