Атрибут itemtype в HTML

Содержание

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

Веб-программирование — HTML5 — Семантическая разметка и микроформаты

Сейчас вы, наверное, думаете, что в разметке веб-страниц можно было использовать множество других семантических элементов, которых в HTML5 нет. Ну да, имеющимися элементами можно помечать даты и выделять цветом текст, но как насчет других единиц информации — адресов, названий компаний, описания товаров, персональных сведений и т.п.?

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

Идея семантически осмысленной разметки не является новой. В действительности, давным-давно, когда HTML5 существовал только в задумках Яна Хиксона (Ian Hickson), редактора группы WHATWG, многие веб-разработчики настойчиво искали методы для создания более осмысленной разметки. Не всегда их требования — совпадали: одни хотели улучшить доступность своих веб-страниц, другие — возможность для интеллектуального анализа данных, а третьим просто хотелось повысить фактор впечатляемости своего резюме. Но никто из них не смог найти то, что им требовалось в стандартном языке HTML, вследствие чего было создано несколько новых стандартов, чтобы заполнить этот пробел.

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

Стандарт Accessible Rich Internet Applications

Развивающийся стандарт Accessible Rich Internet Applications (ARIA, доступные активные веб-приложения) позволяет предоставлять дополнительную информацию для программ чтения экрана (скрин-ридеров) с помощью атрибутов любого элемента HTML. Среди прочих, в нем вводится атрибут role, который указывает назначения данного элемента.

Например, назначение представляющего верхний колонтитул элемента:

можно довести до сведения программ чтения экрана, присвоив атрибуту role значение banner:

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

