HTML5. Подгружаемое и генерируемое содержимое

01.07.2019

Семантическая разметка 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 или других скрытых элементах страницы». За такое вас скорее накажут, чем похвалят.

А вы используете семантическую разметку для сайта вашей компании?

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

Поисковики достаточно умны, чтобы понимать, на каком языке задан запрос; они умеют учитывать морфологию языка и подбирать словам из запроса синонимы. Однако в полной мере осознать, о чём именно идет речь на найденной веб-странице, машины не в состоянии.

Представьте, к примеру, сайт поликлиники с возможностью записи на приём к врачу через интернет. Среди всех страниц сайта поисковый робот без труда найдёт нужную - ту, где выполняется запись, - но дальше возникнут трудности. Человек легко догадается, что «Иванов», «Петров» и «Сидоров» - это фамилии врачей, «окулист», «невролог» и «терапевт» - их специализации, а «9:00», «9:30» и «10:00» - возможное время начала приёма. Компьютер же самостоятельно такие выводы сделать не может.

А если бы машина могла «читать» страницы так же, как это делает человек, она бы могла помочь в решении гораздо более сложных задач. Скажем, не просто «Записаться к врачу в поликлинику №2», а «Записаться к окулисту, о котором хорошо отзываются, в поликлинику не дальше чем в пяти километрах от моей работы, на 12-13 сентября, на утро, но не позже 11:00».

Впрочем, объяснить компьютеру, о чем идёт речь на веб-странице, вполне возможно. Для этого нужно дать ему подсказку.Такой подсказкой служит семантическая разметка или микроразметка. По сути, микроразметка - это отдельный язык с собственными словарём и синтаксисом, задача которого - помочь машинам (в частности, поисковым роботам) понять концепции, используемые людьми.

Микроразметка добавляется в HTML-код веб-страницы. В глазах человека размеченная и неразмеченная страницы выглядят абсолютно одинаково, но для поисковой системы разница очень велика.

Чтобы понять, как работает микроразметка, рассмотрим простую фразу: «У Петра есть сын Иван». Несмотря на простоту человек может сделать из неё множество выводов: Пётр - отец (а также родитель) Ивана, отчество Ивана - Петрович, Пётр и Иван - мужчины и родственники, Пётр старше Ивана. Все эти факты очевидны, поскольку нам их подсказывает жизненный опыт. У машины такого опыта нет, поэтому она может воспринимать фразу только в её текущей формулировке

Это - та же самая фраза, но с микроразметкой. Теперь компьютер понимает, что Иван и Пётр - это имена людей, между которыми существует родственная связь (Иван - ребёнок, Пётр - родитель), и ему не составит труда отвечать на вопросы вида «Кто родитель Ивана?». Кроме того, если добавить в разметку уникальные идентификаторы (например, ссылки на страницы в соцсетях), машина сможет отличать конкретных Ивана и Петра от их тёзок.

Микроразметка используется не только в случаях, когда речь идёт о людях. Аналогичным образом можно разметить и музыку, и видеозаписи, и события, и товары, и многое другое.

Единого стандарта микроразметки пока нет. Существуют разные синтаксисы и разные словари. Например, социальные сети собирают данные о сайтах с помощью словаря Open Graph, разработанного в Facebook, а поисковики, включая Яндекс, чаще ориентируются на словарь Schema.org. Подробнее о том, как устроены словари и синтаксисы, можно прочитать в техноблоге Яндекса на «Хабрахабре».

В том или ином виде микроразметку используют около 30% веб-страниц, известных Яндексу. Отсутствие микроразметки не влияет ни на способность страницы попадать в результаты поиска, ни на её позицию в результатах поисковой выдачи. Однако в ряде случаев разметка способна значительно упростить жизнь - как сайтам, так и пользователям.

Сделать наглядный сниппет

Одно из главных достоинств микроразметки состоит в том, что она даёт поисковику возможность строить красивые «сниппеты» - короткие описания сайтов. Например, вы играете на гитаре и ищете в Яндексе [аккорды группа крови]. Если вебмастер сайта, публикующего аккорды, добавил к себе на ресурс семантическую разметку, то вы сможете просмотреть текст песни с аккордами прямо на странице с результатами поиска.

