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

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

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

05.09.2023 07:46

SimbirSoft_frontend 0 1000 Источник

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

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

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

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

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

Создание микроразметки с помощью 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 на своем сайте:

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

Например, в микроразметке статьи с несколькими авторами в поле “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>

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

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

<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.