Семантическая разметка. Пример семантической разметки
Разметка может сделать ваш сайт более заметным в Поиске Яндекса и таким образом привлечь больше посетителей, принадлежащих целевой аудитории. Однако, напрямую семантическая разметка не влияет на ранжирование.
Я прочитал про стандарт Schema.org. Как настроить его на своем сайте?Ознакомьтесь с разделами нашей помощи и воспользуйтесь инструментами для работы с разметкой. Если стандартные способы внедрения вам не подходят (например, из-за сложной вёрстки), напишите в клуб Поиска . Скорее всего, вам понадобится помощь программиста.
Schema.org описывает много разных типов данных, все ли они поддерживаются Яндексом?Нет, на данный момент мы поддерживаем не все типы данных Schema.org. Полный список обрабатываемых типов приведен в разделе Какие данные можно передать .
Я настроил у себя на сайте Schema.org. Как убедиться, что все заработало?Сначала убедитесь, что размеченные данные правильно и без ошибок распознаются. Если разметка верна и размеченные данные используются сервисами Яндекса, то через некоторое время (обычно - две недели) эти данные появятся на соответствующих страницах.
Если разметка верна, но данные не проходят ручную модерацию, вы получите сообщение от модератора в интерфейсе Я.Вебмастера. Модератор расскажет, почему предоставленные данные не могут быть использованы, и предложит внести коррективы.
Почему сниппеты не показываются, хотя моя разметка успешно распознается вашим валидатором?Убедитесь, что Яндекс может использовать ваши данные в сниппетах. Все сниппеты, которые могут составляться из ваших данных, описаны в разделе Какие данные можно передать .
Прежде, чем появиться в сниппетах, данные должны быть:
корректно размечены;
проиндексированы;
промодерированы.
Если все требования Яндекса выполнены, то модератор одобряет использование данных с вашего сайта. Через некоторые время (около двух недель) сниппеты с вашими данными появятся в Поиске.
Что лучше использовать - микроформаты или Schema.org? Как робот будет обрабатывать сайт, если я использую и то, и другое?Наши алгоритмы не отдают предпочтение какому-либо одному типу разметки. Это означает, что вы можете использовать тот формат, который вам кажется более удобным. Тем не менее, мы рекомендуем использовать Schema.org как более современный, полный и активно развивающийся стандарт.
Семантическая разметка является одним из самых мощных - но, как ни странно, достаточно редко используемых - инструментов поисковой оптимизации. По сути, это способ облегчить поисковым системам процесс извлечения и обработки данных для их более информативного представления в поисковой выдаче. А это увеличивает потенциал кликабельности ваших ссылок в результатах поиска.
Когда покупатели ищут что-либо в Google, Yandex или Bing, они наверняка получают длинный список из рекламных объявлений и результатов по органическому поиску. Если ваша страница хорошо проранжирована для поиска конкретного товара, ссылка на нее появятся в результатах. Но это всего часть задачи, ведь на ссылку еще кто-то должен кликнуть.
Семантическая разметка делает результат поиска более информативнымОдин из способов выделится в списке результатов поиска - это добавление в него больше релевантной информации, например, рейтинга товара, цены, а также информации об отзывах и наличии.
На картинке ниже вы можете видеть результат по поиску в Google за 20 июня 2016 года. Это так называемый сниппет - краткое описание страницы сайта в результатах поискового запроса. Как видите, плойку PHILIPS ProCare на Rozetka.com.ua оценили четыре покупателя, поставив по пять звезд. Цена товара - 999 гривен, и он есть в наличии.
Этот результат поиска в Google выдает структурированные данные.
Google понимает и отображает эту дополнительную информацию благодаря разметке структурированных данных на этой конкретной странице товара. Эта дополнительная работа, которую проделали в Rozetka.com.ua, не повлияет напрямую на результаты ранжирования. Но если страница попадает в результаты поиска пользователю в таком виде, она имеет намного больше шансов получить клик. Поэтому в конечном итоге семантическая разметка улучшает позиции страницы в выдаче.
Семантическая разметка и словарь в формате микроданныхИтак, существует некий стандарт семантической разметки данных в сети Schema.org , созданный совместно Google, Bing и Yahoo в 2011 году. Это согласованная схема семантической разметки, которая позволяет поисковым системам понимать, что делать с информацией на вашем сайте.
Словарь Schema.org применяется вместе с микроданными - веб-стандартом семантической разметки HTML-страниц, который позволяет описывать смысл информации HTML-элементов с помощью специальных машиночитаемых атрибутов. Другими словами, вы добавляете специальные теги к HTML-коду своих страниц - и поисковым системам становится ясно, о чем на них идет речь, и что с этим делать.
Чтобы поисковик распознал ваши дополнительные данные о товаре, размечайте соответствующие страницы по схемам Product , Offer и AggregateRating .
Применение словаря Schema.org с микроданными для страницы товара в интернет-магазине начинается с внешнего элемента, обрамляющего информацию о продукте. В этом примере мы используем div.
…
Используя атрибут itemscope, добавляем дополнительную информацию о продукте.
Некий классный продукт
Это просто отличный продукт. Вы будете очень довольны.
123456789
Семантическая разметка и JSON-LD
С недавних пор Google стал отдавать больше предпочтения JSON for Linking Data или JSON-LD, а не микроданным. В формате JSON-LD и правда есть несколько преимуществ. Например, для его использования не нужно включать HTML-код в тело страницы. Достаточно вставить скрипт в. Сначала мы устанавливаем тип:
…
Ключевым понятием этого способа разметки является контекст (@context). С его помощью вы, например, можете указать, что в разметке используется семантика schema.org:
{
«@context»: «http://schema.org/»,
«@type»: «Product»,
«name»: «Некий классный продукт»,
«image»: «некий-классный-продукт.png»,
«description»: » Это просто отличный продукт. Вы будете очень довольны.»,
«sku»: “123456789″,
«aggregateRating»: {
«@type»: «AggregateRating»,
«ratingValue»: «4»,
«reviewCount»: «1,987»
},
«offers»: {
«@type»: «Offer»,
«priceCurrency»: «UAH»,
«price»: «999»,
«availability»: «http://schema.org/В наличии»
}
}
Семантическая разметка - будь она выполнена с помощью микроданных или JSON-LD - позволит вам лучше представить свои товары в результатах поисковой выдачи, значительно увеличив тем самым их кликабельность и, соответственно, свои продажи.
В сегодняшней статье речь пойдет о довольно избитой теме, обсуждаемой на многих форумах, блогах и прочих сайтах с давних времен. Как показывает наша практика, более 50% владельцев сайтов не понимают, что такое семантическая разметка данных и для чего она нужна. Используют её либо с ошибками, либо просто чтоб было. О видах семантической разметки вы можете прочитать .
Что такое семантическая разметка?Подходящего определения на просторах Интернета мне найти не удалось, поэтому я его решил составить его из 4 наиболее подходящих определений.
Семантическая разметка - это способ формализовать значения при помощи различных стандартов (словарей) о разнообразных сущностях (событиях, организациях, людях, товарах и так далее) при помощи синтаксиса (способа использования словаря) на веб-страницах ресурсов.
Получилось немного замудрено… Однако из данного определения мы понимаем, что семантическая разметка - это некие правила, подчиняющиеся определенным стандартам или словарям. Которые, в свою очередь, призваны помочь поисковым системам (и не только) понимать содержимое страниц сайтов.
Давайте перечислим наиболее известные стандарты (словари) и остановимся более подробно только на двух из них, но об этом чуть позже.
Виды разметки данныхData Vocabulary - стандарт разметки данных, которая разрабатывала компания Google до июня 2011 года.
Развитие стандарта приостановлено в связи с созданием словаря Schema.org. Поисковый робот Google может использовать данные, полученные с помощью данной разметки, но рекомендации сводятся к смене стандарта на Schema.org.
Dublin Core, или Дублинское ядро - стандарт, разработанный в 1995 году. Семантика Дублинского ядра была создана международной междисциплинарной группой профессионалов библиотечного и музейного дела, компьютерных наук. Представляет собой набор из метатегов, 15 основных и 3-х дополнительных свойств.
Признаков использования данных из этого стандарта в поисковых системах не обнаружено.
FOAF, или Friend of a Friend - «друг друга» - стандарт, созданный Либби Миллером и Дэном Брикли в 2000 году. Используется в основном для домашних страниц и социальных сетей. Решает задачу построения связей между людьми и объединению их.
Microformats, или же микроформаты - стандарт, созданный в 2005 году сообществом заинтересованных энтузиастов из WC3.
Данный стандарт был очень популярным до появления Schema.org и на многих сайтах используется до сих пор. На момент написания статьи Яндекс поддерживает следующие Microformats: hCard - формат разметки контактов (адресов, телефонов и т.д.); hRecipe - формат описания кулинарных рецептов; hReview - формат разметки отзывов.
Вроде со стандартом определились, с синтаксисом тоже.
Для начала определимся, какая основная цель разметки. Если вы прочитали статью о том, что с разметкой вам гарантировано место в топ-10, то это не так. Цель микроразметки - улучшить понимание сайта в глазах робота, отправить в базы знаний поисковых систем информацию, повысить CTR вашего сниппета (что косвенно может увеличить и ваш трафик и позиции). Но надо понимать, что это всё косвенные показатели. Сайты с использованием микроразметки и без неё ранжируются одинаково.
Теперь давайте разберем, какие данные на сайте стоит разметить и какие поддерживаются поисковыми системами на данный момент (так как поддерживаемых сущностей с каждым днем становится всё больше).
Более подробно разберем три наиболее встречаемых примера:
Разметка карточки товаров schema.orgТоварные карточки - размечаем по сущности Product. Реализация данного вида поможет получить нам следующий сниппет в Яндексе:
Не путать с товарным сниппетом в выдаче Яндекса, полученным при использовании.yml файла из Яндекс.Маркета или сервиса «Товары и цены» вебмастера Яндекса.
Каким образом получить данный сниппет?
У кого есть подобная проблема на кулинарных сайтах, возможно, у вас такая же причина. Каждый раз убеждаюсь, что справка - наше всё.)) Также хочется отметить качество саппорта Яндекса, выразить благодарность за оперативные ответы - переписка происходила практически в реальном времени.
Теперь перейдем к реализации разметки кулинарных сайтов.
40 мин.
Название рецепта
Порций 6
6шт.
Яйцаbr>
400гр.
Сахарный песок
……………………И т.д ингредиенты……………………………
100гр.
Какао
Торт Черепаха готовится не трудно, к тому же он бесспорно станет любимым тортом для ваших детей, поскольку выглядит он как симпатичная черепашка.
2100
Victory
.....
В Гугле наш красивый сниппет:
Мы разместим скриншот снипетта в Яндексе, когда информация обновится (ориентировочно через две недели).
UPD от 05.06.2017: Как и обещали, добавляем скрин из Яндекса:
- Валидатор от Яндекса https://webmaster.yandex.ru/tools/microtest/
- Валидатор от Google https://search.google.com/structured-data/testing-tool/
Слово «семантики» пришло в HTML из обычных лингвистических (языковедческих) дисциплин. Там, под понятием «семантика» понимаются разделы, изучающие значение и назначение человеческих языковых единиц. В отличие от реальных человеческих языков, в HTML языковые единицы изучать не нужно. В HTML, языковые единицы называются «тегами» и их назначение уже прописано в спецификации HTML - едином для всех веб-разработчиков документе. На данный момент, существует несколько вариаций на тему спецификации HTML (в зависимости от версии языка), но суть не в этом. Сейчас, нас и этой статьи - важно другое. Это наличие чёткого и внятного объяснения для каждой языковой единицы - тега HTML, в соответствующей спецификации HTML. Таким образом, если в реальной лингвистике человеческих языком, семантика - это изучение назначения непонятных слов и понятий, то в HTML наоборот, семантика - это правильное применение и использование уже готовых и объяснённых тегов.
Семантическая вёрстка веб-документаСемантическая вёрстка веб-страницы или семантический код HTML-документа - это вёрстка с правильным использования HTML-тегов в соответствии с их предназначением (семантикой). Кроме этого, семантическая вёрстка предполагает логичную и последовательную иерархию для построения всей веб-страницы, в соответствии с законами HTML-документа.
Чем отличается семантическая вёрстка от обычной
Семантическая вёрстка веб-документа противопоставляется обычной, при котором написание HTML-кода определяется только внешним видом веб-страницы. При семантической вёрстке, ряд элементов страницы имеют свои собственные теги, которые прямо отображают их назначение. Это и есть «семантика» в HTML. Так, например, структура простейшей веб-страницы при обычной вёрстке может выглядеть так:
Шапка сайта
Главное верхнее меню сайта
Дополнительное боковое сайта
Содержимое веб-страницы
Подвал сайта
Тогда, как при семантической вёрстке, структура той же самой веб-страницы будет иметь вид:
Шапка сайта
Главное верхнее меню сайта
Дополнительное боковое сайта
Содержимое веб-страницы
Подвал сайта
Как видно из примера, для обозначения и задания соответствующих стандартных элементов веб-страницы использованы соответствующие теги. Кроме этого, код гораздо проще. При этом, внешний вид такой страницы для человеческого глаза - останется абсолютно неизменным. Возникает резонный вопрос - а зачем тогда нужна семантическая вёрстка и разметка веб-страницы, если людям она не видна?
Семантическая вёрстка и разметка веб-страницы видна браузеру и роботам. Семантическая вёрстка и разметка позволяет более точно определять значимость отдельных элементов веб-страницы и всего текста в целом Поэтому, прежде всего - семантическая вёрстка нужна для улучшения робото-функционала сайта и, как следствие - лучшей его поисковой индексации. А, не об этом-ли, мы все мечтаем?
Семантическая вёрстка в HTML5Полный фурор и переворот понятия веб-семантики произошёл с появлением HTML5.
В HTML4 всё было довольно просто. Для оформления веб-страниц, написанных в соответствии с семантикой, достаточно было использовать внешние каскадные таблицы стилей (CSS) да пару нехитрых нововведений, вида замены тегов и на и . HTML5 - не в пример «семантичней» и это видно из приведённого примера.
Новые популярные семантические теги HTML5Прежде всего, - простой и понятный всем доктайп.
Проблемы совместимости HTML5 и XHTML
Принципиально, в совместимости HTML5 и XHTML - проблем нет никаких. Все новые браузеры прекрасно поддерживают теги HTML5 и выполняют их. Единственное огорчение ждёт любителей валидного кода. Потому что, большинство сайтов свёрстано не HTML, а в XHTML. И теперь, получается странная ситуация - доктайп от XHTML, а теги из HTML5. Валидатор «вешается и пишет красным». В настоящий момент, на такую «нестыковку» все закрыли глаза. А что делать? Ведь XHTML всегда был только производным языком от HTML.
Так что основной веб-язык, это всё-таки HTML5. В ближайшее время, проблемы совместимости HTML5 и XHTML, скорей всего будут решаться, либо простым игнорированием вопроса в пользу HTML5, либо простым добавлением тегов HTML5 в спецификацию XHTML. В любом случае, это будет простое решение, без фундаментальной перестройки положения вещей. Уж слишком он выстрадан, этот HTML5, чтобы теперь ещё всерьёз начинать возиться с XHTML5.
Плавный переход шаблона с XHTML на HTML5Как утверждают специалисты, HTML5 - это не одна большая вещь, это набор разных возможностей. Поэтому, начинать переходить с XHTML на HTML5 можно постепенно, по частям добавляя нужный код в свой шаблон. Валидатор XHTML ругнётся и всё вскорости образуется. Ведь всем остальным - «по барабану», теги HTML5 работают везде и вся. Для начала, можно изменить общую структуру своего шаблона, простой заменой классов CSS на семантические теги из примера «Чем отличается семантическая вёрстка от обычной».
HTML5 | Семантическая разметка сайта(Главное - начать)
Опять-же таки, как утверждают известные специалисты - «обновление» до HTML5 можно сделать простым изменением доктайпа. Элемент в HTML5 имеет предельно простой вид: . После такого «обновления», ровным счётом ничего не произойдёт, потому что все теги, определённые в HTML4, также поддерживаются и в HTML5. Что касаемо перехода с XHTML на HTML5, то тут я не рискнул на своём сайте так резко менять , решился только на постепенную замену части тегов да изменение структуры страницы.
Использование семантической разметки Shema.org — одна из последних тенденций в SEO. Семантическая разметка является одним из самых новых, мощных, и при этом точно наименее используемых методов поисковой оптимизации. После того, как вы поймете концепцию и способы семантической разметки, вы можете значительно улучшить позиции своего сайта в результатах выдачи поисковых систем (SERPs).
Моя цель в этой статье, показать вам, что начать использовать семантическую разметку Shema.org для вашего сайта достаточно просто.
Что из себя представляет семантическая разметкаСемантическая разметка — это код, который вы размещаете на своем сайте, чтобы помочь поисковым системам получить более информативные результаты по вашему сайту для пользователей поисковой выдачи. Если вы когда — либо использовали расширенные сниппеты, вы уже примерно понимаете, как это работает.
Вот пример локального бизнеса, который имеет разметку на странице с событиями. В выдаче это выглядит следующим образом:
Семантическая разметка сообщила поисковику, что нужно отобразить график предстоящих событий в городе таким образом. Это для пользователя, является исключительно полезным.
Семантическая разметка сообщает поисковым системам, что обозначают ваши данные, то есть их смысл (семантику). С семантической разметкой контент сайта индексируется и возвращается в результаты поиска другим способом, так как разметка говорит поисковой системе, что этот контент означает.
Например, скажем, в статье появляется слово «Иван Сергеев». Поисковая система видит это, и выводит в выдачу слова Иван Сергеев. Тем не менее, если поставить правильную семантическую разметку схемы вокруг имени «Иван Сергеев», поисковик поймет, например, что Иван Сергеев является автором статьи.
Schema.org объясняет это следующим образом
:
Большинство веб-мастеров знакомы с HTML-тегами на своих страницах. Как правило, HTML-теги сообщают браузеру, как отображать информацию, содержащуюся в теге. Например, Аватар сообщает браузеру, чтобы отобразить текстовую строку «Аватар» в формате заголовка 1. Тем не менее, HTML тег не дает никакой информации о том, что означает, что текстовая строка — «Аватар» может относиться к чрезвычайно успешному 3D фильм, или он может относиться к картинке у профиля на форуме, и это делает ваш текст более трудным для понимания поисковыми системами и отображения его для пользователей в поисковой выдаче.
Вот эту проблему и решает семантическая разметка Шема.орг
Семантическая разметка и ее уникальный словарь в формате микроданныхShema.org – сайт, созданный совместной командой из Google, Bing и Yahoo. Нечасто конкуренты собираются вместе, чтобы помогать друг другу, но Schema.org — именно такого рода межотраслевое сотрудничество. Итог этого сотрудничества — согласованный набор кода, который объясняет основным поисковым системам, что делать с данными на вашем сайте.
Что самое приятное — вам не нужно изучать новые языки программbрования, так как шема.орг использует обычный HTML.
Семантическая разметка была изобретена для пользователей
Если у сайта правильная семантическая разметка, пользователи могут видеть в результатах поиска не только обычную информацию, но и информацию о тематике сайта, о том, кто его создатели, где они находятся, что они делают, сколько стоят их товары, а также множество других вещей. Некоторые люди стали называть семантическую разметку «ваша виртуальная визитная карточка».
Это улучшение ориентированное на пользователей. Поисковые системы существуют для пользователей и чем более точную информацию они им дают, тем лучше для всех. Схема разметки помогает именно в этом, а значит подключая ее на свой сайт, мы улучшаем свои позиции в поисковой выдаче.
Схема разметки помогает вашему сайту быть выше в поисковой выдаче для всех видов типов контента. Существует разметка семантических данных
для:
Статей
Местных предприятий
Ресторанов
Телесериалов и рейтингов
Отзывах о книгах
Фильмах
Применение программного обеспечения
Мероприятий
Продуктов
для сотен других тематик и типов информации — от магазинов игрушек до медицинских графиков.
В одном из исследований установлено, что сайты с семантической разметкой находятся в среднем на четыре позиции выше в поисковой выдаче, чем сайты без нее. Хотя еще не совсем ясно, обусловлен ли этот более высокий результат только разметкой, но очевидна некоторая корреляция. На данный момент, одна треть результатов поиска Google включает сниппеты, которые содержат в себя разметку от шема.орг. Другими словами, есть миллионы сайтов, не использующих этот источник своего SEO-потенциала. При использовании семантической разметки вы автоматически опережаете подавляющее большинство ваших конкурентов.
Как использовать схемы разметки на своем сайтеТеперь, давайте поговорим о том, как использовать семантическую разметку на вашем сайте
.
Внимательно смотрите на ваш сайт и выполняйте следующие действия.
1.
Заходим Google’s Structured Data Markup Helper.
2. Выбираем тип данных, которые вы планируете разметить на своем сайте (или уже разместили)
Есть несколько вариантов в списке. Перечень не является исчерпывающим. Для образца мы будем использовать тип «Статьи» , так как это один из наиболее распространенных типов контента.
3. Вставляем в URL страницы или статьи, которую вы хотите разметить (также вы можете вставить туда свой HTML-код).
4. Затем нажимаем кнопку «Начать разметку (Start Tagging)»
Страница загрузится в инструмент разметке и вы увидите рабочее пространство для следующего этапа разметки — разметка элементов. Вы увидите вашу веб-страницу в левой панели, а элементы данных в правой панели.
5. Выделяем и выбериаем тип элементов, которые необходимо разметить.
Так как это статья, нужно выделить название статьи, чтобы добавить разметку «Name» разметку. После выделения названия я выбираю «Name» в панели инструментов.
Когда я выбираю «Name», инструмент добавляет его в «Элементы данных» Data Items в правой панели
6. Продолжаем добавлять элементы разметки.
Используйте список элементов данных в качестве руководства, и выделяйте другие детали в вашей статье, чтобы добавить их в список разметки. Вы, вероятно, не сможете пометить каждый элемент в списке. Просто добавьте все, что сможете.
7. Создаем HTML.
После того, как вы закончите, нажмите кнопку «Создать HTML»
На следующей странице вы увидите HTML вашей страницы с соответствующими микроданными, вставленными в местах, которые вы выбрали.
8. Добавляем схемы разметки на вашу страницу.
Зайдите в вашу CMS (или в исходный код, если вы не используете CMS) и добавьте выделенные фрагменты в соответствующие места. Найти желтые маркеры на полосе прокрутки, чтобы найти код сементической разметки.
Есть Простая альтернатива — загрузить автоматически сгенерированный HTML-файл и копировать / вставить его в CMS или исходный код.
При нажатии кнопки «Готово» вы увидите «Следующие шаги»
9. С помощью Structured Data Testing Tool вы увидите как ваша страница будет выглядеть с дополнительной разметки.
При необходимости можно редактировать HTML непосредственно в инструменте тестирования для того, чтобы обновить схему и просмотреть результаты снова.
Найдите схемы, которые используются чаще всего.
Schema.org предоставляет список наиболее распространенных типов схемы разметки. Вы можете посетить страницу Организация схем Organization of Schemas, чтобы увидеть этот список. Найдите там типы, которые лучше всего подходят для вашего бизнеса.
Найдите любой тип схем, которые вам нужны.
Как я уже говорил ранее, существует множество типов разметки. Чтобы получить полный список, посетите «The Type Hierarchy». Этот список содержит большинство доступных типов разметки.
Чем больше разметки, тем лучше.
Schema.org в инструкции четко объясняет: «чем больше контента вы размечаете, тем лучше». Однако учтите, что там также говорится: «Вы должны размечать только тот контент, который виден людям, которые посещают страницы, а не содержится в скрытых DIV или других скрытых элементах страницы». За такое вас скорее накажут, чем похвалят.
А вы используете семантическую разметку для сайта вашей компании?
Загрузка...
