- Как пользоваться Schema.org
- Определить тему
- Конкретные теги
- Время тестировать
- результат
- Вот как будет выглядеть наша страница Якисоба в Google:
Интернет основан на языке HTML, разработанном с целью отображения визуального контента для людей. И его успех неоспорим, как мы видим с запуском нового HTML5. Однако у него есть слабость в том, что он не может помочь роботам поисковых систем понять, что находится внутри контента.
Чтобы обойти это, у нас есть несколько вариантов, которые помогут вам лучше определить, о чем ваша страница, например, пометить контент через формат микроданных , Этот формат определяет некоторые атрибуты, которые должны быть вставлены в теги HTML в кодах страницы. Атрибуты служат для того, чтобы указать сканерам, что контент, например, о фильмах или, в блоге о кулинарии, говорит о рецепте. Целью этого является дальнейшее развитие семантическая сеть ,
Schema.org - это инициатива трех основных поисковых систем (Google, Yahoo и Bing) по предоставлению набора стандартных типов, которые будут использоваться в формате микроданных, таких как специальные свойства для местного дохода или бизнеса . Целью Schema является стать основным ориентиром при использовании разметки контента в HTML.
Поскольку Google всегда хочет предоставлять более качественные результаты, и одним из способов является использование богатых фрагментов (рисунок 1). Чтобы сделать это, инструмент нуждается в помощи разметки, чтобы четко идентифицировать информацию и лучше понять, что такое контент, который выходил бы за пределы возможностей современных алгоритмов, даже если они очень продвинуты.
Благодаря этим наценкам и постоянным улучшениям в способности идентифицировать контент, Google сегодня может похвастаться в 10 раз большим количеством фрагментов, чем несколько лет назад. Вот и пришло время изучить и применить эту новинку для повышения производительности вашего сайта!
Для вас, у которых есть веб-сайт, есть большое преимущество, вы заметите увеличение рейтинга кликов (CTR), учитывая, что ваше объявление будет показываться более заметно и привлекает внимание всех, кого вы ищете.
Как пользоваться Schema.org
Количество вариантов довольно велико, есть сотни типов для самого разного контента, такого как музыка, фильмы, организации, телешоу, продукты и даже рецепты! В большинстве из них есть больше уровней, таких как Событие , которые более подробно, такие как:
- Бизнес событие
- Детский праздник
- Комедия
- Танцевальное событие
Теперь давайте посмотрим, как вы можете получить код и помочь вашему сайту повысить рейтинг кликов. Я не намерен здесь использовать все возможные варианты, потому что есть десятки, и это не будет очень дидактическим.
Определить тему
Сначала вам нужно выбрать объем вашего контента на собственном веб-сайте Schema. Увидеть это небольшой список наиболее используемых ,
Если вы хотите что-то более конкретное, то, что рекомендуется, см. вот полный список ,
Изучите веб-сайт Schema, чтобы лучше понять возможности и улучшить отображение вашего сайта.
Необходимо сначала уточнить, какая тема у вашего сайта. О чем это? Обзоры фильмов? Новости технологий и гаджетов? Рецепт показа?
Давайте возьмем последнее в качестве примера с изображением страницы, которое мы будем использовать в качестве ссылки:
- Выберите тип
Мы копируем URL-адрес самой страницы рецепта на сайт и включаем его в тег <div>. Это необходимо всякий раз, когда вы начинаете помещать itemscope itemtype = "specific URL". Проверьте ниже:
<div itemscope itemtype = "http://schema.org/Recipe"> </ div> Код 1
- Включить свойство в изображении
Теперь вам нужно будет определить ключевые элементы на вашей странице. Для доходного сайта изображение очень важно, поэтому оно уже вставлено в начале. Как вы можете видеть в коде 2 (ниже), всякий раз, когда вы используете разметку, вам нужно будет включить ее в тег и поместить itemprop = "НЕДВИЖИМОСТЬ" . В этом конкретном случае изображения это itemprop = "изображение"
<div itemscope itemtype = "http://schema.org/Recipe"> <img itemprop = "image" src = "yakisoba.jpg" alt = "Плита Якисоба" /> Код 2
- Включить недвижимость на H1
В последней строке кода 3 обратите внимание, что itemprop появляется снова, чтобы указать, что рецепт Якисоба - это имя содержимого страницы. Тогда, как я объяснил ранее, он должен выглядеть как itemprop = "name"
<div itemscope itemtype = "http://schema.org/Recipe"> <img itemprop = "image" src = "yakisoba.jpg" alt = "Плита Якисоба" /> <h1 itemprop = "name"> Рецепт Якисоба </ h1> </ div> Код 3
Конкретные теги
Отметки, которые мы используем выше, такие как имя и изображение, являются общими и служат для различного контента на сайте, такого как люди или компании, фильмы или рецепты.
Что будет иметь значение, так это использование более конкретной маркировки для вашего сайта, в нашем случае, времени подготовки и составляющих нашего дохода.
<div itemscope itemtype = "http://schema.org/Recipe"> <img itemprop = "image" src = "yakisoba.jpg" alt = "Плита Якисоба" /> <h1 itemprop = "name"> Рецепт Yakisoba </ h1> <p itemprop = "recipeCuisine"> Китайская еда <p itemprop = "recipeYield"> 3 порции </ p> <p> Время приготовления: <meta itemprop = "totalTime" content = " Пакет пасты </ li> <li itemprop = "ингридиенты"> 2 столовые ложки масла </ li> <li> Ингредиенты </ li> </ li> </ li> </ li> </ li> </ li> <li itemprop = "ингридиенты"> 1 зубчик чеснока </ li> <li itemprop = "ингридиенты" recipeInstructions "> Нагрейте сковороду и поместите провод масла. Теперь сложите все ингредиенты вместе. Пусть это выглядит аппетитно! =] </ p> </ div> Код 4
Чтобы включить содержимое, обязательно проверьте значения на странице схемы. Если не ясно, какие форматы нужны, посмотрите на странице Тип , которая предоставляет более подробное объяснение.
Проверьте изображение для рецептов:
Время тестировать
Важно, чтобы вы использовали собственный инструмент Google, Инструмент тестирования Rich Snippets , чтобы увидеть, правильно ли вы применили все теги внутри тегов.
Введите URL страницы, которую вы настраиваете.
Обратите внимание, что в дополнение к показу того, как будет выглядеть отображение расширенного фрагмента , сам инструмент предлагает анализ, идентифицирующий коды, указывающие, верны они или нет. На рисунке 4 все атрибуты установлены правильно, потому что они черного цвета (по умолчанию) и будут красными, если они ошибочны.
Если у вас возникают проблемы при разработке кода, у вас есть возможность использовать некоторые инструменты, которые автоматически делают это, такие как Создатель схемы , который предлагает несколько вариантов и просто введите содержимое в каждом поле.
Тем не менее, я всегда рекомендую взглянуть на результат, чтобы убедиться, что все настроено правильно.
результат
После того, как вы правильно создали все эти теги, ваш сайт может - поскольку Google не гарантирует расширенный фрагмент - показываться в результатах более заметно, как показано ниже.
Таким образом, это привлечет гораздо больше внимания к вашей ссылке и увеличит ваш CTR , то есть значительно большее количество посещений вашего сайта при каждом его отображении в результате.
Вот как будет выглядеть наша страница Якисоба в Google:
Обзоры фильмов?
Новости технологий и гаджетов?
Рецепт показа?