Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SEO

Сделайте Ваш Веб-сайт Заметнее с Семантической Разметкой

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by Anton Lisovsky (you can also view the original English article)

В этом туториале мы узнаем, как добавить семантики в ваш контент благодаря open graph, Twitter cards и микроданным. Сделав это, ваш контент будет более привлекательным, более релевантным, и потенциальным пользователям не составит труда его найти.

Google, Facebook, Twitter и другие платформы, которые вы и я используем, чтобы поделиться и найти контент, всё ещё не способны читать наши мысли. Skynet полагается на вас и меня, дизайнеров и разработчиков, чтобы понять смысл, который содержится в нашем контенте и как он может быть полезен целевой аудитории. Обучая эти платформы абстракциям и смыслу, тем самым мы помогаем им преподносить нам более релевантный, провокационный и заметный контент.

Что такое Discoverability?

Discoverability - свойство с помощью которого компьютер или человек могут с легкостью найти релевантную информацию в сети.

Какой из данных постов на Facebook привлекает больше внимание?

Какой из данных твитов более провокацио́нный?

И какой из результатов поиска Google больше подходит вашим интересам?

Google search result with and without microdata

Разница очевидна. Если вы не реализуете Facebook Open Graph протокол, систему Twitter Card и микроданные для поисковиков, ваш контент скорее всего будет проигнорирован в пользу конкурентов способных предоставить релевантное содержание. В этой статье я постараюсь объяснить всю важность понимания потенциальной аудитории, добавляя вышеперечисленные системы в вашу семантическую разметку.

Разметка

Для начала давайте разберёмся, что такое разметка?

"Язык размеетки (текста) в компьютерной терминологии — набор символов или последовательностей, вставляемых в текст для передачи информации о его выводе или строении." - Wikipedia

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

Proofreaders Marks from the Chicago Manual of Style
Взято с Чикагского руководства по стилизации

Метки редакторов - один из способов разметки. Помните вы делали что-то подобное в средней школе (или вы были в это время заняты компьютерными играми?!)

Вот вам три способа, разметки цифрового документ, разметка обозначает заголовок:

HTML:

Markdown

LaTeX

Теперь когда у вас есть представление что такое LaTeX... эм, разметка, мы создадим HTML5 документ с небольшим количеством контента. Мы используем его, чтобы понять различные способы, как добавить больше смысла нашему контенту, улучшить его заметность (discoverability) в интернете.

HTML

Для начала, давайте создадим базовый HTML документ в вашем любимом текстовом редакторе.

Не правда-ли это выглядит гораздо чище, чем в старые времена. Теперь добавим контент!

Контент

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

Cheer up mate
Взбодрись, приятель...

Title

Теперь когда мы знаем с каким контентом нам предстоит работать, давайте укажем контекст нашей странице. Наш старый друг, тег <title> в шапке нашего документа <head>.

Давайте сделаем что-то более сложное (не слишком сложное), я говорю о Facebook Open Graph протоколе!

Facebook Open Graph протокол

Open Graph протокол позволяет сделать из любой страницы объект с данными в социальном графе Facebook. Что в свою очередь позволяет любой веб-странице обладать тем же функционалом, что и Facebook объект.

Facebook open graph (также как и система Twitter card, с которой мы познакомимся позже) работает с мета данными, которые вы добавляете в <head> вашей страницы. Там же где мы недавно разместили наш <title>. В случае Facebook open graph протокола, необходимо добавить четыре свойства.

Необходимая Open Graph разметка

Необходимые свойства для Facebook open graph:

  1. Title
  2. Type
  3. Image
  4. URL

Title

Первое из них тег title, представляет собой название объекта, который появится на Facebook.

Вот как мой пример будет выглядеть, после добавления title, в том случае если кто-то решит поделиться им на Facebook.

Обратите внимание: если вы зададите facebook open graph title, который отличается от оригинального title, Facebook покажет вам ошибку во время отладки вашей страницы. Facebook разрешает различая, но валидация не пройдёт на 100%. Я не знаю почему Facebook не одобряет это, если у вас есть идеи насчёт этого, сообщите мне!

Type

Следующие свойство необходимое Facebook - тип объекта (type of object), которое будет показываться пользователям данной платформы.

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

Image

Третье свойства, которые нужно Facebook - изображение (image), оно будет представлять объект. Тут нет ничего сложного!

URL

Четвёртое и последнее свойство - адрес (URL) по которому пользователи будут переходить при взаимодействии с объектом.

Также как и в случае со свойством - изображением, тут всё предельно понятно.

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

Целевая аудитория

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

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

Опциональная абстрактная разметка

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

Какое же описание стоит добавить? Оно должно быть релевантным целевой аудитории.

Отлично! Помните я упоминал, что Twitter работает похожим образом, как и Facebook Open Graph протокол? Далее мы посмотрим как это выглядит!

Twitter

