Учитель информатики
Сайт учителя информатики. Технологические карты уроков, Подготовка к ОГЭ и ЕГЭ, полезный материал и многое другое.
Специальная html разметка
Использование методических рекомендаций для
представления информации на сайте в части
использования html-разметки.
Приказ Рособрнадзора от 29.05.2014 № 785
Информация, указанная в пунктах 3.1 – 3.11 настоящих Требований, представляется на Сайте в текстовом и (или) табличном формате, обеспечивающем ее автоматическую обработку (машиночитаемый формат) в целях повторного использования без предварительного изменения человеком.
Все страницы официального Сайта, содержащие сведения, указанные в пунктах 3.1 – 3.11 настоящих Требований, должны содержать специальную html-разметку, позволяющую однозначно идентифицировать информацию, подлежащую обязательному размещению на Сайте. Данные, размеченные указанной html-разметкой, должны быть доступны для просмотра посетителями Сайта на соответствующих страницах специального раздела.
UchredLaw – сведения об учредителе;
NIR – сведения о научно-исследовательской работе;
priem – сведения о результатах приема;
Perevod – сведения о результатах перевода, восстановления и отчисления;
Grant – сведения о наличии и условиях предоставления стипендий;
Volume — сведения об объёме образовательной деятельности, финансовое обеспечение которой осуществляется за счёт бюджетных ассигнований федерального бюджета, бюджетов субъектов Российской Федерации, местных бюджетов, по договорам об образовании за счёт средств физических и (или) юридических лиц;
FinRec — сведения о поступлении и расходовании финансовых и материальных средств;
Vacant — сведения о количестве вакантных мест для приёма (перевода) по каждой образовательной программе, специальности, направлению подготовки (на места, финансируемые за счёт бюджетных ассигнований федерального бюджета, бюджетов субъектов Российской Федерации, местных бюджетов, по
договорам об образовании за счёт средств физических и (или) юридических лиц).
Полезная информация
Скрипт автоматической разметки тегами Рособрнадзора
Все страницы официального сайта образовательной организации, содержащие в разделе «Сведения об образовательной организации» должны содержать специальную html-разметку, позволяющую однозначно идентифицировать информацию, подлежащую обязательному размещению на Сайте. Данные, размеченные указанной html-разметкой, должны быть доступны для просмотра посетителями Сайта на соответствующих страницах специального раздела.
Приведу пример оформления подраздела «Основные сведения».
| Дата создания образовательной организации | 29 октября 1992 года |
| Адрес местонахождения образовательной организации | 196605 Санкт-Петербург, г.Пушкин, Петербургское шоссе, д.10 лит.А |
| Режим, график работы | 8.30-20.30 |
| Контактные телефоны | |
| Факсы | 8 (812) 466-49-99 |
| Адреса электронной почты | Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript. |
Подраздел рекомендуется оформлять в виде таблицы. Рассмотрим исходный код данной таблицы без микроразметки.
Как вариант реализации внедрения микроразметки можно рассмотреть использование JavaScript. Конечно, написание подобного скрипта займет много времени, но может значительно упростить работу разработчикам образовательных сайтов.
Так же необходимо предусмотреть подключение данного срипта только на определенных страницах сайта, содержащих информацию радела Сведений об образовательной организации.
Упрощенный пример скрипта:
Как видно из примера, скрипт добавляет необходимые атрибуты для содержания строк таблицы. Можно предусмотреть добавление атрибутов для отдельных ячеек или для блочных элементов.
Код таблицы после применения скрипта
Основы HTML
Что такое HTML на самом деле?
HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда элементов, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие теги могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:
Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:
Анатомия HTML элемента
Давайте рассмотрим элемент абзаца более подробно.
Главными частями нашего элемента являются:
Элементы также могут иметь атрибуты, которые выглядят так:
Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имя атрибута, а editor-note это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.
Атрибут всегда должен иметь:
Вложенные элементы
Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент
. Приведённое ниже неверно:
Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше, ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать!
Пустые элементы
Анатомия HTML документа
Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш index.html (с которым мы впервые встретились в статье Работа с файлами):
Влияние HTML5 и микроразметки Schema на SEO
Вещи, давно ставшие стандартами в индустрии SEO на Западе, да и в России (в высокобюджетном сегменте SEO), с трудом доходят до массового потребления в России.
Несмотря на то, что технологии HTML5 8 лет, а самый популярный на сегодняшний день формат микроразметки Schema запущен в 2011 году, на просторах Российского интернета встретить эти форматы не так просто, а тем более, когда они используются совместно.
Нельзя сказать, что эти технологии сверх сложные для вебмастеров (хотя назвать их простыми тоже нельзя), просто зачастую до реализации их на сайте не доходят руки оптимизаторов, а зря. Причин тому множество, начиная с лени и заканчивая, к сожалению, некомпетентностью.
Так или иначе, внедрение разметки HTML5 и микроразметки (в общем, семантической разметки) в уже действующие сайты – одно из необходимых действий в рамках технической оптимизации сайта.
Эта статья о содержании и оформлении веб страницы в общем. Об оформлении контентной части веб страницы читайте в этой статье.
Содержание:
Сергей Светцов
Сергей
Прочитал вашу статью/, стандартная информация, а есть ли у вас такая статья по поводу интернет-магазинов?
Во что оборачивать список товаров в разделах а также карточку товара?
Сергей Светцов
Здравствуйте.
Спасибо за Ваш вопрос.
Спасибо.
Как я понимаю, речь об HTML5
В этом случае нет специальных типов разметки, я вкладываю section в section, если речь идет о каталоге.
Карточку на эту тему не делаю, делаю только микроразметку (если конечно нет навигации или очевидных aside). Достаточно микроразметки.
Schema.org своими руками: настраиваем микроразметку без программиста
Программисты сейчас обиделись, а не надо. Они же попробуют справиться без вас, а потом придут к вам же с просьбой починить все, что поломалось в процессе. Шутка. Почти.
Рассказываем о словаре и синтаксисе микроразметки, собрали несколько плагинов и инструментов для создания и проверки разметки, разобрали по шагам один из плагинов.
Рассказываем о том, зачем нужна разметка Schema.org, что она из себя представляет и как ее создавать без знания кода.
Зачем нужна микроразметка
Schema.org — стандарт семантической разметки данных, который помогает поисковикам лучше понимать данные, представленные на сайте. Например, с помощью разметки можно явно указать поисковым роботам, что на странице site.ru/product_page1 находится товар, и передать основные параметры: название, цену, артикул, производителя и т.д. На основе этих данных поисковики формируют расширенные сниппеты в поисковой выдаче.
Кроме Schema.org есть другие виды микроразметок. У них разные назначения, поэтому вкратце приведем свойства основных видов, чтобы не путать:
Разница между словарем и синтаксисом
Словарь — это набор классов и свойств, которые описывают тип содержимого страницы и передают ключевую информацию. Словарь можно сравнить с языком — например, английским. Schema.org, Open Graph, Dublin Core — все это словари.
Синтаксис — это способ указания сущностей и свойств словаря в html-коде страниц сайтов. Если словарь — это английский язык, то синтаксис можно сравнить с латиницей.
Варианты синтаксиса, которые применяются для разметки Schema.org:
Подробнее о том, какой синтаксис лучше, поговорим чуть позже.
Чем различаются сайты с разметкой и без нее
Сайты с реализованной микроразметкой видно по сниппетам на странице поисковой выдачи. Вот пример: в выдаче два сниппета с одного и того же сайта, первый — с микроразметкой, второй — без нее.
А так выглядит сниппет страницы с афишей кинофильмов, если на странице есть микроразметка:
С помощью микроразметки в сниппетах страниц товаров отображаются цены:
И еще один пример: в первом сниппете реализована микроразметка хлебных крошек, а во втором такой разметки нет:
Больше информации о разметке Schema.org, а также перечень поддерживаемых сущностей — в справке Яндекса.
А здесь — виды расширенных результатов поиска в Google (отображаются для сайтов с реализованной микроразметкой).
Что говорят поисковики
Яндекс и Google советуют вебмастерам и оптимизаторам внедрять микроразметку. Основная мотивация: внедрение микроразметки улучшает сниппет визуально, а также повышает качество поиска (поисковые роботы лучше понимают содержимое сайта, на страницах которого реализована семантическая разметка данных).
Модуль SEO в системе Promopult: все инструменты для улучшения качества сайта и поискового продвижения. Полный комплекс работ — с нами вы не упустите ни одной мелочи. Чек-листы, подсказки, прозрачная отчетность и рекомендации профессионалов. Гарантии, оплата работ в рассрочку. (С разметкой тоже поможем).
Чем еще полезна микроразметка
Микроразметка выгодно выделяет ваш сниппет в поисковой выдаче на фоне конкурентов (если у них разметки нет или реализовано меньше фич). Даже если вы показались в выдаче ниже конкурентов, вы можете получить столько же кликов, а то и больше: ваш сниппет занимает больше места, содержит больше полезной информации для пользователя.
И тут срабатывает такая цепочка: привлекательный сниппет → больше пользователей кликают и переходят на сайт → улучшаются поведенческие факторы → вы ранжируетесь лучше и поднимаетесь в выдаче.
Также микроразметку используют собственные сервисы поисковиков — например, страница с реализованной разметкой может попасть в колдунщики на поисковой выдаче (при этом сам сайт не обязательно должен быть в ТОПе выдачи).
Словарь Schema.org
Словарь микроразметки состоит из сущностей (например, Продукт) и свойств, которые описывают параметры сущности (SKU, цена, наличие и т.д.).
Весь список сущностей и документация — на официальном сайте schema.org.
На скриншоте — часть сущностей (слева) и свойств сущности Thing (в правой части скриншота)
Рассказывать о всех сущностях не будем, приведем примеры самых популярных:
Оптимальный синтаксис
Мы уже упоминали о том, что для Schema.org подходят четыре вида синтаксиса:
Первые три имеют ряд недостатков и теряют популярность, а последний (JSON-LD) — используется все чаще.
Google рекомендует использовать именно JSON-LD — он более простой и компактный, в отличие от RDFa, микроформатов и других синтаксисов.
Но есть проблема: Яндекс пока не поддерживает синтаксис JSON-LD на поиске (хотя использует его в Яндекс.Почте). Поэтому, если вы продвигаетесь в Рунете (а скорей всего так и есть), вам этот синтаксис нет смысла использовать. В таком случае ваш выбор — микроданные или RDFa (микроформаты тоже вариант, но их используют не так часто — этот синтаксис имеет ряд ограничений и устарел по сравнению с другими стандартами).
Если ваш продукт или бизнес направлен на западный сегмент интернета и Google для вас в приоритете — используйте JSON-LD.
JSON-LD
Теперь о деталях. Поговорим о том, как выглядит синтаксис и какие правила в нем действуют.
JSON-LD в базовом виде выглядит так:
Вот как выглядит разметка
Обратите внимание! Наличие микроразметки не гарантирует того, что в поиске будет выводиться расширенный сниппет со всеми данными, указанными в разметке. Тем не менее, поисковые роботы все равно будут учитывать переданные данные и смогут лучше понимать содержимое страницы.
Как делать разметку JSON-LD
Ручная разметка в JSON-LD (да и в любом другом синтаксисе) — рутинная задача, отнимает много времени и всегда остается риск допустить ошибку. Упростить задачу можно с помощью генераторов JSON-LD, вот несколько популярных:
Проверка валидности разметки
При создании микроразметки важно, чтобы синтаксис был правильным и без ошибок. Даже если вы генерируете JSON-LD с помощью специальных плагинов или сервисов, не спешите загружать код на сайт, сначала проверьте его на валидность.
Для проверки кода используйте валидаторы от поисковиков:
Куда вставлять JSON-LD?
Если код валиден (валидатор не нашел ошибок) — можете смело добавлять разметку на сайт. Для этого код нужно вставить между тегами и на целевой странице.
Микроданные
В микроданных используется язык разметке HTML (в JSON-LD — JavaScript). Работать с этим синтаксисом сложнее — код разметки нужно прописывать в теле контента.
В основе микроданных — три атрибута:
Вот как это выглядит:
Прописывать такой код вручную — довольно трудоемкая и рутинная задача.
Сервисы для генерации микроданных
Хорошая новость в том, что для микроданных также существуют специальные сервисы-генераторы:
Сгенерируйте код и проверьте его на наличие ошибок (теми же сервисами).
Внедряем микроразметку самостоятельно и без знания кода
Покажем вам простой способ, как быстро и без единой строчки кода подключить микроразметку.
Автоматическая разметка страниц с помощью Маркера данных
Google разработал специальный инструмент для максимально простого внедрения микроразметки — Маркер данных.
Чем удобен инструмент:
Как пользоваться
Переходим в Маркер данных и выбираем подтвержденный ресурс;
Роботы Google просканируют страницы сайта и учтут заданную микроразметку.
Как изменить или убрать микроразметку
Когда робот Google снова просканирует страницы сайта, разметка перестанет учитываться и в поисковой выдаче будут отображаться обычные сниппеты.
Обратите внимание! Маркер передает данные только для робота Google. Если вы продвигаетесь в Яндексе, вам все равно придется добавлять код микроразметки на страницы. К счастью, для этого по-прежнему не обязательно знание кода.
Сайт на CMS? Используйте плагины
Рассмотрим самую популярную CMS в Рунете — Вордпресс. Для Вордпресс есть несколько решений, которые помогут просто и быстро внедрить микроразметку. Вот обзор плагинов, подходящих для этой задачи:
Настройка микроразметки в плагине Schema: пошаговая инструкция
Установите плагин и кликните по разделу Schema, который появится в боковом меню админпанели. Перейдите в раздел Settings → General. Выберите тип сайта и загрузите логотип.
Сохраните изменения и перейдите на вторую вкладку — Knowledge Graph. Здесь вам нужно указать, кого представляет сайт — выберите Person, если это личный сайт, или Organization (если продвигаете сайт компании).
Перейдите на вкладку Schemas. Выберите из выпадающих списков страницы «О себе» и «Контакты». Если хотите подключить разметку хедера и футера, хлебных крошек и других элементов страниц сайта — поставьте галочки напротив соответствующих параметров.
Также можно настроить автоматическое удаление микроразметки, если будет удален плагин Schema. Для этого перейдите на вкладку Advanced и поставьте галочку напротив «Delete Data on Uninstall».
Попробуйте проверить разметку в валидаторе Google (на всякий случай). Плагин работает корректно, поэтому ошибок не должно быть — смело загружайте код на сайт.
Примерно так же строится работа с другими плагинами для Вордпресс. Главное преимущество — вам не нужно разбираться в синтаксисе и прописывать все параметры вручную.
Выжимка
Если у вас сайт на Вордпресс — поставьте плагины для микроразметки и используйте их. Если сайт на другой CMS — поищите аналоги, скорей всего они есть и вам не нужно будет прописывать микроразметку вручную.