Элементы микроразметки для улучшения взаимодействия сайта с социальными сетями

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

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

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

Как правило микроразметка состоит из словаря и синтаксиса


Источник изображения: http://habrahabr.ru/company/yandex/blog/211638/

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

Было придумано несколько словарей, такие как Open Graph, Schema.org, Микроформаты и прочие. Подробнее про виды и типы словарей и синтаксисов микроразметки вы можете прочитать на сайте http://habrahabr.ru/company/yandex/blog/211638/

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

Twitter Card

Twitter Cards позволяет создавать расширенные твиты так называемые карточки. Доступно семь видов карточек.
Summary Card, Summary Card with Large Image.

Для Twitter Cards вся разметка, так же как и в Open Graph, располагается в тегах . Обязательно должны присутствовать title и description. Тип карточки определяется через twitter:card. По умолчанию выбирается тип summary.






Facebook Open Graph

Open Graph разработана в Facebook и использует синтаксис RDF. Размещается в дополнительных тегах в страницы.
Обязательно должны присутствовать четыре свойства:

og:title — название объекта;
og:type — тип объекта;
og:image — URL изображения объекта;
og:url — канонический URL объекта;

В зависимости от типа объекта могут быть доступны дополнительные свойства.










Google+ and Schema.org / Itemscope (LinkedIn, Google+ and Pinterest)





Мета тэги Google для улучшения возможностей поиска









Полезные ссылки:

1. https://scotch.io/quick-tips/all-search-and-social-media-meta-tags-starter-template
2. http://webonlife.ru/prodvizhenie-sayta/mikrorazmetka-dlya-socialnyh-setey
3. http://www.internet-technologies.ru/articles/article_1837.html
4. http://www.9lessons.info/2014/01/social-meta-tags-for-google-twitter-and.html
5. http://habrahabr.ru/company/yandex/blog/211638/
6. https://blog.kissmetrics.com/open-graph-meta-tags/
7. http://www.quicksprout.com/2013/03/25/social-media-meta-tags-how-to-use-open-graph-and-cards/#
8. http://www.bruceclay.com/blog/how-to-use-social-meta-tags/
9. http://www.iacquire.com/blog/18-meta-tags-every-webpage-should-have-in-2013

Спецификации

1. http://ogp.me/
2. https://schema.org/docs/documents.html
3. http://microformats.org/