Семантическая разметка. Семантическая разметка: что это такое и зачем она нужна
Семантическая разметка Shema.org для SEO
Семантическая разметка Shema.org
Использование семантической разметки 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 или других скрытых элементах страницы». За такое вас скорее накажут, чем похвалят.
А вы используете семантическую разметку для сайта вашей компании?
Одним из таких действенных методов является микроразметка или, как ее еще называют, семантическая разметка.
Что такое семантическая разметка и зачем она нужна?
Семантическая разметка представляет собой особые параметры тегов, которые добавляют в код текста или файла.
С помощью этой разметки передается информация поисковым роботам о содержимом страницы.
Элементы семантической разметки добавляются в HTML-код, что позволяет роботу быстрее произвести анализ данной страницы, чтобы в дальнейшем составить наиболее подробное описание веб-ресурса в поисковых результатах. Такая разметка является своеобразной гарантией, что различная информация о статьях, фильмах, акциях и прочем содержимом страницы будет интерпретирована верно.
Получается, что семантическая разметка является своеобразной подсказкой роботу, чтобы он как можно быстрее . Именно с помощью нее бот поймет, что определенный перечень букв и цифр является реальным адресом компании, к примеру.
Кроме того, добавление семантической разметки позволяет привлечь больше посетителей на сайт, которые в дальнейшем могут стать вашими потенциальными клиентами.
Это объясняется тем, что микроразметка лучше описывает ваш ресурс, причем не только по ключевым запросам, но и по картам, картинкам, а также поиску по видео. Кстати, с помощью семантической разметки происходит формирование сниппетов.
Если говорить упрощенно, то — это небольшое описание содержимого страницы, которое видят пользователи в результатах поиска. Это своеобразный анонс, побуждающий человека перейти на сам сайт.
Многие путают сниппеты и description, но это несколько разные вещи. Да, дескрипшн также кратко описывает содержимое страницы, чтобы пользователю и поисковому роботу было понятно, о чем данный ресурс.
Если дескрипшн не будет прописан в контейнере
, то поисковая система выберет случайный кусок из текста для выдачи в поисковой строке. Как правило, этот отрывок мало информативен, поэтому не может в полной мере описать содержимое страницы.Сниппет как раз и представляет тот вырванный фрагмент из текста, необходимый для аннотации страницы.
Естественно, если его грамотно составить, добавив в него определенное количество , то система выделит их жирным шрифтом, что привлечет внимание пользователей.
Если сниппет не сформировать, то выберет дескрипшн в качестве описания к ресурсу. В Яндексе description и вовсе может быть проигнорирован, поэтому правильное составление сниппета очень важно.
С помощью семантической разметки можно выделить сниппет, чтобы поисковая машина выдавала в строках поиска именно то, что вам нужно, а не произвольные части из текста. Но для того, чтобы овладеть этим безусловно полезным инструментом, необходимо знать основные способы создания такой разметки.
Какие способы создания микроразметки используют?
Чтобы не только создать семантическую разметку, но и правильно ее добавить, необходимо тщательно изучить Schema.org , а также научиться добавлять код на сайт. Shema.org является совместной разработкой многих поисковых систем, представляющих собой единый стандарт формирования микроразметки.
На сегодняшний день отмечают два способа создания семантической разметки:
- Использование специальных атрибутов в HTML-коде. Речь идет об атрибутах itemscope, itemtype и itemprop.
- Есть и более упрощенный вариант, не требующий особых знаний. Здесь имеется в виду специальный инструмент «Маркер» от Google. Это специальное приложение, в котором можно выделять курсором определенные данные, указывая их тип.
Первый способ отличается тем, что все приходится прописывать вручную. Возьмем для примера контакты какой-нибудь компании, которые мы выделим семантической разметкой:
Яндекс
Контакты:
Жукова, 4
23678
Иркутск,
Телефон:+3 952 456 XXX XX,
Факс:+3 952 643 XXX XX,
Электронная почта: [email protected]
Что касается второго метода, то с помощью вышеуказанного инструмента можно сообщать о таких материалах на сайте, как «Мероприятия», «Приложения», «Телесериалы», «Книги», «Фильмы», «Рестораны», «Товары», «Местные организации» и т.д.
Как проверить, правильно ли сделана семантическая разметка сайта?
На сегодняшний день, самыми популярными поисковыми системами являются Яндекс и Google. Неудивительно, что каждый из них предлагает свои особые инструменты, с помощью которых можно работать в интернете.
В частности, у каждого из них есть собственный метод проверки правильно семантической разметки на сайте. Для Яндекса это Валидатор микроразметки, а для Google — Google Structured Data Testing Tool. Рассмотрим оба способа проверки микроразметки.
Проверка в Яндексе
Первым делом необходимо зайти в само приложение Валидатор. В соответствующую строку вводим любую интересующую вас ссылку на статью. Далее жмем кнопку «Проверить».
Если с разметкой все в порядке, то вы не увидите никаких предупреждений и ошибок. Если они есть, то Яндекс укажет на то, в чем именно заключается ошибка. Это очень удобно для дальнейшего исправления микроразметки.
Проверка в Гугле
В принципе, особых различий в проверке здесь нет, ведь они обе автоматизированы. Также нужно войти в приложение — https://search.google.com/structured-data/testing-tool , после чего в строку нужно вставить нашу ссылку. Далее жмем «Запустить тест». После проверки справа будет указано количество ошибок, если они все-таки присутствуют в разметке.
Заключение
Семантическая разметка не является обязательным атрибутом сайта в интернете. Но если ее внедрить, то пользователи в сети будут лучше проинформированы о содержимом вашей страницы, даже не переходя на нее.
Следовательно, они поймут из сниппета, что информация на сайте представляет для них интерес, после чего кликнут по вашему сайту. Получается, что правильная микроразметка способствует и увеличению числа переходов на него.
Массив содержит строки - элементы списка . На самой HTML - странице размещен тег-
, для того, чтобы добавить элементы в список
, необходимо:
- программно создать элемент < li > ;
- добавить созданному элементу HTML - код содержимого;
- добавить элемент в список.
Программно это будет выглядеть следующим образом:
var list = document.getElementById("list"); for (var i = 0; i< items.length; i++) { var listItem = document.createElement("li"); listItem.innerHTML = items[i]; list.appendChild(listItem); }
Таким образом при вызове функции сформируется содержимое списка с id="list" .
Сформировать группу ссылок немногим сложнее, поскольку помимо текста ссылки, элемент должен содержать адрес перехода. Для этого нам понадобится массив следующего вида:
var links = ; links = {name: "first", href: "document1.html"}; links = {name: "second", href: "document2.html"}; links = {name: "third", href: "document3.html"}; links = {name: "fourth", href: "document4.html"};
На HTML - странице определен контейнер