Написал одностраничный лендинг на vue js, необходимо прописать правильно метатеги для роботов и продвижения в поисковиках. Много прочитал статей, но так и непонял как сделать правильно метатеги для своего лендинга. Поскажите, нужно прописывать метатеги в файле nuxt.config.js? Как все оформить правильно и красиво в моем случае? Буду бескрайне благодарен за помощь в моем вопросе. Прикладываю страничку для понимания моего контента. Прошу дать более развернутый ответ! Спасибо
-
Cпасибо! Вроде поправил все. Более менее суть понял!– Вадим12 янв в 13:12
2 ответа
Для одностраничного лендинга без роутера nuxt особо и не нужен, но если на нем и страница одна, то всю мету можно оформить в nuxt.config.js
https://nuxtjs.org/docs/features/meta-tags-seo/
Для многостраничников:
/pages/index.vue
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
data() {
return {
title: 'Home page'
}
},
head() {
return {
title: this.title,
meta: [
{
hid: 'description',
name: 'description',
content: 'Home page description'
}
]
}
}
}
</script>
Метатеги и SEO для nuxt3 лучше прописывать в файле nuxt.config.ts
https://nuxt.com/docs/api/configuration/nuxt-config#head
https://nuxt.com/docs/getting-started/seo-meta
Пример:
export default defineNuxtConfig({
app: {
head: {
htmlAttrs: {
lang: 'ru',
},
charset: 'utf-8',
viewport: 'width=device-width, initial-scale=1',
title: 'Site title',
meta: [
{ name: 'description', content: 'Site description' },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
],
}
}
})