Содержание
2. Установка meta-тэгов по умолчанию
3. Добавление тэгов в секцию head на отдельную страницу
Фреймворк Nuxt имеет мощный встроенный функционал для работы с SEO (поисковым продвижением).
Режим SSR
Главное преимущество Nuxt для SEO в том, что по умолчанию в нем включен режим SSR (Server Side Rendering). Это позволяет формировать HTML-код страницы на сервере и выдавать поисковым системам уже готовую HTML разметку, а не скрипты, которые формируют эту разметку. Поисковые системы это любят.
Убедится, что в вашем приложении включен режим SSR можно в файле nuxt.config.ts
export default defineNuxtConfig({ ssr: true, // Если стоит true, SSR включен, если false, выключен })
Если параметр не указан, режим ssr включен по умолчанию.
Подробнее про настройки Nuxt проекта можно посмотреть в базовом видеокурсе по Nuxt здесь:
https://webkyrs.info/category/osnovy-nuxt
Установка meta-тэгов по умолчанию
Сразу для всего приложения (сайта), который мы разрабатываем, мы можем добавить мета тэги по умолчанию. Сделать это можно все в том же файле настроек nuxt.config.ts. Для этого можно использовать опцию head. В этой секции вы можете указать заголовки, которые будут применяться ко всем страницам вашего сайта.
export default defineNuxtConfig({ app: { head: { meta: [ { name: 'description', content: 'Описание вашего сайта' }, { name: 'keywords', content: 'ключевые, слова, сайта' }, { name: 'author', content: 'Ваше имя или компания' }, { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ], title: 'Название сайта по умолчанию' } } })
Эти мета-теги и другие заголовки будут применяться ко всем страницам вашего приложения по умолчанию. Вы всегда можете переопределить их на уровне отдельной страницы, если нужно установить уникальные мета-теги для конкретной страницы.
Добавление тэгов в секцию head на отдельную страницу
Для добавления уникальных мета-тегов и других тэгов в секцию <head> на отдельной странице в Nuxt 3, вы можете использовать функцию useHead в компоненте страницы. Это позволяет переопределять или дополнять заголовки, указанные в глобальной конфигурации.
Пример использования в компоненте страницы:
<script setup lang="ts"> useHead({ title: 'Уникальный заголовок для страницы', meta: [ { name: 'description', content: 'Описание для этой страницы' }, { name: 'keywords', content: 'ключевые, слова, страницы' }, ] }) </script> <template> <div> <h1>Это страница с уникальными мета-тегами</h1> </div> </template>
Вы также можете добавлять любые другие теги, такие как <link>, <script>, и т. д., используя этот же подход. Например, добавление favicon или подключения сторонних библиотек:
useHead({ link: [ { rel: 'icon', type: 'image/png', href: '/custom-favicon.png' } ], script: [ { src: 'https://example.com/script.js', async: true } ] })
или так
script: [ { src: 'https://example.com/script.js', async: true }, { innerHTML: 'console.log("Встроенный скрипт работает!")', type: 'text/javascript' } ], bodyAttrs: { class: 'custom-body-class', 'data-theme': 'dark' // можно добавить любые атрибуты к body }
Определяем SEO мета-тэги на странице
В Nuxt 3 можно определить SEO мета-теги на странице с помощью специального хука useSeoMeta. Этот хук автоматически добавляет основные мета-теги, такие как description, og:title, og:description и другие.
Вот пример, как можно использовать useSeoMeta на странице:
<script setup lang="ts"> useSeoMeta({ title: 'Уникальный SEO-заголовок для страницы', description: 'SEO-описание этой страницы', ogTitle: 'Уникальный заголовок для Open Graph', ogDescription: 'Описание для социальных сетей через Open Graph', ogImage: '/path-to-image.jpg', ogUrl: 'https://example.com/page-url', twitterCard: 'summary_large_image', twitterSite: '@your-twitter-handle' }) </script> <template> <div> <h1>Это страница с SEO-мета-тегами</h1> </div> </template>
title: Устанавливает SEO-заголовок страницы.
description: Добавляет мета-описание страницы.
ogTitle и ogDescription: Устанавливают заголовок и описание для Open Graph, который используется при публикации ссылки на страницу в социальных сетях.
ogImage: Указывает изображение для Open Graph (отображается при шаринге страницы).
ogUrl: Устанавливает URL-адрес страницы для Open Graph.
twitterCard: Определяет тип карточки для Twitter (например, summary_large_image для карточек с большим изображением).
twitterSite: Указывает аккаунт Twitter, который связан с этим сайтом.
Используя useSeoMeta, вы легко можете установить основные SEO-мета-теги для улучшения видимости вашего сайта в поисковых системах и социальных сетях.
Изменение SEO тэгов из компонента страницы
Кроме того, что мы можем указывать seo тэги в элементе script страницы, мы можем также указать их напрямую в шаблоне (template). Выглядеть это может примерно так.
<script setup lang="ts"> import { ref, computed } from 'vue' const title = ref('Мой блог о программировании') const description = ref('Здесь я делюсь своими мыслями о веб-разработке, JavaScript и Vue.js') const keywords = ref(['программирование', 'веб-разработка', 'JavaScript', 'Vue.js']) const themeColor = ref('#41b883') const structuredData = computed(() => { return JSON.stringify({ "@context": "https://schema.org", "@type": "BlogPosting", "headline": title.value, "description": description.value, "keywords": keywords.value.join(', '), "author": { "@type": "Person", "name": "Иван Иванов" } }) }) </script> <template> <div> <Head> <Title>{{ title }} | Мой технический блог</Title> <Meta name="description" :content="description" /> <Meta name="keywords" :content="keywords.join(', ')" /> <Meta name="theme-color" :content="themeColor" /> <Link rel="canonical" href="https://example.com/blog" /> <Style type="text/css"> body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; } h1 { color: v-bind(themeColor); } </Style> <NoScript> <Meta name="robots" content="noindex, nofollow" /> </NoScript> <script type="application/ld+json" v-html="structuredData"></script> </Head> <main> <h1>{{ title }}</h1> <p>{{ description }}</p> <ul> <li v-for="keyword in keywords" :key="keyword">{{ keyword }}</li> </ul> </main> </div> </template>
Компонент <Head> используется для группировки метатегов и других элементов, которые обычно находятся в <head> HTML-документа.
Продолжить знакомиться со всеми возможностями Nuxt можно здесь:
https://webkyrs.info/razdel/nuxt
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Email - зарегистрироваться / войти