useSeoMeta
Композабл useSeoMeta позволяет вам определять мета-теги для SEO вашего сайта в виде плоского объекта с полной поддержкой TypeScript.
Это помогает вам избежать распространенных ошибок, таких как использование name
вместо property
, а также опечаток - более 100+ полностью типизированных метатегов.
Это рекомендуемый способ добавления мета-тегов на ваш сайт, поскольку он безопасен с точки зрения XSS и имеет полную поддержку TypeScript.
Использование
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('My title')
useSeoMeta({
title,
description: () => `This is a description for the ${title.value} page`
})
</script>
Параметры
Существует более 100 параметров. См. полный список параметров в исходном коде.