Композаблы для работы с мета-данными

Quasar Framework предоставляет мощные возможности для управления мета-данными приложения через специальные композаблы. Метаданные включают заголовок страницы (title), описание (description), ключевые слова (keywords), а также Open Graph и Twitter Card теги, используемые для социальных сетей. Правильное управление этими данными критично для SEO и улучшения пользовательского опыта.

Установка и подключение

Для работы с мета-данными в Quasar используется модуль @quasar/meta, который интегрирован с Vue 3 Composition API. Не требуется дополнительная установка, так как Quasar автоматически включает этот функционал при создании проекта через CLI с поддержкой Vue 3.

Импорт композаблов происходит следующим образом:

import { useMeta } from 'quasar'

useMeta возвращает объект, через который можно управлять всеми ключевыми свойствами мета-информации.

Основные функции useMeta

Управление заголовком страницы

const { setTitle } = useMeta()

setTitle('Главная страница — Мой проект')
  • setTitle — позволяет динамически изменять заголовок документа.
  • Заголовок автоматически синхронизируется с тегом <title> в <head>.

Настройка описания и ключевых слов

const { setMeta } = useMeta()

setMeta({
  description: 'Это пример описания страницы для SEO',
  keywords: 'quasar, vue, seo, мета-данные'
})
  • description — краткое текстовое описание страницы, отображаемое поисковыми системами.
  • keywords — список ключевых слов, разделённых запятыми, для улучшения индексации.

Open Graph и социальные сети

setMeta({
  ogTitle: 'Главная страница — Мой проект',
  ogDescription: 'Подробное описание для социальных сетей',
  ogImage: 'https://example.com/og-image.png',
  twitterCard: 'summary_large_image'
})
  • ogTitle, ogDescription, ogImage — теги Open Graph для Facebook, LinkedIn и других платформ.
  • twitterCard — настройка типа карточки для Twitter (summary, summary_large_image).

Реактивное управление мета-данными

Quasar позволяет привязывать мета-данные к реактивным переменным Vue:

import { ref, watch } from 'vue'
import { useMeta } from 'quasar'

const { setTitle, setMeta } = useMeta()
const pageTitle = ref('Главная страница')
const pageDescription = ref('Описание главной страницы')

watch(pageTitle, (newTitle) => {
  setTitle(newTitle)
})

watch(pageDescription, (newDescription) => {
  setMeta({ description: newDescription })
})
  • Изменения переменных pageTitle и pageDescription автоматически обновляют соответствующие теги.
  • Обеспечивает динамическое управление мета-данными при навигации между страницами.

Композабл useRouteMeta для маршрутов

Quasar интегрируется с Vue Router, что позволяет задавать мета-данные на уровне маршрутов:

import { useRouteMeta } from 'quasar'

const routeMeta = useRouteMeta()

routeMeta.value = {
  title: 'Страница профиля',
  description: 'Подробное описание профиля пользователя'
}
  • useRouteMeta возвращает реактивный объект мета-данных текущего маршрута.
  • При смене маршрута Quasar автоматически обновляет заголовок и описание страницы.

Советы по организации мета-данных

  • Разделять глобальные мета-данные (например, описание сайта) и локальные (для каждой страницы).
  • Использовать реактивные переменные для контента, который зависит от состояния приложения.
  • Для Open Graph и Twitter Card обязательно указывать изображения с корректными URL, чтобы избежать ошибок при предварительном просмотре ссылок.
  • Применять useRouteMeta для упрощения поддержки и минимизации дублирования кода.

Расширенные возможности

  • Динамические шаблоны заголовков: комбинировать название сайта с названием страницы.
  • Поддержка нескольких языков: можно использовать реактивные данные для локализации мета-данных.
  • Анимация и переходы: мета-данные можно менять в хуках beforeRouteEnter и beforeRouteUpdate, обеспечивая плавное обновление заголовка и описания без перезагрузки страницы.

Quasar предоставляет полностью реактивную и гибкую систему управления мета-данными, интегрированную с Composition API и Vue Router. Это позволяет создавать динамические, SEO-дружественные приложения с полным контролем над содержимым <head>.

Оглавление