Twitter'у необходимы другие свойства, в зависимости от типа карты (card type), который вы используете. В этом примере мы будем использовать тип по умолчанию карту резюме (Summary Card), для которой нам необходимо задать четыре свойства:

  1. Card Type
  2. Attribution
  3. Title
  4. Description

Для большинства этих свойств нам не требуется делать какую-либо дополнительную работу. Вы спросите почему?

"Когда процессор Twitter card ищет теги на вашей странице, изначально он проверяет Twitter свойства, и если их нет, использует свойства Open Graph. Это позволяет указать свойства для обоих технологий независимо и минимизировать количество повторяющейся разметки, нужной для разметки контента." - Twitter

Уменьшаем количество повторяющейся разметки

Это отлично! Теги, которые нам не нужно повторять (хотя можно это сделать, если на то есть причины):

  1. og:title
  2. og:description
  3. og:image

Три тега добавлять не надо, осталось два!

Тип карты

Для начала давайте укажем Twitter'у, тип контента который мы распространяем. Мы обозначили карту в качестве типа по умолчанию - карта резюме, таким образом она и будет отображаться если кто-то поделиться статьёй на Twitter.

Это было просто, что же дальше? Надеюсь это будет что-то грандиозное!

Атрибуты

Twitter требует указать аккаунт в качестве атрибута, аккаунт принадлежащий создателю контента и/или владельцу контента. Если контент находится на странице компании, или принадлежит отделу компании, (или расположен на сайте компании, но не принадлежит самой компании) вы можете использовать специальные атрибуты.

Вот как это будет выглядеть если страница находится на сайте, который принадлежит мне:

Вот как бы это выглядело, если HTML страница находилась на Tuts+ Web Design:

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

На этом всё относительно Twitter! Хорошо, что сначала мы добавили Open Graph, Twitter экономит много времени, работая с другими платформами. Спасибо Twitter!

Пора вернуться к поисковикам, ради нового, контекстного и интересного способа по оптимизации контента.

Микроданные и оптимизация для поисковиков

Google SEO Microdata Rich Text Snippet Example

Для начала, пара слов от Microsoft:

"Второго июня [2011] мы [Microsoft] анонсировали сотрудничество между Bing, Google и Yahoo, чтобы создать и поддерживать стандарт, набор схем для структурированной разметки данных на веб-страницах. Хотя наши компании в большинстве случаев конкурируют, нам было очевидно, что сотрудничество в этой сфере будут продуктивным для каждого поисковика в отдельности и для индустрии в целом. - Michael O'Connor

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

Мы будем использовать микроданные для добавления контекста нашему контенту в теле HTML документа. Поисковики будут использовать эти данные для улучшения discoverability нашего контента для пользователей.

Компьютеры верят тому, что мы пытаемся им сообщить. По крайней мере сейчас...

Необходимая разметка микроданных

Следующие теги необходимы для каждого элемента, которому вы хотите придать смысл.

  1. Item Scope
  2. Item Type

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

Помните, что мы работаем только над одной частью контента. Какой смысл может содержаться в одной картинке?

 gato

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

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


Давайте объявим itemtype внутри тега section:

Неплохое начало, хотя наш контент всё ещё не имеет смысла. Google, Bing, Yahoo и Yandex теперь на 100% знают, что наш контент это творческое произведение, но ничего более. Давайте добавим больше осмысленного контекста для целевой аудитории: веб-дизайнеров.

Опциональные свойства микроданных

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

Начнём с объявления всех вещей, на которых данный контент фокусируется, прочных и непоколебимых в своем смысле, значении.

Изображение

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

Автор

Я являюсь автором, создателем и иллюстратором

Аудитория

Выглядит хорошо! А теперь укажем нашу целевую аудиторию.

Предназначено для обучения

Теперь мы укажем тип "предназначено для обучения" (educational use), мы подразумеваем, картинка предназначается для обучение, пример в нашем случае.

Доступно детям для просмотра

Эта картинка явно не представляет из себя контента для взрослых, надеюсь это понятно.

Персонаж

Какое имя мы дадим нашему коту, персонажу?

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

О чём

Давайте добавим ещё контекста, поговорим о чём (about) это изображение и какое отношение оно имеет к нашей целевой аудитории.

Давайте закончим, списком разделённым запятыми, целевых, релевантных ключевых слов, чтобы добавить ещё больше discoverability.

Валидация

Нам осталось только проверить наш код с помощью Google, затем Facebook, после чего Twitter. Вот как это выглядит:

Facebook

Validating facebook open graph markup

Twitter

Twitter validation

Google

Google Structured Data Testing Tool Validation

Подытожим

И так как же выглядит финальный результат?

Добавив больше смысла, значения нашему небольшому кусочку контента с помощью open graph, Twitter cards и микроданных, мы увеличили шансы того, что целевая аудитория сможет его найти, поделиться им с окружающими, после чего кто-нибудь сделает футболку с данным персонажем раскрашенным в яркие цвета. Удачи вам в реализации осмысленной разметки на вашем собственном веб-сайте!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.