Как интегрировать OG разметку в Nuxt?

Для интеграции Open Graph (OG) разметки в ваше приложение, созданное с использованием фреймворка Nuxt.js, вам понадобится выполнить несколько шагов.

1. Установите пакет vue-meta из npm:

npm install vue-meta --save

или с использованием yarn:

yarn add vue-meta

2. Создайте новый файл plugins/meta.js в папке plugins вашего проекта. В этом файле мы будем настраивать метаданные для каждого маршрута.

import Vue from 'vue'
import VueMeta from 'vue-meta'

Vue.use(VueMeta, {
  // Опции по умолчанию, можно не указывать

  // Определение ключа для метаданных Open Graph
  keyName: 'metaInfo',

  // Определение свойства, которое позволяет получать метаданные Open Graph
  attribute: 'data-n-head',

  // Опции для глубокого слияния метаданных
  ssrAttribute: 'data-n-head-ssr',
  tagIDKeyName: 'vmid',

  // Определение пути префикса
  tagIDKeyName: 'data-vm-id',

  // Определение кеширования метаданных
  refreshOnceOnNavigation: true
})

Этот файл регистрирует плагин vue-meta и настраивает параметры метаданных по умолчанию.

3. Импортируйте и используйте файл plugins/meta.js в вашем файле конфигурации Nuxt.js (nuxt.config.js):

module.exports = {
  //...

  // Подключение плагинов
  plugins: [
    { src: '~/plugins/meta.js' }
  ],

  //...
}

4. Теперь мы можем использовать метаданные OG для каждого маршрута. Добавьте соответствующие метаданные в раздел head в каждом вашем компоненте маршрута (.vue файл):

<script>
export default {
  head: {
    // Здесь находятся метаданные OG для этого маршрута
    meta: [
      {
        property: 'og:title',
        content: 'Заголовок OG'
      },
      {
        property: 'og:description',
        content: 'Описание OG'
      },
      {
        property: 'og:image',
        content: 'https://example.com/image.jpg'
      }
    ]
  }
}
</script>

Теперь при рендеринге каждого маршрута vue-meta будет генерировать соответствующие метаданные OG в HTML. На сервере эти данные будут включены в предварительный рендеринг и доступны в поисковых системах и социальных сетях при размещении ссылок на ваш сайт.