Этот пример иллюстрирует два важных факта. Первый: стандарт ARIA требует использования одного из коротких списков рекомендованных названий ролей. Второй: некоторые части стандарта ARIA перекрывают семантические элементы HTML5, что вполне логично, т.к. ARIA появился раньше HTML5. Но это не совсем полное перекрытие. Например, некоторые названия ролей дублируют элементы HTML5 (скажем, banner и article в то время как другие являются более продвинутыми (например, toolbar и search).

Стандарт ARIA также вводит два атрибута для работы с HTML-формами. Атрибут aria-required в текстовом поле указывает, что пользователю нужно ввести значение. А атрибут aria-invalid указывает на недействительность текущего значения в текстовом поле. Польза от этих атрибутов в том, что программы чтения экрана могут пропустить визуальные подсказки, которыми руководствуются пользователи с нормальным зрением при заполнении форм, например, звездочку рядом с заполненным полем или красный мигающий восклицательный знак рядом с полем с неправильным введенным значением.

Чтобы правильно применять стандарт ARIA, необходимо изучить его и потратить некоторое время на исследование разрабатываемой разметки. С учетом того, что стандарт ARIA все еще находится в процессе развития и HTML5 предоставляет некоторые такие же возможности, но меньшей ценой, мнение веб-разработчиков касательно ценности такого вложения усилий и времени в этот стандарт неоднозначно.

Но если вы хотите создать веб-сайт по настоящему доступный уже сегодня, нужно использовать оба стандарта, т.к. новые программы чтения экрана поддерживают стандарт ARIA, а стандарт HTML5 — еще нет.

Стандарт Resource Description Framework

Стандарт Resource Description Framework (RDFa — инфраструктура для описания ресурсов — в атрибутах) определяет правила для интегрирования подробных метаданных в веб-документы посредством атрибутов. У стандарта RDFa есть значительное преимущество перед другими подходами: это стабильный, установившийся стандарт.

Но у него также два значительных недостатка. Первый — это сложный стандарт. Разметка со вставленными в нее метаданными RDFa получается намного объемистей и существенно неуклюжей, чем обычная HTML-разметка. Второй — стандарт этот разработан для применения с XHTML, а не с HTML5. В настоящее время несколько сверхинтеллектуальных веб-гуру занимается разработкой лучших способов адаптирования RDFa для работы с HTML5. Но, возможно, что RDFa просто не приживется в мире HTML5, т.к. ему больше подходят строгий синтаксис и железные правила XML.

Здесь стандарт RDFa не рассматривается. Но если вы хотите узнать больше о нем, солидный обзор можно получить на странице en.wikipedia.org/wiki/RDFa. А на веб-сайте Google Rich Snippets можно ознакомиться с версиями RDFa для всех примеров расширенных фрагментов Google.

Микроформаты

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

Благодаря этому подходу микроформаты пользуются огромным успехом; в недавнем исследовании, проведенном Google, было обнаружено, что у 94% страниц, содержащих какой-либо тип расширенных метаданных, эти метаданные предоставляются микроформатами.

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

Прежде чем помечать данные микроформатом, нужно выбрать, какой именно микроформат использовать для этого. Широко применяется всего лишь пара десятков микроформатов, большинство из которых продолжает совершенствоваться и обновляться. Информацию о доступных микроформатах и подробное описание каждого из них можно найти на веб-сайте Microformats. Наибольшей популярностью среди всех этих микроформатов пользуются два — hCard и hCalender, которые мы и рассмотрим.

Обозначение контактной информации с помощью микроформата hCard

Микроформат hCard предоставляет универсальный способ обозначения контактной информации для физического лица, компании или места. По результатам последнего подсчета Интернет содержит свыше 2 млрд hCard, что делает этот микроформат безоговорочно самым популярным.

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

Для создания hCard требуется корневой элемент, который присваивает атрибуту class значение vcard. Внутри этого элемента необходимо посредством другого элемента предоставить, по крайней мере, отформатированное имя. Атрибуту class этого внутреннего элемента нужно присвоить значение fn. Вот приводится пример такого определения:

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

Хотя единственной обязательной единицей информации для микроформатов является имя, большинство из них содержит дополнительные подробности, такие как почтовый адрес и адрес электронной почты, URL веб-сайта, номер телефона, дата рождения, фотография, должность, название организации и т.п. При условии использования правильных названий классов все эти подробности можно вставить в элемент, содержащий класс vcard. В следующем листинге приводится пример определения hCard, содержащего разные типы персональной информации:

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

Например, браузер мог бы обнаружить элементы hCard на странице, вывести их список в боковой панели и предоставить пользователю команды, позволяющие добавить любое лицо из списка в личную адресную книгу пользователя так же быстро, как и добавить страницу в закладки. Информацию о подключаемых модулях браузера для поддержки микроформатов можно получить на странице «Browsers».

Одним из таких расширений является Oomph для Internet Explorer, которое можно загрузить с веб-сайта oomph.codeplex.com. Этот модуль автоматически исследует каждую посещаемую веб-страницу на предмет наличия в ней трех форматов: hCard (для контактной информации), hCalendar (для календарей событий) и hMedia (для изображений, аудио и видео). В случае обнаружения в странице данных, помеченных одним из этих форматов, в левом верхнем углу окна браузера выводится значок Oomp. Щелчок по этому значку выводит в браузере всю обнаруженную информацию, а также элементы управления для обработки.

Но что особенно интересно в этом инструменте, так это возможность использовать его другим способом — через библиотеку JavaScript. Для этого всего лишь нужно добавить в страницу ссылки на сценарии:

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

Обозначение событий с помощью микроформата hCalendar

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

Если вы разобрались в том, как помечать информацию микроформатом hCard, у вас не будет никаких трудностей и с микроформатом hCalendar. Сначала событие нужно поместить в элемент с названием класса vevent. Внутри этого элемента нужно поместить, по крайней мере, две единицы информации: дату начала (которая помечается классом dtstart) и описание события (которое помечается классом summary).

Микроданные

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

Илон Маск рекомендует:  Глава 6 машинная эволюция

Такой подход делает форматы микроданных более логичными, чем другие форматы, а также более приспосабливаемыми к использованию с языками собственной разработки других веб-дизайнеров. Но за это приходится платить ценой потери краткости — помеченная микроданными разметка может быть несколько большего объема, чем разметка, помеченная микроформатами.

Чтобы создать блок микроданных, нужно добавить атрибуты itemscope и itemtype в любой элемент (хотя логичнее будет создать элемент

Тип данных обозначается предопределенной, однозначной текстовой строкой, называющейся пространством имен XML. В данном примере пространством имен XML является формат для кодирования рейтинга http://data-vocabulary.org/Review-aggregate.

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

Следующий шаг после создания элемента-контейнера — это использование внутри его атрибута itemprop, чтобы отловить важные единицы информации. Для этого применяется такой же базовый подход, что и для микроформатов — используется распознаваемое название itemprop, которое позволит другим программным средствам извлекать информацию из связанных элементов.

По существу, самая большая разница между микроданными и микроформатами состоит в использовании в первых для маркировки данных атрибута itemprop, а не атрибута class, как в последних.

Данный код реализует возможность ставить рейтинг страницы с помощью специального плагина для браузера Google Chrome. Данную разметку конечный пользователь не видит (естественно за исключением заголовка), но поисковики индексируют эту информацию и могут отображать ее в результатах поиска:

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

Особенности микроразметки microdata :: Хранитель заметок

Особенности микроразметки microdata

Микроданные (microdata) становятся очень популярны для оформления структурированных данных благодаря активной поддержки формата со стороны W3C и крупнейших поисковиков, разрабатывающих словари. Сама разметка предельно проста и, в основном, осуществляется при помощи атрибутов:

Группа свойств ключ-значение.

Тип объекта. Фактически это ссылка на страницу с описанием в свободной форме всех названий ключей, которые применимы к описываемому объекту. Этот атрибут неприменим к элементам без атрибута itemscope .

Свойство объекта. Может быть строкой или другим объектом. Значение, которое будет извлечено для указанного ключа, зависит от элемента, для которого применяется этот атрибут.

А теперь расскажу о чрезвычайно полезных особенностях разметки, которые не слишком хорошо освещены в документации и примерах.

Несколько свойств у одного элемента

В атрибуте itemprop могут быть перечислены несколько свойств, разделённые пробелом, что может сократить количество дополнительных (не нужных для оформления) элементов в документе.

Ссылка на свойства

Иногда так получает, что данные, относящиеся к размечаемому объекту, находятся за пределами «корневого» элемента. Специально для этого случая предусмотрен атрибут itemref . Он применяется к элементу с itemscope и содержит id другого DOM-элемента, где находятся остальные свойства. Можно указать через пробел идентификаторы нескольких элементов.

Например, из-за особенностей оформления страницы, автор и комментарии к статье физически не могут находиться внутри .

Тем не менее, в результате получилась отлично структурированная разметка. Автор статьи и комментарии примешались в основной поток свойств статьи так как, если бы они были фактически размещены там.

Порядок следования свойств не оказывает никакого влияния на структуру. Парсер просто перечисляет их по мере обхода документа.

Примешивать свойства с помощью itemref можно даже для элементов, которые не имеют содержимого. Например,

Объект AggregateRating требует обязательного наличия свойства ratingValue, но его нельзя передать в атрибуте content . Зато можно указать ссылку на другой элемент с нужными атрибутами.

На практике, пожалуй, этот случай лучше разметить с помощью обычных вложенных элементов с соответствующими атрибутами.

Таргетинг itemprop в CSS?

У меня есть следующие два раздела кода, сгенерированные темой WordPress. Этот первый раздел кода создается для страницы WP:

Эта вторая секция кода создается для WP Post:

Я не могу определить селектор CSS, чтобы специально настроить и центрировать текст тега H1 внутри «itemprop DIV» для первого раздела кода.

Кроме того, я также хотел бы настроить и стилизовать тег H1 в WP Post с другим цветом текста, но опять же, не могу определить селектор CSS.

Какие метатеги HTML нужно добавлять на сайт и что они дают?

Мета теги для сайта помогают роботам Google понимать контент ресурса. Наверное, вы уже слышали, что метатеги используются в SEO. Это определение дает хорошее представление о том, что такое современные метатеги.

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

Да, это выходит за рамки SEO.

Поисковые системы массово используют метатеги. Но на сегодняшний день существуют специализированные метатеги и для социальных сетей, таких как Facebook , Twitter и LinkedIn .

Также есть метатеги, которые используются для более подробного описания контента. Широко распространенная система описания контента предоставляется schema.org .

Ниже приводится список метатегов, которые нужно добавить на сайт, чтобы успешно работать в Сети:

  • Title и description ;
  • Мета теги для html сайта, связанные с Google ;
  • Теги верификации;
  • Социальные метатеги;
  • Schema.org для описания контента.

Title и description

Каждая страница сайта должна содержать метатеги title и description . Поместите их в раздел HTML-страницы .

не отображается в формате тегов, но о нем практически всегда говорят, как о метатеге.

Что делает title?

Он задает читаемый человеком заголовок — страницы. title отображается в верхней части окна браузера на открытой вкладке.

Кроме этого title играет важную роль в SEO . Он определяет, о чем ваша страница, поэтому поисковые системы в значительной степени полагаются на эту информацию, и данный метатег является ключевой составляющей ранжирования страницы.

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

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

Для чего используется description?

Мета тег description для сайта не влияет на ранжирование страниц поисковыми системами. Его главное предназначение заключается в отображении описания страниц в поисковой выдаче. Description помогает привлечь внимание пользователей к контенту.

Оно также может использоваться в качестве описания на страницах социальных сетей.

Составляйте title и описания так, чтобы подчеркнуть, какую ценную информацию вы предоставляете своим посетителям. Делайте их простыми, понятными и информативными.

Длина заголовка и описания

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

Это моя статья, расположенная на шестой позиции в поисковой выдаче Google .

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

Не существует какого-то одного магического числа, которое следует использовать для длины заголовков или описаний, так как их размер зависит от формы букв. Вы можете, например, использовать такие тонкие символы, “i” и “o”.

Google обычно отображает 50-60 символов из заголовка и около 150-160 из описания. Остальная часть информации, содержащейся в этих тегах, не будет отображаться на странице результатов поиска.

Если вы хотите быть уверенным в том, что правильно подобрали длину, можете использовать онлайн инструмент оптимизации сниппетов от Google .

Другие метатеги

Есть еще несколько метатегов, которые нужно добавлять на все веб-страницы в разделе :

charset определяет кодировку символов HTML-документа . Браузер использует эту информацию, чтобы правильно отобразить страницу.

http-viewport задает видимую пользователю область веб-страницы. Этот метатег был введен в адаптивном веб-дизайне. Он позволяет контролировать начальные размеры окна просмотра и их изменение при загрузке страницы.

Давайте расширим наш предыдущий пример:

Существуют и другие менее используемые мета теги для сайта интернет магазина. Наиболее важные из них: robots , google и http-equiv . Мы должны упомянуть еще одну важную часть метаинформации, хотя она не задается в виде тега. Атрибут изображений alt описывает содержимое картинок на сайте.

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

Теги верификации

Блогеры, веб-мастера должны подтвердить право собственности на сайт при использовании онлайн-сервисов. Вы обязаны делать это, когда:

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

Позвольте мне объяснить.

Google Search Console ( известный как «инструменты для веб-мастеров» ) предоставляет информацию о статистике вашего сайта. Также с его помощью можно повлиять на то, как Google видит ваш сайт. Но для этого вы должны подтвердить, что сайт является вашим.

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

Самый простой вариант доказать право собственности на сайт — это метатег. Коды верификации предоставляются Google Search Console , Pinterest и т.д.

Добавим в наш пример использования мета тегов для сайта код, в котором значение поля Content является кодом верификации, предоставляемым Google Search Console :

Социальные метатеги

Эти элементы содержат информацию, которая подхватывается социальными сетями, когда вы копируете ссылку на страницу или нажимаете кнопку « Поделиться » в панели социальных кнопок вашего сайта. Минимальная информация, которую нужно предоставить — это заголовок, мета тег description для сайта и изображение.

Большинство социальных ресурсов поддерживают протокол Open Graph для считывания полезной информации о веб-странице.

Twitter использует свои собственные обозначения, но если они отсутствуют на странице, сервис микроблогов будет использовать данные Open Graph .

Зададим набор тегов Open Graph для Facebook , Google + и LinkedIn . Я также добавил заголовок для Twitter :

Если у вас возникнут проблемы с метатегами Open Graph , произведите отладку с помощью Open Graph отладчика Facebook .

Schema.org для описания контента

Schema.org предоставляет схемы для структурированных данных в Интернете.

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

Рассмотрим пример статьи в блоге:

Используйте атрибут itemscope , чтобы обозначить начало нового объекта schema.org . itemtype определяет тип элемента, начинающегося с itemscope . Используйте атрибут itemprop в пределах открывающегося и закрывающегося тегов элемента с атрибутом itemscope .

Разметка itemprop , которую вы поместите в пределах itemscope , будет определять различные свойства объекта. В нашем примере статьи мы определили свойства мета тега для сайта title , изображения, дату публикации, автора и тело статьи.

Используйте schema.org , и тогда поисковые системы будут лучше понимать, что содержится на страницах вашего сайта. Например, обозначить свои товары, чтобы они были доступны для поиска в Google .

Заключение

Вы получите огромные преимущества, если будете использовать метатеги. Это улучшит ранжирование страниц в поиске и увеличит количество переходов на них из поисковых систем. Улучшит опыт взаимодействия пользователя на различных устройствах. И позволит достичь лучшей интеграции с контент-инструментами.

Илон Маск рекомендует:  Многоколоночная вёрстка

Данная публикация представляет собой перевод статьи « What HTML meta tags to add to your site and what do they do » , подготовленной дружной командой проекта Интернет-технологии.ру

schema.org

Most webmasters are familiar with HTML tags on their pages. Usually, HTML tags tell the browser how to display the information included in the tag. For example,

Schema.org provides a collection of shared vocabularies webmasters can use to mark up their pages in ways that can be understood by the major search engines: Google, Microsoft, Yandex and Yahoo!

You use the schema.org vocabulary along with the Microdata, RDFa, or JSON-LD formats to add information to your Web content. This guide will help get you up to speed with Microdata and schema.org so that you can start adding markup to your web pages.

Although this guide focuses on Microdata, most examples on the schema.org site show examples in RDFa and JSON-LD too. The basic ideas (types, properties etc.) introduced here are relevant beyond Microdata — take a look at the examples to see how the details compare.

1. How to mark up your content using microdata

1a. Why use microdata?

Your web pages have an underlying meaning that people understand when they read the web pages. But search engines have a limited understanding of what is being discussed on those pages. By adding additional tags to the HTML of your web pages—tags that say, «Hey search engine, this information describes this specific movie, or place, or person, or video»—you can help search engines and other applications better understand your content and display it in a useful, relevant way. Microdata is a set of tags, introduced with HTML5, that allows you to do this.

1b. itemscope and itemtype

Let’s start with a concrete example. Imagine you have a page about the movie Avatar—a page with a link to a movie trailer, information about the director, and so on. Your HTML code might look something like this:

To begin, identify the section of the page that is «about» the movie Avatar. To do this, add the itemscope element to the HTML tag that encloses information about the item, like this:

By adding itemscope , you are specifying that the HTML contained in the

But it’s not all that helpful to specify that there is an item being discussed without specifying what kind of an item it is. You can specify the type of item using the itemtype attribute immediately after the itemscope .

This specifies that the item contained in the div is in fact a Movie, as defined in the schema.org type hierarchy. Item types are provided as URLs, in this case http://schema.org/Movie .

1c. itemprop

What additional information can we give search engines about the movie Avatar? Movies have interesting properties such as actors, director, ratings. To label properties of an item, use the itemprop attribute. For example, to identify the director of a movie, add itemprop=»director» to the element enclosing the director’s name. (There’s a full list of all the properties you can associate with a movie at http://schema.org/Movie.)

Note that we have added additional . tags to attach the itemprop attributes to the appropriate text on the page. tags don’t change the way pages are rendered by a web browser, so they are a convenient HTML element to use with itemprop .

Search engines can now understand not just that http://www.avatarmovie.com is a URL, but also that it’s the URL for the trailer for the science-fiction movie Avatar, which was directed by James Cameron.

1d. Embedded items

Sometimes the value of an item property can itself be another item with its own set of properties. For example, we can specify that the director of the movie is an item of type Person and the Person has the properties name and birthDate . To specify that the value of a property is another item, you begin a new itemscope immediately after the corresponding itemprop .

2. Using the schema.org vocabulary

2a. schema.org types and properties

Not all web pages are about movies and people—in addition to the Movie and Person types described in section 1, schema.org describes a variety of other item types, each of which has its own set of properties that can be used to describe the item.

The broadest item type is Thing, which has four properties: name , description , url , and image . More specific types share properties with broader types. For example, a Place is a more specific type of Thing, and a LocalBusiness is a more specific type of Place. More specific items inherit the properties of their parent. (Actually, a LocalBusiness is a more specific type of Place and a more specific type of Organization, so it inherits properties from both parent types.)

Here’s a set of commonly used item types:

You can also see a full list of all item types, listed on a single page.

2b. Expected types, text, and URLs

Here are a few notes to keep in mind when adding schema.org markup to your web pages.

    More is better, except for h >Back to top

2c. Testing your markup

Much like a web browser is important for testing changes to your web page layout, and a code compiler is important for testing code you write, you should also test your schema.org markup to make sure it is implemented correctly. Google provides a rich snippets testing tool, which you can use to test your markup and identify any errors.

3. Advanced topic: Machine-understandable versions of information

Many pages can be described using only the itemscope , itemtype , and itemprop attributes (described in section 1) along with the types and properties defined on schema.org (described in section 2).

However, sometimes an item property is difficult for a machine to understand without additional disambiguation. This section describes how you can provide machine-understandable versions of information when marking up your pages.

  • Dates, times, and durations: use the time tag with datetime
  • Enumerations and canonical references: use the link tag with href
  • Missing/implicit information: use the meta tag with content .

3a. Dates, times, and durations: use the time tag with datetime

Dates and times can be difficult for machines to understand. Consider the date «04/01/11». Does it mean January 11, 2004? January 4, 2011? Or April 1, 2011? To make dates unambiguous, use the time tag along with the datetime attribute. The value of the datetime attribute is the date specified using YYYY-MM-DD format. The HTML code below specifies the date unambiguously as April 1, 2011.

You can also specify a time within a day, using the hh:mm or hh:mm:ss format. Times are prefixed with the letter T and can be provided along with a date, like this:

Let’s see this in context. Here’s some HTML describing a concert taking place on May 8, 2011. The Event markup includes the name of the event, a description, and the date of the event.

Durations can be specified in an analogous way using the time tag with the datetime attribute. Durations are prefixed with the letter P (stands for «period»). Here’s how you can specify a recipe cook time of 1 ВЅ hours:

H is used to designate the number of hours, and M is used to designate the number of minutes.

The date, time, and duration standards are specified by the ISO 8601 date/time standard.

3b. Enumerations and canonical references: use link with href

Enumerations

Some properties can take only a limited set of possible values. Programmers often call these «enumerations.» For example, an online store with an item for sale could use the Offer item type to specify the details of the offer. The availability property can typically have one of only a few possible values— In stock , Out of stock , Pre-order , and so on. Much like item types are specified as URLs, possible values for an enumeration on schema.org can also be specified as URLs.

Here is an item for sale, marked up with the Offer type and relevant properties:

And here is the same item, but using link and href to unambiguously specify the availability as one of the permitted values:

Schema.org provides enumerations for a handful of properties—typically wherever there are a limited number of typical values for a property, there is a corresponding enumeration specified in schema.org. In this case, the possible values for availability are specified in ItemAvailability.

Canonical references

As you can see, itemprop=»url» can be used to specify a link to a page on another site (in this case Wikipedia) discussing the same item. Links to 3rd party sites can help search engines to better understand the item you are describing on your web page.

However, you might not want to add a visible link on your page. In this case, you can use a link element instead, as follows:

3c. Missing/implicit information: use the meta tag with content

Sometimes, a web page has information that would be valuable to mark up, but the information can’t be marked up because of the way it appears on the page. The information may be conveyed in an image (for example, an image used to represent a rating of 4 out of 5) or a Flash object (for example, the duration of a video clip), or it may be implied but not stated explicitly on the page (for example, the currency of a price).

In these cases, use the meta tag along with the content attribute to specify the information. Consider this example—the image shows users a 4 out of 5 star rating:

Here is the example again with the rating information marked up.

This technique should be used sparingly. Only use meta with content for information that cannot otherwise be marked up.

Что за атрибут itemprop?

Опции темы

Проверял сайт на валидность, и получил следующие предупреждение:

The itemprop attribute was specified, but the element is not a property of any item..

В теге прописано значение itemprop=»contentUrl», что она означает? И нужно ли оно? Или можно удалить ради валидности кода.

И ещё один момент, validator выдал такое предупреждение «Element noindex not allowed as child of element div in this context. » Получается что, нельзя использовать в коде?

NightHawk, ради валидности — можете, itemprop — это часть микроразметки.
про noindex — не знаю)

Спасибо сказали:

если вы хотите использовать «свои» атрибуты, делайте их следующего вида: data-*. (data-img, data-item)
валидно в HTML5 — более подробно в документации.

———- Сообщение добавлено 10:53 ———- Предыдущее 10:40 ———-

Как использовать микроразметку Schema.org: руководство для чайников

Время чтения: 5 минут Нет времени читать? Нет времени?

Вы знаете, что такое schema.org, но никак не можете внедрить ее на свой сайт? Вы прочитали кучу статей по теме, но ни одна из них не дала вам четкого руководства к действию? И вроде бы все понятно, но коды все-равно не работают?

Если вы оставляли подобные комментарии и вообще вышеописанная ситуация – это про вас, не расстраивайтесь. Мы поможем вам разобраться. В данном материале мы не будем отсылать вас на сайт schema.org со словами «Там все подробно написано, читайте». Вместо этого мы постараемся в максимально доступной форме (и с наглядными примерами) объяснить вам, как использовать эту пресловутую микроразметку и какой код куда нужно вписывать.

Что такое Schema.org?

Достаточно подробно о том, что такое микроразметка Schema.org, мы писали в одной из наших прошлых статей. А если коротко, то Schema.org – это словарь семантической разметки данных, поддерживаемый всеми ведущими поисковыми системами. Ее цель – помогать поисковым роботам лучше понимать содержание страницы и, тем самым, улучшать результаты выдачи.

Куда что нужно вписывать?

Ну а теперь давайте разбираться, какие коды и куда нужно вписывать. Обратимся к конкретному примеру. Вот так выглядит микроразметка, описывающая фильм «Аватар»:

Здесь мы видим три атрибута, и их вы должны будете неизменно использовать в каждой своей микроразметке:

  1. itemscope нужен только для того, чтобы показать поисковому боту, что на странице описывается определенный объект.
  2. itemtype всегда идет рядом с itemscope и нужен для того, чтобы показать поисковому боту тип объекта (в данном случае, это Movie). Полный список объектов можно посмотреть по ссылке.
  1. itemprop – описывает свойства выбранного объекта. В данном случае это: название фильма (name), режиссер (director), жанр (genre) и наличие трейлера (trailer). Все доступные свойства перечислены на сайте schema.org в соответствующем разделе:

Примечание. Вышеприведенный скриншот был сделан на сайте ruschema.org – проект перевода schema.org, развивающийся силами добровольцев. На данный момент переведен не весь сайт. Поучаствовать в переводе может любой желающий.

Помимо этих трех атрибутов в коде присутствуют еще и теги. Рассмотрим на другом примере, тип объекта – Person (Человек):

  1. Теги
  1. Теги … используются для указания ссылок, видных для пользователей.
  2. Тег (на изображении не используется) скрывает информацию от пользователей. Данный тег не рекомендуется использовать слишком часто – Google это не одобряет.

Как это сделать на практике?

Заходим на ruschema.org в раздел «Схемы». Выбираем нужный объект. Допустим, Book (Книга). Смотрим, какие свойства мы хотим указать. И начинаем собирать код.

У вас должно получиться примерно следующее:

Проверить правильность проставления микроразметки можно в специальных сервисах от Google и от Yandex.

Несколько примеров сниппетов и кодов

Для облегчения вашей задачи мы перечислим несколько примеров сниппетов и готовых кодов к ним. Вам остается только вписать свою информацию:

V >Название видео

«Ссылка на сам видеофайл — http://www.example.com/video123.flv»

– HTML-код видео. Берется с видеохостинга:

Берем бананы, снимаем с них кожуру. Перемалываем в блендере и добавляем туда муку»

W3cubDocs

The global attribute itemtype specifies the URL of the vocabulary that will be used to define itemprop ‘s (item properties) in the data structure. itemscope is used to set the scope of where in the data structure the vocabulary set by itemtype will be active.

Google and other major search engines support the schema.org vocabulary for structured data. This vocabulary defines a standard set of type names and property names. For example, MusicEvent indicates a concert performance, with startDate and location properties specifying the concert’s key details. In this case, MusicEvent would be the URL used by itemtype , with startDate and location as itemprop ‘s which MusicEvent defines.

Note: More about itemtype attributes can be found at http://schema.org/Thing

  • The itemtype attribute must have a value that is an unordered set of unique tokens which are case-sensitive, each is a val >
    itemscope itemtype schema.org Product
    itemprop name Executive Anvil
    itemprop brand [Thing]
    itemprop name ACME

Example

Result

Structured data

itemscope itemtype Product (http://schema.org/Product)
itemprop name Executive Anvil
itemprop image https://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605_960_720.png
itemprop description Sleeker than ACME’s Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.
itemprop mpn 925872
itemprop brand [Thing]
itemprop name ACME
itemscope itemprop[itemtype] aggregateRating[AggregateRating]
itemprop ratingValue 4.4
itemprop reviewCount 89
itemprop offers [Offer] http://schema.org/Offer
itemprop priceCurrency USD
itemprop price 119.99
itemprop priceValidUntil 2020-11-05
itemprop itemCondition http://schema.org/UsedCondition
itemprop availability http://schema.org/InStock
itemscope itemprop[itemtype] seller [Organization] http://schema.org/Organization
itemprop name Executive Objects

Note: A handy tool for extracting microdata structures from HTML is Google’s Structured Data Testing Tool. Try it on the HTML shown above

Создаем адаптивное резюме при помощи HTML5/CSS3

25 сентября 2013 | Опубликовано в css | 6 Комментариев »

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

Построение документа

Начинаем создание веб-страницы с документа HTML5 и стандартных мета элементов. Однако для того, чтобы сделать этот макет адаптивным, нам понадобится установить некоторые дополнительные элементы. Большинство из них это типичные мета-теги, которые будут поддерживаться во всех современных браузерах.

Мета-тег viewport — это тег, который крайне важен для того, чтобы отзывчивая страница могла работать на смартфонах. Мы сбрасываем масштаб макета к 1:1. Отметим также, что был включен внешний стилевой файл для Google Web Fonts . Используем два пользовательских шрифта “Simonetta” и “Balthazar”. Уникальные шрифты, конечно, захватывают внимание посетителя и гармонично сочетаются в одностраничном дизайне. Также было установлено одно маленькое условие IE, которое включает открытый скрипт для прежних браузеров. Internet Explorer 8 и старее испытывают затруднения в отображении HTML5 элементов и CSS3 свойств, но благодаря некоторым умным разработчикам эти затруднения можно обойти, используя JavaScript.

Главные блоки с контентом

Весь документ состоит из множества различных блоков внутри. Шапка включает фотографию, имя, адрес e-mail и другие важные данные. После этого каждый блок был разбит на для остального контента.

Когда вы будете менять размер страницы, эти блочные элементы будут изящно падать друг под друга.

Перед тем, как мы перейдем к деталям CSS, хочется больше рассказать про использование микроданных. Если приглядеться, то есть атрибуты внутри многих элементов с именами itemtype , itemscope , и itemprop . Они все касаются проекта Schmea project, который предлагает структуру данных для сети.

Форматирование полезных микроданных

Все главные поисковые системы, включая Google, Yahoo!, и Bing приняли Schema в качестве лучшего синтаксиса для повышения данных. Маркировка деталей помогает поисковым системам выводить связанные результаты онлайн для вас. Давайте разберемся, как установить их.

Атрибут itemscope применен для любого блока, который держит информацию на пункте схемы. Это всегда сопровождается атрибутом itemtype, который является сценарием описания персоны. В этом блоке обертки можно маркировать любое содержание при помощи itemprop наряду с любой из деталей, которые перечислены на странице документации.

Рекомендованный метод должен обернуть ваш контент внутри тега span вместо того, чтобы добавлять его прямо к элементу. Когда вы маркируете что-либо , например, фотографию, вы должны прикреплять itemprop прямо к элементу img . Но в противном случае, вы будете иметь гораздо более чистую разметку, обернув свои данные в span теги.

Сколько это слишком много?

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

Стоит непредвзято взглянуть на то, как вы можете использовать микроданные в аспектах вашего собственного сайта. Если вы проведете 10-15 минут, просматривая Schema, вы поймете, что она намного проще, чем вы думаете. Мы можем увидеть это на двух примерах из резюме демо версии:

Когда мы перечисляем навыки и умения, установим новый блок, определяющий ItemList schema . Значение здесь имеет то, что Google может понять, что каждый itemListElement связан друг с другом. В этом случае у нас есть список языков и программ, с которыми известно как работать.

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

Относительные CSS стили

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

Ничего интересного, за исключением некоторых пользовательских шрифтов.

Есть только несколько важных областей блока, которые заслуживают внимание. Конечно, блок обертки настроен с дополнительными отступами — внутри блока и вокруг блока. Также максимальная ширина ограничена 900px, потому что при большем размере создается впечатление, что у страницы очень много пустого места. Также используем закругленные углы внизу страницы для более гладкого эффекта.

Адаптивный дизайн

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

Первоначальный размер в 740px. Фотография будет конфликтовать с нашим заголовком. Помещаем оба элемента в центр всего макета. Увеличим также размер текста заголовка.

Когда окно становится меньше, удаляем некоторые внутренние отступы блока обертки и параграфы. Следующее, что нам нужно, это сместить элементы списка UL — навыки. Убираем две колонки и получаются плавающие друг за другом пункты.

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

Кодирование для смартфонов

Последние три точки маленькие, но очень важные. При переключении между режимами пейзажа и портрета iPhone будет изменять размеры любого мобильного браузера. Это же относится и к большинству устройств Android и Windows Mobile Phones.

При достижении точки в 480px или меньше будут удалены внутренние отступы обертки и изменится размер элементов списка. В точке 320px удаляем отступы вокруг блока. Вы все еще можете увидеть фон из текстуры, но это не очень важно в данной точке.

Последнее — используем max-device-width — 480px. В данном случае делаем шире список, чтобы элементы списка заполняли весь экран.

Заключительное слово

Работая в сети Internet было бы полезно иметь портфолио онлайн, откуда потенциальный клиент может перейти на одностаничное резюме и ознакомиться со всеми навыками и способностями автора. Это показывает вас с серьезной стороны и раскрывает ваш профессионализм в веб-дизайне.

Надеемся, что данный урок вам понравился и пригодится в дальнейшем. Если вас заинтересовал материал, скачивайте код и делитесь своими мыслями о статье.

Таргетинг itemprop в CSS?

У меня есть следующие два раздела кода, сгенерированные темой WordPress. Этот первый раздел кода создается для страницы WP:

Эта вторая секция кода создается для WP Post:

Я не могу определить селектор CSS, чтобы специально настроить и центрировать текст тега H1 внутри «itemprop DIV» для первого раздела кода.

Кроме того, я также хотел бы настроить и стилизовать тег H1 в WP Post с другим цветом текста, но опять же, не могу определить селектор CSS.

Вы можете попробовать использовать селектор атрибутов CSS, например:

Селектор [att=val] (как предложенный Стюартом Кершоусом) работает, если атрибут itemprop имеет только этот токен как значение.

Но атрибут itemprop может иметь несколько токенов как значение, и в этом случае [att=val] больше не будет соответствовать.

=val] селектор, который соответствует в обоих случаях: если это единственный токен или его один из нескольких токенов.

Пример

Хотя оба элемента span имеют токен name как значение itemprop , только первое соответствует правилу CSS с селектором [itemprop=»name»] :

Илон Маск рекомендует:  Продолжаем изучать visual basic
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL