useSeoMeta

Исходники
Композабл useSeoMeta позволяет вам определять мета-теги для SEO вашего сайта в виде плоского объекта с полной поддержкой TypeScript.

Это помогает вам избежать распространенных ошибок, таких как использование name вместо property, а также опечаток - более 100+ полностью типизированных метатегов.

Это рекомендуемый способ добавления мета-тегов на ваш сайт, поскольку он безопасен с точки зрения XSS и имеет полную поддержку TypeScript.
Узнать больше Docs > 4 X > Getting Started > Seo Meta.

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

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

При вставке реактивных тегов вы должны использовать синтаксис вычисляемого геттера (() => value):

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

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

Параметры

Существует более 100 параметров. См. полный список параметров в исходном коде.

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

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

Чаще всего SEO-метатеги не обязаны быть реактивными: роботы поисковиков в основном смотрят первоначальную загрузку страницы.

Чтобы не тратить ресурсы на реактивность, можно вызывать useSeoMeta только на сервере, когда метатеги статичны:

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

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

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