Как использовать разметку Schema.org на вашем сайте и почему вы должны

Реклама

Поисковые системы удивительно мощный 7 альтернатив Google Search и их особенности торговых марокВы твердолобый пользователь Google? Попробуйте эти альтернативные поисковые системы. От конфиденциальности до помощи благотворительным организациям, эти поисковые системы могут дать вам несколько причин изменить способ просмотра. Читать далее . Они могут интерпретировать часто неясный язык, который мы используем, чтобы выяснить, что мы ищем, определить лучший ресурс, чтобы ответить на наши вопросы, и показать его нам за доли секунды.

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

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

Что такое разметка схемы?

Разметка схемы - это способ выделения определенных фрагментов структурированных данных.

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

У гугла есть своя интерактивный пример разметки схемы что детализирует рецепт яблочного пирога:

Выше вы можете увидеть JavaScript, который определяет время приготовления, общее время, количество рецептов и различные факты питания для рецепта.

На этом этапе следует отметить, что существует два основных способа разметки структурированных данных: с JSON Что такое JSON? Обзор дилетантаПланируете ли вы быть веб-разработчиком или нет, неплохо бы хотя бы знать, что такое JSON, почему он важен и почему он используется во всем Интернете. Читать далее или с встроенными тегами HTML. Google рекомендует метод JSON, но мы рассмотрим оба позже.

Вот как Google извлекает конкретную информацию о питании:

Schema.org имеет тысячи различных типов разметки, которые вы можете использовать, чтобы лучше показывать поисковым системам информацию на вашей странице. Например, тип TechArticle включает, помимо прочего, следующие атрибуты:

• proficiencyLevel
• WordCount
• зрительская аудитория
• создатель
• Дата создания
• Дата изменена
• datePublished
• publishingPrinciples
• typicalAgeRange

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

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

Преимущества разметки схемы

ХОРОШО. Разметка схемы сообщает поисковым системам, что находится на вашей странице - в чем дело?

Google формулирует это так:

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

Например, вы можете увидеть даты тура для предстоящего тура Slayer, отображаемые непосредственно в результатах поиска:

Или получите конкретную информацию о фильме при поиске:

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

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

Начало работы со структурированными данными

Теперь, когда вы увидели преимущества использования разметки Schema.org, пришло время начать погружение. Мы начнем с самого простого инструмента: Google Data Highlighter.

Вам нужно, чтобы ваш сайт был подключен к поисковой консоли Google (ранее известной как Инструменты для веб-мастеров Получите более глубокую информацию о поиске для своего сайта с помощью инструментов для веб-мастеров Поисковые запросыИзменения в инструменте поисковых запросов в Google Webmasters могут изменить способ исследования темы. Создание контента в Интернете требует творческого подхода и ориентации на пользователя, а также много исследований ключевых слов. Читать далее ). Если вам нужна помощь в настройке, проверьте Полезное прохождение Йоста.

После этого войдите в консоль поиска и нажмите Внешний вид поиска> Data Highlighter. Ударь Начать выделение Кнопка на правой стороне экрана.

Затем вам нужно будет ввести URL-адрес страницы, которую вы хотите пометить, и выбрать тип разметки, которую вы будете делать. В данном конкретном случае мы будем использовать тип разметки «Статьи».

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

Теперь вы увидите разделенный экран: ваша страница слева и доступные поля разметки справа.

Это действительно просто отсюда. Просто начните выделять! Всякий раз, когда вы выделяете текст (или нажимаете на изображение), появляется маленькое меню, в котором вы можете выбрать тип выделенной вами информации.

Здесь я выделил заголовок страницы. Все, что мне нужно сделать, это нажать «Заголовок» в меню.

Теперь заголовок заполняется на правой панели.

Я продолжу, выделив автора, дату публикации, основное изображение и категорию (я выделил теги в верхней части статьи, и все три были импортированы как категории).

И мы сделали! Вот и все, что нужно сделать.

Когда вы нажмете ВыполненоData Highlighter поможет вам применить эту разметку к другим аналогичным страницам на вашем сайте.

Добавление более подробной информации

