Введение в микроразметку в Nuxt.js: как это работает

Привет, Хабр! Меня зовут Павел, я JS-разработчик SimbirSoft. За три года работы во фронтенде я убедился, что микроразметка необходима для оптимизации и улучшения UX на сайте, и считаю ее важным инструментом при разработке. Микроразметка в целом — распространенный феномен, но что мы знаем о ней, используя Server-Side-Rendering (SSR)? Разберёмся по порядку.

Микроразметка — это метод структурирования данных на веб-страницах с применением особых тегов и атрибутов. С помощью нее поисковые системы и другие сервисы могут лучше понимать контекст и смысл информации на страницах. 

Микроразметка играет важную роль в SEO-оптимизации, увеличении скорости загрузки страниц и улучшении пользовательского опыта на сайте. Информативные сниппеты дают возможность получить качественные переходы, поскольку пользователь сразу понимает, что он найдет на странице. И как следствие, мы имеем больше трафика без увеличения бюджета на продвижение сайта и бизнеса в целом.

На что влияет микроразметка:

1. Улучшение SEO-оптимизации сайта: поисковики более точно понимают содержимое страницы и могут лучше ранжировать ее в результатах выдачи. Это способствует росту посещаемости сайта и привлечению новых пользователей.

2. Увеличение скорости загрузки страниц: микроразметка позволяет поисковым системам более эффективно парсить и обрабатывать страницы, что в свою очередь может сократить время загрузки страницы. Это важный фактор для удовлетворенности пользователей и повышения их уровня вовлеченности.

3. Улучшение пользовательского опыта на сайте: поисковики показывают дополнительные информационные элементы в результатах выдачи, такие как рейтинги, отзывы, цены и другие. Это может повысить информативность и привлекательность страниц, что в свою очередь увеличит вероятность перехода пользователей на ваш сайт.

Создание микроразметки с помощью Nuxt.js

Установка и настройка микроразметки для Nuxt.js с помощью сторонних плагинов

Библиотека Nuxt.js предлагает различные плагины для создания и управления микроразметкой на вашем сайте. Существует несколько готовых плагинов для микроразметки, которые вы можете использовать в Nuxt.js. Вот некоторые из них:

vue-meta

Позволяет управлять метаданными страницы, включая микроразметку. С помощью него можно добавлять метаданные к каждой странице и устанавливать их динамически. Более подробную информацию об использовании vue-meta вы можете найти в документации Nuxt.js.

nuxt-seo

Удобный инструментом для управления SEO мета-тегами, включая микроразметку. Он позволяет вам определить мета-теги внутри файлов .vue компонентов и автоматически генерирует соответствующие мета-теги для каждой страницы. Вы можете найти примеры использования в репозитории плагина на GitHub.

vue-jsonld

Предоставляет удобный способ генерировать микроразметку в формате JSON-LD. Он позволяет вам определить свои собственные компоненты, представляющие микроразметку, и легко интегрировать их в компоненты Nuxt.js. Более подробную информацию о vue-jsonld вы можете найти в репозитории плагина на GitHub.

Это только некоторые из доступных плагинов. Вы также можете использовать другие пакеты и библиотеки для генерации микроразметки в соответствии с вашими потребностями, например, «@nuxtjs/google-gtag» для добавления Google Analytics или «@nuxtjs/robots» для управления файлом robots.txt.

Создание собственного плагина для микроразметки

Если нужная вам функциональность не предоставляется сторонними плагинами, вы всегда можете создать собственный плагин для микроразметки в Nuxt.js. Для этого вам потребуется определить необходимые теги и атрибуты для вашей микроразметки, а затем реализовать логику внутри плагина для добавления и управления этой микроразметкой на вашем сайте. 

Пример простого плагина на JavaScript, который можно применить для установки микроразметки в Nuxt.js:

// plugins/microdata.js import Vue from 'vue';  // Ваша логика реализации микроразметки находится здесь. // Например, вы можете использовать библиотеку schema.org, для создания микроразметки. export default ({ app }, inject) => {   // Определите метод установки микроразметки   const setMicrodata = () => {     const data = {       // Получить данные текущей страницы       // Определите здесь свои свойства микроразметки       // Пример: имя, описание, изображение и т.д.     };     const script = document.createElement('script');     script.type = 'application/ld+json';     script.text = JSON.stringify(data);     document.head.appendChild(script); // Добавьте скрипт микроразметки в head   };   inject('setMicrodata', setMicrodata); // Внедрите метод setMicrodata во все компоненты Vue. };

Чтобы активировать этот плагин в Nuxt.js, добавьте следующую конфигурацию в nuxt.config.js:

plugins: [     { src: '~/plugins/microdata.js', mode: 'client' }, ]

Примеры использования микроразметки в Nuxt.js для различных типов контента

Микроразметка для элементов контента

Микроразметка может быть полезна на веб-странице для таких элементов, как статьи, товары, категории и другие. Например, вы можете использовать специальные теги и атрибуты для указания названия, автора, даты публикации, описания и другой информации о статье. Поисковым системам это поможет более точно понимать и анализировать ваш контент.

Максимально простой пример для понимания, как выглядит код с микроразметкой:

<template>   <div>     <h1 itemprop="name">Название статьи</h1>     <time datetime="2023-07-31" itemprop="datePublished">2023-07-31</time>     <article itemprop="articleBody">       <p>Контент статьи</p>     </article>     <div itemprop="author" itemscope itemtype="http://schema.org/Person">        <p>Автор: <span itemprop="name">Автор статьи</span></p>     </div>   </div> </template>

А вот как выглядит этот же код без неё:

<template>   <div>     <h1>Название статьи</h1>     <article>       <p>Контент статьи</p>     </article>     <div>        <p>Автор: Автор статьи</p>     </div>   </div> </template>

Микроразметка для изображений

Микроразметка также может быть применена к изображениям на веб-странице. Например, вы можете использовать атрибуты «alt», «title» и другие для указания описания изображения, его размеров и другой информации. Это поможет поисковым системам лучше понять содержимое изображений и улучшит их отображение в результатах.

<template>   <div>     <img :src="imageUrl" :alt="imageAlt" itemprop="image">     <p itemprop="description">Описание изображения</p>   </div> </template>

Микроразметка для видео

Если на вашей странице присутствуют видео, то вы также можете использовать микроразметку для их лучшего понимания поисковыми системами. Например, вы можете применить атрибуты «video» и другие, чтобы указать заголовок, описание, продолжительность, автора и другую информацию о видео. Это поможет повысить видимость ваших видео в результатах поиска и привлечь больше пользователей.

<template>   <div>     <video :src="videoUrl" controls itemprop="video">       Ваш браузер не поддерживает видео.     </video>     <div itemprop="description">       <h2>{{ videoTitle }}</h2>       <p>{{ videoDescription }}</p>     </div>   </div> </template>

Микроразметка для ссылок

Когда дело доходит до ссылок на вашей странице, микроразметка также может быть полезна. Используйте различные атрибуты, такие как «href», «target», “rel” и другие, чтобы указать тип ссылки (например, на страницу товара или категории) или добавить дополнительную информацию о ссылке. Это поможет поисковым системам лучше понять содержимое ссылок и предоставить более точные результаты. 

<template>   <div>     <a href="www.example.com" itemprop="url">Посетите example.com</a>   </div> </template>

Разберем важность применения атрибутов на примере одного из них — “rel” (от англ. «relationship» – отношение), влияющего как на безопасность, так и на поведение поисковых роботов:

“rel” — это атрибут HTML, описывающий ссылку. Он обозначает, что это за ссылка и на какой адрес она ведет. Работает это следующим образом: когда ссылка направляет пользователя на адрес, атрибут рассказывает поисковым системам, почему именно туда.

Рассмотрим примеры значений атрибута “rel”:

• rel=nofollow — применяется, когда нужно, чтобы страница, на которую ссылается пользователь, не увеличила свой ссылочный вес благодаря этой ссылке. Другими словами, по этой ссылке не передается индекс цитирования, используемый Яндексом, и PageRank, используемый Google.

<a rel="nofollow" href="index.html">Рандомная страница</a>

• rel=alternate — используется для указания того, что ссылка ведет на альтернативное изображение страницы:

<a rel="alternate" type="application/pdf" href="page.pdf"> Страница в формате PDF </a>

• rel=canonical — указывает на предпочитаемый адрес, который будет участвовать в поиске. Используется в теге <header>:

<link rel="canonical" href="http://www.simbirsoft.com/">

• rel=author — указывает на то, что приведенная ссылка относится к информации об авторе данной страницы или статьи.

<a href="/author-page.html" rel="author">Текст ссылки</a>

• rel=license — указывает на то, что по ссылке размещено лицензионное соглашение, которое относится к основному тексту страницы.

<a rel="license" href="license.html">Посмотреть лицензионное соглашение</a>

