SEO и Meta
Настройки по умолчанию
Из коробки Nuxt предоставляет осмысленные настройки по умолчанию, которые вы можете отменить при необходимости.
export default defineNuxtConfig({
app: {
head: {
charset: 'utf-8',
viewport: 'width=device-width, initial-scale=1',
}
}
})
Определение свойства app.head в вашем nuxt.config.ts позволяет вам настроить head для всего вашего приложения.
useHead() в app.vue.Для облегчения настройки доступны шорткаты: charset и viewport. Вы также можете указать любой из ключей, перечисленных ниже в Типах.
useHead
Композабл useHead позволяет программно и реактивно управлять тегами head с помощью функции Unhead.
Как и все композаблы, он может использоваться только с setup компонента и хуками жизненного цикла.
<script setup lang="ts">
useHead({
title: 'Мое приложение',
meta: [
{ name: 'description', content: 'Мой невероятный сайт.' }
],
bodyAttrs: {
class: 'test'
},
script: [ { innerHTML: 'console.log(\'Привет, мир!\')' } ]
})
</script>
Мы рекомендуем обратить внимание на useHead и useHeadSafe композаблы.
useSeoMeta
Композабл useSeoMeta позволяет определить SEO-мета-теги вашего сайта в виде плоского объекта с полной поддержкой TypeScript.
Это поможет вам избежать опечаток и распространенных ошибок, например, использования name вместо property.
<script setup lang="ts">
useSeoMeta({
title: 'Мой невероятный сайт',
ogTitle: 'Мой невероятный сайт',
description: 'Это мой невероятный сайт, позвольте мне рассказать вам о нем.',
ogDescription: 'Это мой невероятный сайт, позвольте мне рассказать вам о нем.',
ogImage: 'https://example.com/image.png',
twitterCard: 'summary_large_image',
})
</script>
Компоненты
Nuxt предоставляет компоненты <Title>, <Base>, <NoScript>, <Style>, <Meta>, <Link>, <Body>, <Html> и <Head>, чтобы вы могли напрямую взаимодействовать с мета-данными в шаблоне вашего компонента.
Поскольку имена этих компонентов соответствуют нативным элементам HTML, в шаблоне они должны быть написаны с заглавной буквы.
<Head> и <Body> могут принимать вложенные мета-теги (из эстетических соображений), но это не влияет на то, где именно вложенные мета-теги будут отображаться в конечном HTML.
<script setup lang="ts">
const title = ref('Привет, мир!')
</script>
<template>
<div>
<Head>
<Title>{{ title }}</Title>
<Meta name="description" :content="title" />
<Style type="text/css" children="body { background-color: green; }" ></Style>
</Head>
<h1>{{ title }}</h1>
</div>
</template>
Типы
Ниже приведены нереактивные типы, используемые для useHead, app.head и компонентов.
interface MetaObject {
title?: string
titleTemplate?: string | ((title?: string) => string)
templateParams?: Record<string, string | Record<string, string>>
base?: Base
link?: Link[]
meta?: Meta[]
style?: Style[]
script?: Script[]
noscript?: Noscript[];
htmlAttrs?: HtmlAttributes;
bodyAttrs?: BodyAttributes;
}
Более подробную информацию о типах см. в @unhead/schema.
Возможности
Реактивность
Реактивность поддерживается для всех свойств путем предоставления вычисляемого значения (computed), геттера или реактивного объекта.
<script setup lang="ts">
const description = ref('Мой невероятный сайт.')
useHead({
meta: [
{ name: 'description', content: description }
],
})
</script>
Шаблон названия
Вы можете использовать опцию titleTemplate, чтобы предоставить динамический шаблон для настройки заголовка вашего сайта. Например, вы можете добавить название вашего сайта в заголовок каждой страницы.
titleTemplate может быть либо строкой, где %s заменяется на заголовок, либо функцией.
Если вы хотите использовать функцию (для полного контроля), то ее нельзя задавать в файле nuxt.config. Вместо этого рекомендуется задать ее в файле app.vue, где она будет применяться ко всем страницам вашего сайта:
<script setup lang="ts">
useHead({
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} - Заголовок сайта` : 'Заголовок сайта';
}
})
</script>
Теперь, если вы установите заголовок Моя страница с помощью useHead на другой странице вашего сайта, заголовок будет отображаться как 'Моя страница - Заголовок сайта' на вкладке браузера. Вы также можете передать null, чтобы по умолчанию отображался «Заголовок сайта».
Теги body
Вы можете использовать опцию tagPosition: 'bodyClose' для соответствующих тегов, чтобы добавить их в конец тега <body>.
Например:
<script setup lang="ts">
useHead({
script: [
{
src: 'https://third-party-script.com',
// допустимые варианты: 'head' | 'bodyClose' | 'bodyOpen'
tagPosition: 'bodyClose'
}
]
})
</script>
Примеры
Используя definePageMeta
В директории pages/ вы можете использовать definePageMeta вместе с useHead, чтобы установить мета-данные на основе текущего маршрута.
Например, сначала можно установить заголовок текущей страницы (он извлекается во время сборки с помощью макроса, поэтому не может быть установлен динамически):
<script setup lang="ts">
definePageMeta({
title: 'Some Page'
})
</script>
А затем в файле лэйаута вы можете использовать мета-данные маршрута, которые вы установили ранее:
<script setup lang="ts">
const route = useRoute()
useHead({
meta: [{ property: 'og:title', content: `Название приложения - ${route.meta.title}` }]
})
</script>
Динамический title
В примере ниже titleTemplate задается либо как строка с заполнителем %s, либо как функция, что позволяет более гибко устанавливать заголовок страницы динамически для каждого маршрута вашего приложения Nuxt:
<script setup lang="ts">
useHead({
// в виде строки,
// где `%s` заменяется на заголовок
titleTemplate: '%s - Site Title',
})
</script>
<script setup lang="ts">
useHead({
// или в виде функции
titleTemplate: (productCategory) => {
return productCategory
? `${productCategory} - Site Title`
: 'Site Title'
}
})
</script>
nuxt.config также используется в качестве альтернативного способа установки заголовка страницы. Однако nuxt.config не позволяет сделать заголовок страницы динамическим. Поэтому рекомендуется использовать titleTemplate в файле app.vue для добавления динамического заголовка, который затем применяется ко всем маршрутам вашего приложения Nuxt.
Внешний CSS
В примере ниже показано, как можно включить Google Fonts, используя свойство link композабла useHead или компонент <Link>:
<script setup lang="ts">
useHead({
link: [
{
rel: 'preconnect',
href: 'https://fonts.googleapis.com'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
crossorigin: ''
}
]
})
</script>