Data Highlighter позволяет только поцарапать поверхность разметки структурированных данных. Как вы видели выше, я смог добавить только несколько атрибутов к этой статье. Тип Article на Schema.org содержит гораздо больше атрибутов, которые можно установить.

Что нам делать, если мы хотим добавить больше деталей к разметке схемы?

На этом этапе вам придется погрузиться в код. Как я упоминал ранее, существует два основных способа представления структурированных данных: с помощью JSON и встроенных тегов HTML. Поскольку HTML-теги 17 простых примеров кода HTML, которые вы можете выучить за 10 минутХотите создать простую веб-страницу? Изучите эти примеры HTML и попробуйте их в текстовом редакторе, чтобы увидеть, как они выглядят в вашем браузере. Читать далее немного более интуитивно понятны, мы сначала рассмотрим их.

Встроенная HTML-разметка Schema.org

В качестве примера мы отметим простое предложение: «Я живу в Денвере». В HTML это будет просто представлено так:

Я живу в Денвере.

Чтобы начать разметку, нам нужно указать, что это конкретное предложение относится к человеку (показывается типом элемента Персона). Вот как мы это делаем:

Я живу в Денвере.

Теперь поисковая система будет знать, что все, что содержится в этом

Далее мы добавим атрибут разметки: homeLocation. Schema.org определяет homeLocation как «место контакта для проживания человека».

Нам нужно добавить этот конкретный атрибут в HTML. Вот как мы это делаем:

я живу в Денвер.

Теперь «Денвер» определяется как homeLocation собственности, и Google знает, что человек, указанный в этом пункте, живет там.

Если мы изменим предложение на «Я живу и работаю в Денвере», мы можем показать это тоже:

Я живу и работаю в Денвер.

Денвер теперь идентифицирован как homeLocation а также расположение работы. (Спасибо Ллойд Банку и Unor в Stack Exchange за изложив этот пример.)

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

Разметка Schema.org с помощью JSON

Google рекомендует использовать JSON-LD (нотация объектов JavaScript для связанных данных) для разметки схемы. Самое большое преимущество этого метода в том, что он делает ваш HTML намного чище. Если вы вернетесь к редактированию страницы и увидите десятки страниц кода с разметкой, вы не будете счастливы.

Разметка JSON по-прежнему требует много места, но она отделена от вашего HTML, что упрощает поддержку.

Допустим, у вас есть книжный магазин под названием Harker's, и вы включили следующую информацию на своей странице контактов:

Телефон: 555-8710. Адрес: 749 Stoker St., Боулдер, Колорадо. Часы работы: 10–9 с понедельника по пятницу, 11–8 субботы, 12–5 воскресенья

Вот как это можно представить с помощью JSON-LD:

Это идет в заголовке вашей страницы. Как вы можете видеть, это займет много места, потому что этот контент почти наверняка также будет отображаться на вашей странице в HTML. Так что все, что вы хотите отметить, будет написано дважды.

Несмотря на это дублирование, метод JSON часто предпочтительнее, поскольку он разделяет разметку схемы и ваш HTML. Многие HTML лучшие практики 9 ошибок, которые вы не должны делать при создании веб-страницыСледующие ошибки HTML-кодирования легко сделать, но если вы их исправите раньше, чем позже, ваша страница будет выглядеть лучше, ее будет легче поддерживать и она будет работать так, как вы этого хотите. Читать далее покажется немного странным, пока вы не поймете, что они облегчают обслуживание сайтов. Это тоже самое.

Добавление разметки схемы на ваш сайт

Теперь, когда вы увидели несколько разных способов добавления нотации структурированных данных на свой сайт, вы можете начать! Хорошей идеей будет начать с Data Highlighter и двигаться дальше. Документация по Schema.org - основной ресурс, но его немного сложно просмотреть.

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

Вы использовали разметку Schema.org на своем сайте? Есть ли у вас какие-либо советы для владельцев сайтов или разработчиков, желающих начать? Поделитесь своими мыслями в комментариях ниже!

Изображение предоставлено: iinspiration через Shutterstock.com