Массив содержит строки - элементы списка . На самой HTML - странице размещен тег
    , для того, чтобы добавить элементы в список , необходимо:
    1. программно создать элемент < li > ;
    2. добавить созданному элементу HTML - код содержимого;
    3. добавить элемент в список.

    Программно это будет выглядеть следующим образом:

    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 - странице определен контейнер

    . Последовательность добавления ссылки в контейнер выглядит так:

    1. программное создание элемента ;
    2. задание текста ссылки;
    3. задание значения атрибута href ;
    4. добавление ссылки в контейнер.

    Следующий код иллюстрирует программную реализацию указанной последовательности действий:

    var nav = document.getElementById("navigation"); for(var j = 0; j

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

    Семантическая разметка

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

    Семантика , как научная дисциплина, изучает значение единиц языка. В IT под семантикой понимается формализация конструкций языков программирования.

    Попробуем разобраться в том, что же это значит уже в контексте HTML и веб - разработки.

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

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

    Очевидно, что "потребителями" подобной разметки являются не пользователи сайтов, ведь тегов они не видят. Суть семантической разметки – упрощение машинной обработки содержимого сайтов, к примеру, для лучшего "понимания" сайта поисковыми роботами .

    Помимо уже сказанного можно выделить следующие преимущества семантической разметки:

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

    Таким образом, HTML теги могут быть разделены на семантические и теги представления.

    К семантическим тегам относятся любые теги, указывающие на суть их содержимого. Приведем список наиболее часто встречающихся семантических тегов:

    Таблица 14.1.
    Тег Описание
    a предназначен для создания cсылки или якоря
    abbr указывает, что содержимое тега является аббревиатурой
    acronym указывает, что содержимое тега является акронимом (разновидность аббревиатуры, которая произносится не по буквам, а слитно, как одно слово)
    address содержит информацию об авторе
    area применяется внутри контейнера < map > для создания карты-изображения. Определяет параметры активных зон-ссылок на карте
    base указывает полный базовый адрес документа. Применяется для составления относительных адресов и для указания целевого окна всех ссылок страницы
    bdo устанавливает направление вывода текста (справа налево, слева направо)
    blockquote выделяет цитату (как правило длинную). Отображается с увеличенным отступом
    body определяет границы тела документа . Внутри тега располагаются все элементы, отвечающие за содержание HTML-страницы
    button создает на форме кнопку
    caption создает заголовок таблицы. Отображается над таблицей вне рамки. Элемент таблицы
    cite используется, чтобы указать источник цитаты или ее автора. Как правило, оформляется курсивом
    code
    col позволяет задать общие свойства сразу для всего столбца таблицы
    colgroup позволяет задать общие свойства сразу для нескольких столбцов таблицы
    dd
    и
    . Задает определение термина
    del обозначает текст, как удаленный. Может выступать как строчный или как блочный элемент в зависимости от контекста
    dfn выделяет в тексте термин
    div выделяет логический блок. Один из основных элементов блочной верстки
    dl используется при создании списка определений вместе с
    и
    dt используется при создании списка определений вместе с
    и
    em используется для акцентирования внимания
    fieldset предназначен для группировки элементов формы
    form создает форму на странице. Форма применяется для обмена данными между пользователями и сервером
    h1, h2, h3, h4, h5, h6 используются для создания заголовков
    head заголовок документа, содержит информацию о текущем документе
    html тег-контейнер, заключающий в себе все содержимое страницы, кроме doctype , который должен быть расположен перед тегом
    img добавляет на страницу изображение
    input позволяет создавать элементы интерфейса: кнопки, текстовые поля, переключатели и флажки. Основной метод получения информации от пользователя (читателя) базируется на этом теге
    ins обозначает текст, добавленный в новой версии документа. Может выступать как строчный или как блочный элемент в зависимости от контекста
    kbd обозначает текст набираемый на клавиатуре или сочетания клавиш
    label позволяет связать элемент интерфейса на форме с текстовой надписью и задать горячие клавиши
    legend определяет заголовок для элементов форм, сгруппированных в контейнере тега
    li создает элемент списка
    link устанавливает связь с внешними документами, чаще всего с таблицами стилей
    map тег-контейнер для создания карты-изображений
    meta содержит метаданные - техническое описание документа в виде пар "имя-значение". Служит для идентификации свойств документа (например, автора, конечной даты использования, списка ключевых слов и т.д.) и установки значений этих свойств
    noscript содержит текст, который выводится браузером
    object используется для внедрения на страницу различных объектов (как правило медиафайлов)
    ol создает нумерованный список
    optgroup тег-контейнер для тегов
    option задает отдельную строку списка в теге
    p предназначен для создания абзацев
    pre определяет предварительно отформатированный фрагмент текста. Выводится с соблюдением всех пробелов и переводов строки
    q выделяет в тексте цитату
    samp обозначает текст, как код программы или формулу
    script добавляет на страницу скрипт
    select создает элемент выбора значений
    span используется в основном для оформления и/или назначения уникального идентификатора (id ) определенному фрагменту текста
    strong логически выделяет, усиливает текст.
    style задает таблицу стилей
    table определяет таблицу
    tbody применяется для группировки строк, с целью задать общее форматирование
    td задает ячейку таблицы
    textarea определяет многострочное поле для ввода.
    tfoot применяется для определения строки, которая будет отображаться внизу таблицы
    th определяет ячейку-заголовок таблицы
    thead применяется для определения строки/строк, которые будут отображаться вверху таблицы
    title определяет заголовок документа
    tr определяет строку таблицы
    ul создает маркированный список
    var обозначает имя переменной

    Нами приведен не полный

    Что такое семантика в HTML

    Слово «семантики» пришло в HTML из обычных лингвистических (языковедческих) дисциплин. Там, под понятием «семантика» понимаются разделы, изучающие значение и назначение человеческих языковых единиц. В отличие от реальных человеческих языков, в HTML языковые единицы изучать не нужно. В HTML, языковые единицы называются «тегами» и их назначение уже прописано в спецификации HTML - едином для всех веб-разработчиков документе. На данный момент, существует несколько вариаций на тему спецификации HTML (в зависимости от версии языка), но суть не в этом. Сейчас, нас и этой статьи - важно другое. Это наличие чёткого и внятного объяснения для каждой языковой единицы - тега HTML, в соответствующей спецификации HTML. Таким образом, если в реальной лингвистике человеческих языком, семантика - это изучение назначения непонятных слов и понятий, то в HTML наоборот, семантика - это правильное применение и использование уже готовых и объяснённых тегов.

    Семантическая вёрстка веб-документа

    Семантическая вёрстка веб-страницы или семантический код HTML-документа - это вёрстка с правильным использования HTML-тегов в соответствии с их предназначением (семантикой). Кроме этого, семантическая вёрстка предполагает логичную и последовательную иерархию для построения всей веб-страницы, в соответствии с законами HTML-документа.

    Чем отличается семантическая вёрстка от обычной
    Семантическая вёрстка веб-документа противопоставляется обычной, при котором написание HTML-кода определяется только внешним видом веб-страницы. При семантической вёрстке, ряд элементов страницы имеют свои собственные теги, которые прямо отображают их назначение. Это и есть «семантика» в HTML. Так, например, структура простейшей веб-страницы при обычной вёрстке может выглядеть так:

    Шапка сайта

    Главное верхнее меню сайта

    Дополнительное боковое сайта

    Содержимое веб-страницы

    Подвал сайта

    Тогда, как при семантической вёрстке, структура той же самой веб-страницы будет иметь вид:
    Шапка сайта



    Содержимое веб-страницы

    Подвал сайта

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

    Зачем нужна семантическая вёрстка

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

    Семантическая вёрстка в HTML5

    Полный фурор и переворот понятия веб-семантики произошёл с появлением HTML5.

    В HTML4 всё было довольно просто. Для оформления веб-страниц, написанных в соответствии с семантикой, достаточно было использовать внешние каскадные таблицы стилей (CSS) да пару нехитрых нововведений, вида замены тегов и на и . HTML5 - не в пример «семантичней» и это видно из приведённого примера.

    Новые популярные семантические теги HTML5

    Прежде всего, - простой и понятный всем доктайп.

    Типы
    • Роутеры
    • Жесткие диски
    • Не включается
    • Принтеры
    • Тормозит
    • Зависает
    • Вирусы
    • Планшеты
    Популярные статьи
    Новые статьи