Мы рассмотрели лишь несколько примеров, на деле же значений для атрибута “rel” множество.

Подводные камни

При использовании микроразметки в Nuxt.js необходимо быть внимательным, чтобы избежать некоторых распространенных ошибок:

Неправильное использование типа микроразметки / Использование микроразметки без учета специфики контента. Это один из основных рисков. Нужно обратить внимание на то, что каждый тип контента требует своего собственного набора тегов и атрибутов. Неправильное определение типа может привести к неверному выводу информации в поисковых результатах.

Например:

• Недостаточная информация. При использовании микроразметки важно предоставить все необходимые атрибуты и свойства для каждого элемента. Если информация неполная или неправильная, поисковые системы могут неправильно интерпретировать контент и отображать его некорректно.

• Дублирование микроразметки, если один и тот же элемент контента имеет несколько экземпляров микроразметки с одними и теми же свойствами. Это может сбить поисковые системы и вызвать непредсказуемое поведение в результатах выдачи.

• Использование микроразметки для невалидных данных. Некорректные или ложные данные могут негативно повлиять на оценку вашего сайта поисковыми системами и ухудшить показатели SEO.

Пример:

<template>   <div>     <!— Неправильное использование микроразметки —>     <div itemtype="http://schema.org/Person">       <h1 itemprop="name">{{ name }}</h1>       <p itemprop="jobTitle">{{ jobTitle }}</p>     </div>   </div> </template>

В данном случае микроразметка «Person» неправильно применена для обертки всего блока с данными. Каждый элемент, который нужно пометить с помощью микроразметки, должен быть отдельным HTML-элементом. В данном примере правильным использованием микроразметки было бы пометить отдельные <h1> и <p> элементы, как показано в примере ниже:

<template>   <div>     <!— Правильное использование микроразметки —>      <div>         <h1 itemprop="name">{{ name }}</h1>         <p>     <span itemprop="jobTitle">{{ jobTitle }}</span>   </p>     </div>   </div> </template>

В этом примере каждый элемент, который требуется пометить с помощью микроразметки, помещен в отдельный HTML-элемент с необходимыми атрибутами (itemprop). Нужно помнить, что правильное использование микроразметки помогает поисковым системам лучше понять содержимое страницы.

Заключение

Что нужно, чтобы эффективно пользоваться микроразметкой для Nuxt.js на своем сайте:

1. Хорошо изучить документацию по использованию микроразметки и типов контента, чтобы правильно определить теги и атрибуты для каждого элемента.

2. Предоставить все необходимые атрибуты и свойства для каждого элемента контента, чтобы обеспечить полноту и точность информации.

Например, в микроразметке статьи с несколькими авторами в поле “author” передается массив:

<html>   <head>     <title>Введение в микроразметку в Nuxt.js: как это работает</title>     <script type="application/ld+json">     {       "@context": "https://schema.org",       "@type": "NewsArticle",       "headline": "Введение в микроразметку в Nuxt.js: как это работает",       "image": [         "https://example.com/photos/1x1/photo.jpg",         "https://example.com/photos/4x3/photo.jpg"        ],       "datePublished": "2023-07-31T08:00:00+08:00",       "dateModified": "2023-07-31T09:20:00+08:00",       "author": [{           "@type": "Person",           "name": "Pavel K",           "url": "https://example.com/profile/janedoe123"         },{           "@type": "Person",           "name": "Ivan R",           "url": "https://example.com/profile/johndoe123"       }]     }     </script>   </head>   <body>   </body> </html>

3. Избегать дублирования микроразметки, чтобы не получить непредсказуемого поведения поисковых систем.

4. Использовать только валидные данные для микроразметки, чтобы предоставить поисковикам достоверную информацию. Если валидные – значит правильные, достоверные, существующие, если невалидные – значит неправильные или недействующие. Интернет всё запомнит. 

Например, валидный почтовый адрес: 

<div itemprop="address" itemscope="" itemtype="">   <span itemprop="streetAddress">Проспект Ленина 38</span>   <span itemprop="postalCode">430000</span>   <span itemprop="addressLocality">Саранск, Россия</span> </div>

Учитывая эти рекомендации, вы сможете эффективно использовать микроразметку в Nuxt.js на своем сайте, улучшить SEO-оптимизацию, сделать контент более заметным в поисковых системах и обеспечить лучший UX. 

Спасибо за внимание!

Авторские материалы для frontend-разработчиков мы также публикуем в наших соцсетях – ВКонтакте и Telegram.