Как правильно прописать метатеги для приложения на vue js

Рейтинг: 1Ответов: 2Опубликовано: 11.01.2023

Написал одностраничный лендинг на vue js, необходимо прописать правильно метатеги для роботов и продвижения в поисковиках. Много прочитал статей, но так и непонял как сделать правильно метатеги для своего лендинга. Поскажите, нужно прописывать метатеги в файле nuxt.config.js? Как все оформить правильно и красиво в моем случае? Буду бескрайне благодарен за помощь в моем вопросе. Прикладываю страничку для понимания моего контента. Прошу дать более развернутый ответ! Спасибовведите сюда описание изображения

vue.js nuxt.js
Источник: Stack Overflow на русском

Ответы

▲ 0

Для одностраничного лендинга без роутера 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>
▲ 0

Метатеги и 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' },
            ],
        }
    }
})