Как работать с мета-данными в Nuxt
Что такое мета-данные?
Сначала давайте поговорим о том, что такое метаданные. Вы можете указывать информацию о html-документе в тегах <meta>. Мета-теги располагаются внутри элемента <head> html-документа. Метатеги могут содержать информацию о следующем:
- Информация для браузера о том, как отображать HTML-документ
- Инструкции для поисковых систем о том, как интерпретировать и отображать информацию
- Описание для платформ социальных сетей, как отображать информацию при публикации ссылки в общем доступе.
Метаданные не видны на странице. Они анализируются браузером и поисковыми системами. Вы можете просмотреть веб-страницу и найти в теге <head> все теги <meta>, добавленные на этой странице. Данные внутри метатегов не являются скрытыми в этом смысле.
Пример мета-тегов
<head>
<title>Current title</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Это моё описание, которое может быть видно на страницах результатов поисковых систем" />
<meta name="author" content="Badcode.ru" />
</head>Технически тег <title> не является метатегом. Его принято называть метаданными, и он влияет на SEO и удобство просмотра страницы. Поэтому я рекомендую относиться к нему именно так.
Полный список доступных HTML метатегов можете посмотреть на этой странице.
Что такое Open Graph?
Open Graph - это протокол, созданный Facebook. С целью структурирования информации о ссылках, которыми делятся на платформах социальных сетей. Теги дают автору возможность решать, какой контент будет показан в предварительном просмотре при обмене ссылкой.
Метатеги Open Graph добавляют к свойству префикс og:. У Twitter также есть свои собственные теги для указания метаданных. Вместо og: они используют twitter:. Но Twitter также распознаёт og теги в качестве запасного варианта, если теги twitter:* не были найдены.
<head>
<meta property="og:title" content="Текущий заголовок" />
<meta property="og:description" content="Описание. Может быть таким же, как meta description" />
<meta property="og:image" content="https://badcode.ru/content/images/2020/01/cover-1.jpg" />
<meta property="og:url" content="https://badcode.ru/" />
</head>Пример с тегами Twitter
<head>
<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@true_hero99" />
<meta name="twitter:description" content="Описание. Может быть таким же, как meta description" />
</head>Как указывать метаданные в Nuxt
Итак, теперь мы знаем, что такое мета-теги и как они используются для отображения информации о вашем сайте. Но как установить значения мета-данных динамически для каждой страницы в приложении Nuxt? Допустим, у нас есть блог. Например, этот. Где мы хотим показывать разные заголовки и описания, уникальные для каждой статьи.
В Nuxt у вас есть доступ к специальному свойству под названием head. Свойство head определяется так же, как и все остальные свойства компонента. На том же уровне, что и data, fetch, methods и т.д. Оно может быть как объектом, так и функцией. Скоро я объясню разницу.
С помощью свойства head вы можете установить заголовок и метаданные для каждой страницы в вашем приложении. Вы также можете использовать head для установки всего, что связано с тегом <head>. То есть вы можете добавлять таблицы стилей, теги скриптов, теги ссылок и многое другое. В этой статье я сосредоточусь на части метаданных, но полезно знать и остальное.
Использование свойства head
Вы можете установить данные в head из любого компонента Vue. Чаще всего head используется внутри компонентов ваших страниц. Не так часто встречается, когда метаданные задаются из подключаемого компонента, который используется на нескольких страницах. Но это возможно. Итак, у нас есть несколько страниц, и мы хотим установить некоторые метаданные. Всё, что нам нужно сделать, это добавить свойство head и указать нужные данные.
Добавим заголовок и описание.
export default {
head: {
title: 'Мой заголовок',
meta: [
{
hid: 'description',
name: 'description',
content: 'Моё описание... Badcode.ru...',
},
],
},
}Как я уже говорил, тег title на самом деле не является мета-тегом. Поэтому он устанавливается вне массива тегов meta. Если мы посмотрим на свойство description, вы можете задаться вопросом, что это за свойство hid. Это свойство специфично для Nuxt и используется как уникальный идентификатор, благодаря чему свойства могут быть перезаписаны дочерними компонентами. Таким образом, если мы хотим установить описание в дочернем компоненте, мы должны использовать то же самое значение hid.
При изменении метаданных, как указано выше, значения title и description мы задали статичные данные. И если нам нужно использовать статическую информацию, мы можем изменять head с помощью определения объекта, как выше. Но если мы хотим установить динамические данные, например, title и description текущей записи блога, нам нужно использовать head как метод.
Позвольте мне показать вам, как я использовал бы head для этой записи в блоге.
head() {
return {
title: this.article.title,
meta: [
{
hid: 'description',
name: 'description',
content: this.article.description,
},
{
hid: 'og:title',
name: 'og:title',
content: this.article.title,
},
{
hid: 'og:image',
property: 'og:image',
content: `${this.article.image}`,
},
{
hid: 'og:description',
property: 'og:description',
content: this.article.description,
},
{
hid: 'og:url',
property: 'og:url',
content: `https://badcode.ru/${this.article.slug}`,
},
],
}
},Здесь я использую head как функцию, которая возвращает объект. Я устанавливаю все метаданные на основе информации о текущей статье. Это делает их динамичными и более уникальными для каждой страницы.
Установка метаданных в nuxt.config
У вас также есть доступ к свойству head в файле nuxt.config.js. Здесь вы можете установить значения по умолчанию для всех страниц. Это полезно, если вы не хотите копипастить некоторые основные метаданные для каждой страницы вашего приложения.
Вы также можете использовать шаблон для заголовка. Если вы хотите, чтобы каждый заголовок на вашем сайте заканчивался, например, названием вашего сайта. Вы можете настроить это здесь с помощью свойства titleTemplate.
head: {
title: 'Мой заголовок по-умолчанию, который каждый компонент может переопределить, если что',
titleTemplate: '%s - badcode.ru',
meta: [
...
]
}Теперь каждый тег title будет заканчиваться на - badcode.ru. Символ %s является спецификатором преобразования, который потом будет заменён на заданный title.
Использование нового хелпера useMeta
Несмотря на то, что Nuxt 3 еще не выпущен, вы можете использовать новые возможности, связанные с Vue 3. Например, хелпер useMeta. Более подробную информацию смотрите в Nuxt Composion API Module.
Хелпер useMeta можно использовать в методе setup(). Что упрощает установку динамических данных и более явно показывает, какие данные используются. Чтобы задействовать функциональность useMeta, необходимо импортировать хелпер и задать свойству head значением пустой объект. Базовый пример может выглядеть следующим образом.
import { defineComponent, useMeta } from '@nuxtjs/composition-api'
export default defineComponent({
head: {},
setup() {
useMeta({
title: 'Мой заголовок',
meta: [
{
hid: 'description',
name: 'description',
content: 'Моё описание...',
},
],
})
},
})Это изящный способ добавления своих метаданных. Но он ничем не отличается от прямого изменения в свойстве head. useMeta - это только хелпер. Вы так же можете получить данные, которые возвращает хелпер useMeta и изменить их напрямую.
import { defineComponent, useMeta } from '@nuxtjs/composition-api'
export default defineComponent({
head: {},
setup() {
const { title } = useMeta()
title.value = 'Мой переопределённый заголовок'
},
})В этом случае вы можете изменить значение title в методе setup. Мы также можем получить переменную meta и применить изменения к description и всем мета-свойствам, доступным в массиве meta.
Что если я захочу динамически внести изменения в title (или любые другие мета-данные) извне метода setup? Возможно, заголовок должен меняться в зависимости от действий пользователя на странице. Наш последний пример делает title редактируемым в методе setup. Но этот подход не даёт изменить title из кода самого компонента.
Для этого нам нужно создать реактивную переменную и передать её в функцию useMeta. Вернув реактивную переменную, мы сможем получить к ней доступ из нашего шаблона и других частей компонента.
<template>
<div>
<button @click="title = 'New title'">Изменить title</button>
<button @click="title = 'Another new title'">Изменить title again</button>
</div>
</template>
<script lang="ts">
import { defineComponent, useMeta, ref } from '@nuxtjs/composition-api'
export default defineComponent({
head: {},
setup() {
const title = ref('')
useMeta(() => ({ title: title.value }))
return {
title,
}
},
})
</script>
Резюме
Метаданные имеют большое значение в том, как будет выглядеть ваш сайт в глазах поисковых машин, платформ социальных сетей и ваших пользователей. Важно понимать эти концепции и то, как можно работать с динамическими данными. Надеюсь, эта статья прояснила некоторые понятия, и вы получили вдохновение для работы с метаданными в вашем приложении.
Очень распространенной практикой является создание некоторой вспомогательной функции для работы с метаданными. Поскольку метаданные представляют собой обычный объект, вы можете создать функцию, которая возвращает метаобъект на основе некоторых входных параметров. Это делает их ещё более динамичными и облегчает работу с метатегами на множестве страниц в приложении Nuxt.