() translation by (you can also view the original English article)
В этом туториале мы узнаем, как добавить семантики в ваш контент благодаря open graph, Twitter cards и микроданным. Сделав это, ваш контент будет более привлекательным, более релевантным, и потенциальным пользователям не составит труда его найти.
Google, Facebook, Twitter и другие платформы, которые вы и я используем, чтобы поделиться и найти контент, всё ещё не способны читать наши мысли. Skynet полагается на вас и меня, дизайнеров и разработчиков, чтобы понять смысл, который содержится в нашем контенте и как он может быть полезен целевой аудитории. Обучая эти платформы абстракциям и смыслу, тем самым мы помогаем им преподносить нам более релевантный, провокационный и заметный контент.
Что такое Discoverability?
Discoverability - свойство с помощью которого компьютер или человек могут с легкостью найти релевантную информацию в сети.
Какой из данных постов на Facebook привлекает больше внимание?
Какой из данных твитов более провокацио́нный?
И какой из результатов поиска Google больше подходит вашим интересам?
Разница очевидна. Если вы не реализуете Facebook Open Graph протокол, систему Twitter Card и микроданные для поисковиков, ваш контент скорее всего будет проигнорирован в пользу конкурентов способных предоставить релевантное содержание. В этой статье я постараюсь объяснить всю важность понимания потенциальной аудитории, добавляя вышеперечисленные системы в вашу семантическую разметку.
Разметка
Для начала давайте разберёмся, что такое разметка?
"Язык размеетки (текста) в компьютерной терминологии — набор символов или последовательностей, вставляемых в текст для передачи информации о его выводе или строении." - Wikipedia
Проще говоря, это способ разметить, комментировать или стилизовать документ, будь то ручка, карандаш либо компьютер, таким образом, что символически это будет отличаться от неразмеченного текста. Термин берёт своё начало от редакторов, размечавших рукописи для правки.
Метки редакторов - один из способов разметки. Помните вы делали что-то подобное в средней школе (или вы были в это время заняты компьютерными играми?!)
Вот вам три способа, разметки цифрового документ, разметка обозначает заголовок:
1 |
<h1>I Am the Best Heading</h1> |
1 |
##No I Am the Best Heading |
1 |
\section{I'm LaTeX}
|
Теперь когда у вас есть представление что такое LaTeX... эм, разметка, мы создадим HTML5 документ с небольшим количеством контента. Мы используем его, чтобы понять различные способы, как добавить больше смысла нашему контенту, улучшить его заметность (discoverability) в интернете.
HTML
Для начала, давайте создадим базовый HTML документ в вашем любимом текстовом редакторе.
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head></head>
|
4 |
<body></body>
|
5 |
</html>
|
Не правда-ли это выглядит гораздо чище, чем в старые времена. Теперь добавим контент!
Контент
Вот как выглядит наш контент, изображение очень печального кота, который будет находиться в элементе section, в теле нашего документ (body).
1 |
<body>
|
2 |
<section>
|
3 |
<img
|
4 |
src="http://ryanallen.com/img/forlorn-feline.gif" |
5 |
>
|
6 |
</section>
|
7 |
</body>
|
Title
Теперь когда мы знаем с каким контентом нам предстоит работать, давайте укажем контекст нашей странице. Наш старый друг, тег <title> в шапке нашего документа <head>.
1 |
<head>
|
2 |
<title>
|
3 |
Forlorn Feline |
4 |
</title>
|
5 |
</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:
Title
Первое из них тег title, представляет собой название объекта, который появится на Facebook.
Вот как мой пример будет выглядеть, после добавления title, в том случае если кто-то решит поделиться им на Facebook.
1 |
<meta
|
2 |
property="og:title" |
3 |
content="Forlorn Feline" |
4 |
>
|
Обратите внимание: если вы зададите facebook open graph title, который отличается от оригинального title, Facebook покажет вам ошибку во время отладки вашей страницы. Facebook разрешает различая, но валидация не пройдёт на 100%. Я не знаю почему Facebook не одобряет это, если у вас есть идеи насчёт этого, сообщите мне!
Type
Следующие свойство необходимое Facebook - тип объекта (type of object), которое будет показываться пользователям данной платформы.
Наш контент не представляет собой музыку или видео. Также это явно не статья, книга или профиль. Всё что остаётся, так это факт, что наш контент находится внутри HTML документа, который после того, как будет загружен на сервер, становится веб-сайтом.
1 |
<meta
|
2 |
property="og:type" |
3 |
content="website" |
4 |
>
|
Image
Третье свойства, которые нужно Facebook - изображение (image), оно будет представлять объект. Тут нет ничего сложного!
1 |
<meta
|
2 |
property="og:image" |
3 |
content="http://ryanallen.com/img/forlorn-feline.gif" |
4 |
>
|
URL
Четвёртое и последнее свойство - адрес (URL) по которому пользователи будут переходить при взаимодействии с объектом.
Также как и в случае со свойством - изображением, тут всё предельно понятно.
1 |
<meta
|
2 |
property="og:url" |
3 |
content="http://ryanallen.com/forlorn-feline.html" |
4 |
>
|
На этом всё, мы указали всё что было необходимо. Теперь пришло время указать больше абстрактного смысла нашему контенту и для этого прежде всего стоит определить нашу целевую аудиторию
Целевая аудитория
Задача этой статьи не помочь осознать кто является вашей целевой аудиторией. Однако я хочу указать на всю важность понимания того, что за люди будут читать и просматривать контент. Когда вы пытаетесь структурировать правильный контекст контента, совершенно необходимо представлять кто будет его искать и что пользователи хотят узнать наткнувшись на него.
Что касается контента в данной статье, изображение печального кота, целевая аудитория - веб-дизайнер, пытающийся узнать больше о discoverability (вы). Давайте разберёмся, как это выглядит согласно опциональной Facebook размете.
Опциональная абстрактная разметка
Мы можем добавить дополнительную разметку, к примеру описание, это делать не объязательно, но так контент будет выглядеть более информативным и интересным для пользователя, который его найдёт.
Какое же описание стоит добавить? Оно должно быть релевантным целевой аудитории.
1 |
<meta
|
2 |
property="og:description" |
3 |
content="Vincenzo the cat is sad that no one is |
4 |
discovering the online content he worked so hard
|
5 |
to create. Such hurt. Very Sadness."
|
6 |
>
|
Отлично! Помните я упоминал, что Twitter работает похожим образом, как и Facebook Open Graph протокол? Далее мы посмотрим как это выглядит!
Twitter'у необходимы другие свойства, в зависимости от типа карты (card type), который вы используете. В этом примере мы будем использовать тип по умолчанию карту резюме (Summary Card), для которой нам необходимо задать четыре свойства:
Для большинства этих свойств нам не требуется делать какую-либо дополнительную работу. Вы спросите почему?
"Когда процессор Twitter card ищет теги на вашей странице, изначально он проверяет Twitter свойства, и если их нет, использует свойства Open Graph. Это позволяет указать свойства для обоих технологий независимо и минимизировать количество повторяющейся разметки, нужной для разметки контента." - Twitter
Уменьшаем количество повторяющейся разметки
Это отлично! Теги, которые нам не нужно повторять (хотя можно это сделать, если на то есть причины):
og:titleog:descriptionog:image
Три тега добавлять не надо, осталось два!
Тип карты
Для начала давайте укажем Twitter'у, тип контента который мы распространяем. Мы обозначили карту в качестве типа по умолчанию - карта резюме, таким образом она и будет отображаться если кто-то поделиться статьёй на Twitter.
1 |
<meta
|
2 |
name="twitter:card" |
3 |
content="summary" |
4 |
>
|
Это было просто, что же дальше? Надеюсь это будет что-то грандиозное!
Атрибуты
Twitter требует указать аккаунт в качестве атрибута, аккаунт принадлежащий создателю контента и/или владельцу контента. Если контент находится на странице компании, или принадлежит отделу компании, (или расположен на сайте компании, но не принадлежит самой компании) вы можете использовать специальные атрибуты.
Вот как это будет выглядеть если страница находится на сайте, который принадлежит мне:
1 |
<meta
|
2 |
name="twitter:creator" |
3 |
content="@ryanallen_com" |
4 |
>
|
Вот как бы это выглядело, если HTML страница находилась на Tuts+ Web Design:
1 |
<meta
|
2 |
name="twitter:creator" |
3 |
content="@ryanallen_com" |
4 |
>
|
5 |
<meta
|
6 |
name="twitter:site" |
7 |
content="@wdtuts" |
8 |
>
|
Twitter'у нужно аутентифицировать и проверить домен, для каждого типа Twitter карты. Это просто и весь процесс автоматизирован, хотя я не знаю, что случиться если ваш домен не пройдёт проверку. Если кто-то с подобным сталкивался, поделитесь в комментариях.
На этом всё относительно Twitter! Хорошо, что сначала мы добавили Open Graph, Twitter экономит много времени, работая с другими платформами. Спасибо Twitter!
Пора вернуться к поисковикам, ради нового, контекстного и интересного способа по оптимизации контента.
Микроданные и оптимизация для поисковиков
Для начала, пара слов от Microsoft:
"Второго июня [2011] мы [Microsoft] анонсировали сотрудничество между Bing, Google и Yahoo, чтобы создать и поддерживать стандарт, набор схем для структурированной разметки данных на веб-страницах. Хотя наши компании в большинстве случаев конкурируют, нам было очевидно, что сотрудничество в этой сфере будут продуктивным для каждого поисковика в отдельности и для индустрии в целом. - Michael O'Connor
Микроданные подход отличающийся от других видов разметки, которые мы уже реализовали, теги данной разметкине нужно помещать в шапке документа.
Мы будем использовать микроданные для добавления контекста нашему контенту в теле HTML документа. Поисковики будут использовать эти данные для улучшения discoverability нашего контента для пользователей.
Компьютеры верят тому, что мы пытаемся им сообщить. По крайней мере сейчас...
Необходимая разметка микроданных
Следующие теги необходимы для каждого элемента, которому вы хотите придать смысл.
Для начала нам следует установить, что мы будем описывать. Давайте повеселимся с семантикой и добавим контекст и смысл нашему контенту, чтобы он был интересен целевой аудитории.
Помните, что мы работаем только над одной частью контента. Какой смысл может содержаться в одной картинке?
Что же, это действительно выглядит как кот. Отлично, все в интернете любят котов! Какая структура shema разметки лучше всего описывает кота, из доступных нам?
Пожалуй это не действие, не сервис вещания, не медицинское событие или место. Пожалуй это творческая работа, если быть точнее пример визуального художественного произведения, хотя Google на данный момент внедряет некоторые изменения, которые могут повлиять на способы использования разметки, на короткий срок:
@ryanallen_com @googledevs @google нет, скорее всего (надеемся что нет) ожидаются некоторые задержки с изменениями до февраля, то есть http://t.co/09JUDuUIwW
— Dan Brickley (@danbri) второе марта, 2015
Давайте объявим itemtype внутри тега section:
1 |
<section
|
2 |
itemscope
|
3 |
itemtype="https://schema.org/CreativeWork" |
4 |
>
|
5 |
<img
|
6 |
src="http://ryanallen.com/img/forlorn-feline.gif" |
7 |
>
|
8 |
</section>
|
Неплохое начало, хотя наш контент всё ещё не имеет смысла. Google, Bing, Yahoo и Yandex теперь на 100% знают, что наш контент это творческое произведение, но ничего более. Давайте добавим больше осмысленного контекста для целевой аудитории: веб-дизайнеров.
Опциональные свойства микроданных
Не обязательно перечислять весь список свойств, которые можно использовать для элемента творческого произведения, вместо этого добавим свойства для веб-дизайнеров, целевой аудитории.
Начнём с объявления всех вещей, на которых данный контент фокусируется, прочных и непоколебимых в своем смысле, значении.
Изображение
Для начала, это изображение, в качестве атрибута, которого мы указываем определённый путь, ссылку в интернете (src).
1 |
<img
|
2 |
itemprop="image" |
3 |
src="http://ryanallen.com/img/forlorn-feline.gif" |
4 |
>
|
Автор
Я являюсь автором, создателем и иллюстратором
1 |
<meta
|
2 |
itemprop="author" |
3 |
content="Ryan Allen" |
4 |
>
|
Аудитория
Выглядит хорошо! А теперь укажем нашу целевую аудиторию.
1 |
<meta
|
2 |
itemprop="audience" |
3 |
content="web designers" |
4 |
>
|
Предназначено для обучения
Теперь мы укажем тип "предназначено для обучения" (educational use), мы подразумеваем, картинка предназначается для обучение, пример в нашем случае.
1 |
<meta
|
2 |
itemprop="educationalUse" |
3 |
content="example" |
4 |
>
|
Доступно детям для просмотра
Эта картинка явно не представляет из себя контента для взрослых, надеюсь это понятно.
1 |
<meta
|
2 |
itemprop="isFamilyFriendly" |
3 |
content="true" |
4 |
>
|
Персонаж
Какое имя мы дадим нашему коту, персонажу?
1 |
<meta
|
2 |
itemprop="character" |
3 |
content="Vincenzo" |
4 |
>
|
О да. Замечательное имя, хотя тут мы немного переносимся во вселенную абстракций. Теперь вещи будут гораздо абстрактнее.
О чём
Давайте добавим ещё контекста, поговорим о чём (about) это изображение и какое отношение оно имеет к нашей целевой аудитории.
1 |
<meta
|
2 |
itemprop="about" |
3 |
content="Vincenzo the cat is sad that no one is |
4 |
discovering the online content he worked so hard
|
5 |
to create. Such hurt. Very Sadness."
|
6 |
>
|
Давайте закончим, списком разделённым запятыми, целевых, релевантных ключевых слов, чтобы добавить ещё больше discoverability.
1 |
<meta
|
2 |
itemprop="keywords" |
3 |
content="designer, design, web design, seo, |
4 |
discoverability, open graph, twitter cards,
|
5 |
microdata, google, bing, microsoft, yahoo,
|
6 |
yandex, content, context, semantics, meaning,
|
7 |
sad, cat, animation, gif, cute, illustration, tutsplus"
|
8 |
>
|
Валидация
Нам осталось только проверить наш код с помощью Google, затем Facebook, после чего Twitter. Вот как это выглядит:
Подытожим
И так как же выглядит финальный результат?
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<title>
|
5 |
Forlorn Feline |
6 |
</title>
|
7 |
<!-- FACEBOOK'S OPEN GRAPH PROTOCOL -->
|
8 |
<meta
|
9 |
property="og:title" |
10 |
content="Forlorn Feline" |
11 |
>
|
12 |
<meta
|
13 |
property="og:type" |
14 |
content="website" |
15 |
>
|
16 |
<meta
|
17 |
property="og:image" |
18 |
content="http://ryanallen.com/img/forlorn-feline.gif" |
19 |
>
|
20 |
<meta
|
21 |
property="og:url" |
22 |
content="http://ryanallen.com/forlorn-feline.html" |
23 |
>
|
24 |
<meta
|
25 |
property="og:description" |
26 |
content="Vincenzo the cat is sad that no one is |
27 |
discovering the online content he worked so hard
|
28 |
to create. Such hurt. Very Sadness."
|
29 |
>
|
30 |
<!-- TWITTER CARDS -->
|
31 |
<meta
|
32 |
name="twitter:card" |
33 |
content="summary" |
34 |
>
|
35 |
<meta
|
36 |
name="twitter:creator" |
37 |
content="@ryanallen_com" |
38 |
>
|
39 |
</head>
|
40 |
<body>
|
41 |
<section
|
42 |
itemscope
|
43 |
itemtype="https://schema.org/CreativeWork"> |
44 |
<img
|
45 |
itemprop="image" |
46 |
src="http://ryanallen.com/img/forlorn-feline.gif" |
47 |
>
|
48 |
<meta
|
49 |
itemprop="author" |
50 |
content="Ryan Allen" |
51 |
>
|
52 |
<meta
|
53 |
itemprop="audience" |
54 |
content="web designers" |
55 |
>
|
56 |
<meta
|
57 |
itemprop="educationalUse" |
58 |
content="example" |
59 |
>
|
60 |
<meta
|
61 |
itemprop="isFamilyFriendly" |
62 |
content="true" |
63 |
>
|
64 |
<meta
|
65 |
itemprop="character" |
66 |
content="Vincenzo" |
67 |
>
|
68 |
<meta
|
69 |
itemprop="about" |
70 |
content="Vincenzo the cat is sad that no one is |
71 |
discovering the online content he worked so hard
|
72 |
to create. Such hurt. Very Sadness."
|
73 |
>
|
74 |
<meta
|
75 |
itemprop="keywords" |
76 |
content="designer, design, web design, seo, |
77 |
discoverability, open graph, twitter cards,
|
78 |
microdata, google, bing, microsoft, yahoo,
|
79 |
yandex, content, context, semantics, meaning,
|
80 |
sad, cat, animation, gif, cute, illustration, tutsplus"
|
81 |
>
|
82 |
</section>
|
83 |
</body>
|
84 |
</html>
|
Добавив больше смысла, значения нашему небольшому кусочку контента с помощью open graph, Twitter cards и микроданных, мы увеличили шансы того, что целевая аудитория сможет его найти, поделиться им с окружающими, после чего кто-нибудь сделает футболку с данным персонажем раскрашенным в яркие цвета. Удачи вам в реализации осмысленной разметки на вашем собственном веб-сайте!
