Микроразметка это дополнительная возможность сообщить роботу поисковой системы на то, что конкретно содержит страница.
Микроразетку так же называют семантической разметкой. Дополнительное информирование роботов осуществляется за счет добавления на страницу в 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.
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@scotch_io"> <meta name="twitter:creator" content="ncerminara"> <meta name="twitter:title" content="Bootstrap 3 Tips and Tricks You Might Not Know"> <meta name="twitter:description" content="Bootstrap 3 has a ton of features and helpers to speed up front-end development. Sometimes you need something and you end up writing your own custom CSS and JavaScript without even realizing that Bootstrap could have done it for you...."> <meta name="twitter:image:src" content="/wp-content/uploads/2014/05/bs31.jpg">
Facebook Open Graph
Open Graph разработана в Facebook и использует синтаксис RDF. Размещается в дополнительных тегах в
страницы.Обязательно должны присутствовать четыре свойства:
og:title — название объекта;
og:type — тип объекта;
og:image — URL изображения объекта;
og:url — канонический URL объекта;
В зависимости от типа объекта могут быть доступны дополнительные свойства.
<meta property="fb:admins" content="579622216,709634581"> <meta property="fb:app_id" content="1389892087910588"> <meta property="og:url" content="http://scotch.io/bar-talk/bootstrap-3-tips-and-tricks-you-might-not-know"> <meta property="og:type" content="article"> <meta property="og:title" content="Bootstrap 3 Tips and Tricks You Might Not Know"> <meta property="og:image" content="/wp-content/uploads/2014/05/bs31.jpg"/> <meta property="og:description" content="Bootstrap 3 has a ton of features and helpers to speed up front-end development. Sometimes you need something and you end up writing your own custom CSS and JavaScript without even realizing that Bootstrap could have done it for you...."> <meta property="og:site_name" content="Scotch"> <meta property="article:author" content="https://www.facebook.com/NCerminara"> <meta property="article:publisher" content="https://www.facebook.com/scotchdevelopment">
Google+ and Schema.org / Itemscope (LinkedIn, Google+ and Pinterest)
<link rel="author" href="https://plus.google.com/+NicholasCerminaraV/"> <link rel="publisher" href="https://plus.google.com/+ScotchIo/"> <meta itemprop="name" content="Bootstrap 3 Tips and Tricks You Might Not Know"> <meta itemprop="description" content="Bootstrap 3 has a ton of features and helpers to speed up front-end development. Sometimes you need something and you end up writing your own custom CSS and JavaScript without even realizing that Bootstrap could have done it for you...."> <meta itemprop="image" content="/wp-content/uploads/2014/05/bs31.jpg">
Мета тэги Google для улучшения возможностей поиска
<meta property="place:location:latitude" content="13.062616"/> <meta property="place:location:longitude" content="80.229508"/> <meta property="business:contact_data:street_address" content="Street Name"/> <meta property="business:contact_data:locality" content="City Name"/> <meta property="business:contact_data:postal_code" content="ZIP Code"/> <meta property="business:contact_data:country_name" content="Country"/> <meta property="business:contact_data:email" content="cotact@mail.com"/> <meta property="business:contact_data:phone_number" content="+91 1234567890"/> <meta property="business:contact_data:website" content="http://www.website.com"/>
Полезные ссылки:
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/