Пуленепробиваемая разметка open graph

С каких площадок идет трафик

STM32 и FreeRTOS. 5. Приносим пользу и добро!

Взаимодействие с поисковыми системами

Иногда требуется запретить или разрешить роботам поисковых систем обрабатывать ту или иную страницу. Метатег определяет политику обработки страницы поисковыми роботами. Вот несколько примеров:

• — разрешено индексировать текст и ссылки на странице, аналогично ;
• — не индексировать текст страницы;
• — не переходить по ссылкам на странице;
• — запрещено индексировать текст и переходить по ссылкам на странице, аналогично ;
• — не показывать ссылку на сохраненную копию на странице результатов поиска.

Как и предыдущий тег, определяет политику обработки страницы поисковым роботом, но только для Google:

Проверяет веб-сайт на наличие доступа к панели веб-мастера Google (Google Webmaster Tools):

Отключает :

Запрещает браузеру Google Chrome переводить веб-страницу:

Подробности работы с Google описаны в .

Яндекс

Определяет политику обработки страницы роботом Яндекс:

Проверяет веб-сайт на наличие доступа к сервису Яндекс.Вебмастер:

Подробности работы с Яндекс описаны на странице помощи для веб-мастеров.

Особенности внедрения OG на сайт

После того как разместили микроразметку Open Graph на странице, ее следует проверить. Сделать это можно с помощью специального отладчика Facebook

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

Кроме того проверку микроразметки ОпенГраф умеет делать валидатор Yandex.

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

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

Что такое разметка Open Graph и как она поможет вашему сайту получать больше трафика

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

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

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

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

Например, так выглядит репост статьи с разметкой Open Graph в Фейсбуке:

А так выглядит репост этого же материала во ВКонтакте:

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

Репост в Фейсбук статьи без внедренной разметки:

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

В примере ниже — подтянулась картинка из шапки сайта, а в кратком описании — фрагмент текста для формы подписки на рассылку:

Что можно сделать с помощью Open Graph

С помощью разметки вы можете настроить корректное и привлекательное отображение публикаций в соцсетях при репосте материалов с вашего сайта:

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

Также Open Graph позволяет создать блок рекомендуемого контента в Google AdSense:

Где используется Open Graph

Микроразметка была создана Facebook и изначально использовалась только в этой соцсети. Сегодня поддерживается популярными соцсетями и мессенджерами: ВКонтакте, Твиттер, LinkedIn, Телеграм, Viber, Slack и др.

Changelog

2.8.9 (2020-10-21)

• Added response code check for YouTube thumbnails. Props for Biblioteka Targówek.
• Added fallback for YouTube thumbnails: `maxresdefault’->’hqdefault’->’0′.

2.8.7 (2020-10-05)

Fixed og:image order issue, move thumbnail was offered first, instead entry featured image. Props for Maurício Varallo II.

2.8.2 (2020-06-03)

• Added Vimeo video support for og:image and og:video.
• Improved default YouTube images, now it is saved with SSL.
• Removed array sum code it is incompatible with older PHP.

2.8.1 (2020-06-03)

• Added dimensions and type for YouTube images if it is possible.
• Added filter to easy setup Twitter @username of creator.
• Added multiple for all YouTube movies.
• Removed post meta for YouTube images when movies was deleted from entry.
• Use SSL for YouTube images if site is on SSL.

2.8.0 (2020-06-03)

• Removed Facebook check for allowed locales.
• Fixed Twitter issue.
• Added filter to easy setup Twitter @username for site owner.

2.7.7 (2020-06-01)

• Added for images with https url. Props for mociofiletto
• Improved attachment page OpenGraph tags.
• For entry without thumbnail get all content images into og:image.

2.7.4 (2019-04-25)

Fixed a problem with og:image content for document with featured image and images in the content. Props for sudoranger

2.7.3 (2019-04-23)

Added “summary_large_image” for twitter:card if attached image has width bigger then 520px. Props for Bobby Eberle.

2.7.1 (2019-04-13)

• Added locale string into cache settings to be able handle languages. Props for Oleksandr Omelchenko.
• Added cache locale value inside the class object to.

2.7.0 (2018-10-21)

• Added proper og:url for custom post archive page. Props for cabaltc.
• Added proper og:url for a day, month and year archive page.
• Added proper og:url for a search result.
• Added proper og:url for taxonomy archive page.
• Removed OpenGraph from 404 page.

2.6.0 (2018-06-04)

• Added attached audio files to tag.
• Added attached video files to tag.
• Added tag.
• Added transient cache for single entries to decrease DB usage.
• Updated Facebook locales list.

2.5.2 (2018-05-08)

• Added filter to allow change length.
• Fixed a problem with striping last word. Props for intrex.
• We are back to trim to 55 words (it is default for function).

2.4.7 (2017-09-26)

• Added filter “og__value” to change single og value.
• Added og:type for post formats “audio” and “video”.
• Fixed og:type for WooCommerce product. Props for shaharsol.

2.4.2 (2017-05-03)

• Added tags “og:video” and “twitter:player” for YouTube embed movies.
• Added WooCommerce integration for tags: “og:price:amount”, “og:price:currency” and “og:availability”.
• Improved description tag, when entry content is empty, add entry title as description.

2.4.1 (2016-10-26)

• Fixed problem for pages and another single content. At this moment OG works for all types of single entries.
• Added ask for the rating on the plugin page.
• Short twitter description.

2.4 (2016-04-10)

• Fixed the problem with proper preparation for localization.
• Fixed the profile with grabbing YouTube image.
• Implement WordPress code standard for PHP code used in the plugin.

2.3 (2016-02-03)

• Added categories as og:section.
• Added esc_attr to headers tags.
• Added msapplication-TileImage.
• Added og:site_name.
• Added profile:first_name, profile:last_name & profile:username props for Arek.
• Added tags.
• Added twitter tags.
• Added usage of site icon when is no icon – all cases.

2.0 (2014-12-11)

• IMPROVEMENT: added check to post_content exists for CPT without this field.
• IMPROVEMENT: added og:author link
• IMPROVEMENT: big refactoring
• IMPROVEMENT: added filters, see FAQ section

Публикуете много видео? Используйте Open Graph

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

Больше информации об этом — в справке Яндекса.

В разметке Open Graph есть специальные метатеги, с помощью которых можно передать Яндексу подробную информацию о видеоролике:

• og:title — название видео, здесь можно указать до 1000 символов;
• og:url — URL страницы с видео;
• og:video — путь к видеоплееру или файлу;
• og:image — ссылка на картинку, которая должна использоваться как заставка видео;
• og:description — описание ролика (от 150 до 1000 символов);
• ya:ovs:upload_date — дата и время загрузки;
• ya:ovs:adult — в этом мета-теге нужно указать, является ли ваш ролик контентом «для взрослых». Если да, укажите значение «true», если нет — «false»;
• video:duration — длительность видео (указывается в секундах с округлением до целого числа);
• og:type — категория видео;
• og:video:type — доступные кодеки для данного формата видео.

Создаем превью сайта при помощи Open Graph разметки

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

Давайте начнем с метатегов. Для решения поставленной задачи нам понадобится следующая разметка:

<meta property="og:title" content="">
<meta property="og:site_name" content="">
<meta property="og:url" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">
<meta property="og:image:width" content=""/>
<meta property="og:image:height" content=""/>

Пока они не заполнены, это просто шаблон для вставки. Сейчас кратко поясню что к чему и заполню вместе с вами на примере своего лендинга для колеса фортуны.

Итак, og:title — заголовок страницы, он же тайтл. Можно скопировать из тега title. Во многих популярных CMS так и происходит.

В моем случае получается так:

<meta property="og:title" content="Скрипт колесо фортуны - виджет, повышающий конверсию сайта">

Далее заполняем og:site_name — название сайта.

<meta property="og:site_name" content="Smartlanding.biz">

Теперь og:url — ссылка на текущую страницу.

<meta property="og:url" content="https://smartlanding.biz/smartroulette-lp/">

Не забываем про краткое описание og:description. Обычно копируется из метатега description. Так и поступаю.

<meta property="og:description" content="SmartRoulette - скрипт (виджет) для сайта, который в игровой форме повышает конверсию и собирает в 2 раза больше заявок. В простонародье - «Колесо фортуны»">

Теперь переходим к самому важному — добавлению картинки. Заполним og:image, og:image:width, og:image:height

Как вы могли догадаться это ссылка на картинку, ее ширина и высота.

Тут есть небольшой нюанс с размером изображения. Дело в том, что разные сервисы просят разный размер. Например, т,о что для Твиттера может быть вполне нормально, то Facebook может обрезать. Не буду вас утруждать дилеммой по этому поводу, а порекомендую остановиться на странном разрешении 968×504.

<meta property="og:image" content="https://smartlanding.biz/smartroulette-lp/img/preview-koleso-fortuny.png">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">

В итоге все выглядит так:

<meta property="og:title" content="Скрипт колесо фортуны - виджет, повышающий конверсию сайта">
<meta property="og:site_name" content="Smartlanding.biz">
<meta property="og:url" content="https://smartlanding.biz/smartroulette-lp/">
<meta property="og:description" content="SmartRoulette - скрипт (виджет) для сайта, который в игровой форме повышает конверсию и собирает в 2 раза больше заявок. В простонародье - «Колесо фортуны»">
<meta property="og:image" content="https://smartlanding.biz/smartroulette-lp/img/preview-koleso-fortuny.png">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">

• Сбросить кэш во Вконтакте;
• Сбросить кэш в Фейсбук.

Сравнить два столбца и вывести уникальные значения (Формулы/Formulas)

Description

The Open Graph protocol enables any web page to become a rich object in a social graph. Most notably, this allows for these pages to be used with Facebook’s Like Button and Graph API.

The Open Graph plugin inserts the Open Graph metadata into page head section and provides filters for other plugins and themes to override this data, or to provide additional Open Graph data.

No configuration, pure power.

Plugin grabs data from content and if contains YouTube URL, then plugin try to get movie thumbnail and use it in og:image.

If the post contains YouTube or Vimeo links, this plugin saves as post meta video thumbnail link and add it to og:image as post thumbnail.

Распространенные ошибки при написании Тайтлов

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

Давайте разберем самые популярные ошибки, допускаемые при составлении, мета-тега Title.

Бренд в начале тайтла

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

Еще можно понять, если такой тайтл будет звучать как:

Aff1 – сайт о партнерских программах и интернет-маркетинге

Тут хотя бы бренд коротки. Но когда это звучит как:

ООО Группа компаний «Сибшахтостроймонтаж» — монтаж шахтового оборудования

Это уже совершенно другое дело, согласитесь?

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

Перечисление запросов в заголовке

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

Плохой пример:

Запчасти, мазда, Москва, купить, недорого

Хороший пример:

Купить запчасти на мазду в Москве недорого

Есть разница? Первый тайтл поисковая система просто забанит и не выведет страницу в выдачу вообще.

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

Использование Капса или верхнего регистра

Если вы хотите сделать акцент на каком-либо слове – подумайте, как выделить его оборотами речи, но ни в коем случае не с ПОМОЩЬЮ КАПСА. Поисковые системы относятся к этому негативно и предпочитают не выводить в выдаче такие тайтлы.

Единственное, где это допустимо – аббревиатуры и там, где крупный текст обоснован.

Пример плохого тайтла:

КУПИТЬ ГИПСОКАРТОН В МОСКВЕ ДЛЯ ПОТОЛКОВ

Пример хорошего применения капса:

Купить гипсокартон для ГКЛ потолков

Если вы не в курсе, то ГКЛ – это гипсокартонный лист. То есть аббревиатура и её можно писать заглавными буквами. В выдаче Яндекс так же не станет это изменять.

Использование прилагательных в Title

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

Плохой пример:

Купить самый лучший холодильник Indesit в Москве

Хороший пример:

Купить холодильник Indesit в Москве

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

Использование стоп-слов в Title

К стоп-словам относятся предлоги, местоимения и просто не несущие информации обороты. Пример: я, он, и, или, о, об, не, до и всё в таком стиле.

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

Исключением можно считать только фразеологические обороты и предложение, где без предлога будет нарушена целостность. «Быть или не быть» — яркий пример исключения.

Шаблонные тайтлы

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

Перечисление городов в одном заголовке

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

Плохой пример:

Купить машинное масло в Кемерово, Новокузнецке и Прокопьевске

Пример лучше:

Купить машинное масло в Кемеровской области

Второй пример не такой четкий как первый, однако даже он будет лучше.

Каннибализация запросов

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

Немного теории об Open Graph

Все данные для OG передаются в мета-тегах, что размещаются в контейнере <head>. Существует 4 таких тега, которые должны быть, иначе не взлетит (или взлетит, но не совсем):

• og:title — название размечаемого объекта (страницы). Аналог и родственник title.
• og:type — тип страницы (объекта) или другими словами обозначение того, что находится на данной странице — страница сайта, видео или аудио файлы. В зависимости от указанного типа может понадобиться ещё метатегов.
• og:image — изображение-иллюстрация для страницы (объекта). Здесь требуется указать прямую ссылку на изображение.
• og:url — каноничный url адрес данной страницы.

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

Introduction

The Open Graph protocol enables any web page to become a
rich object in a social graph. For instance, this is used on Facebook to allow
any web page to have the same functionality as any other object on Facebook.

While many different technologies and schemas exist and could be combined
together, there isn’t a single technology which provides enough information to
richly represent any web page within the social graph. The Open Graph protocol
builds on these existing technologies and gives developers one thing to
implement. Developer simplicity is a key goal of the Open Graph protocol which
has informed many of the technical design decisions.

Согласование тегов

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

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

Что такое разметка Open Graph и как она поможет вашему сайту получать больше трафика

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

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

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

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

Например, так выглядит репост статьи с разметкой Open Graph в Фейсбуке:

А так выглядит репост этого же материала во ВКонтакте:

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

Репост в Фейсбук статьи без внедренной разметки:

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

В примере ниже — подтянулась картинка из шапки сайта, а в кратком описании — фрагмент текста для формы подписки на рассылку:

Что можно сделать с помощью Open Graph

С помощью разметки вы можете настроить корректное и привлекательное отображение публикаций в соцсетях при репосте материалов с вашего сайта:

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

Также Open Graph позволяет создать блок рекомендуемого контента в Google AdSense:

Где используется Open Graph

Микроразметка была создана Facebook и изначально использовалась только в этой соцсети. Сегодня поддерживается популярными соцсетями и мессенджерами: ВКонтакте, Твиттер, LinkedIn, Телеграм, Viber, Slack и др.

Основные

Определяет кодировку веб-страницы:

Определяет заголовок веб-страницы, который также отображается в результатах поиска Google, Яндекс, Bing и др. Длину заголовка стоит уместить в 70 символов, так как остальное будет отсечено при отображении:

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

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

Определяет базовый URL-адрес для ссылок на внешние файлы, такие, как CSS, Javascript и изображения. В результате браузер найдёт файл независимо от размещения текущей веб-страницы. Это не самый полезный тег, но если его указать, то объём исходного кода страницы уменьшится, а перенос сайта на другой домен принесёт меньше головной боли разработчику:

Определяет «Имя приложения», которое появляется под иконкой страницы на мобильных устройствах, когда пользователь использует функцию «Добавить на главный экран» в веб-браузере:

Дополнительные метатеги

• og:audio — URL звукового файла, который относится к описываемому объекту.
• og:description — краткое описание объекта.
• og:determiner — слово (артикль), которое должно быть перед названием объекта в предложении. Может быть указано как: a, an, the, “”, auto. Если в значении будет указано auto, сервис, распознающий разметку, будет выбирать между значениями a и an. Если значение не указано, перед названием объекта артикль будет отсутствовать.
• og:locale — язык описания объекта в формате язык_страна. По умолчанию используется значение en_US.
• og:locale:alternate — массив дополнительных языков, на которых доступно описание объекта.
• og:site_name — название сайта, на котором размещена информация об объекте.
• og:video — URL видео файла, который относится к описываемому объекту.

<meta property="og:audio" content="http://example.com/bond/theme.mp3" />
<meta property="og:description" content="Sean Connery found fame and fortune as the suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="http://example.com/bond/trailer.swf" />

Что такое Open Graph?

1. Превью — изображение которое выводится в качестве превью к записи.
2. Домен — URL адресс, ссылка, того чем вы делитесь.
3. Навание — Заголовок той информации, которую вы собираетесь разместить.
4. Описание — краткое содержание того, о чем информация.

Если же не добавлять метатеги от Open Graph, то при попытке поделится ссылкой вы увидите следующую картину:

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

Правила записи музыки на USB-носители

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

1. Лучше всего пользоваться USB-носителем с небольшим объёмом до 8 ГБ.
2. При записи в формате FAT32 чаще всего проблем с прочтением не возникает.
3. Все файлы желательно размещать в корневом каталоге, или же в папки, расположенные в самом корневом каталоге.
4. Выбирайте формат для файлов mp3 или wav.
5. Перед записью USB-накопитель необходимо проверить на отсутствие вирусов.
6. Не стоит производить зарядку других устройств через гнездо для USB.

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

Микроразметка хлебных крошек

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

1. Основному контейнеру мы добавляем атрибут itemscope, объявляя его объектом микроразметки, и указываем его тип через ссылку на schema.org атрибута itemtype.
2. Отдельный элемент «крошка» мы размечаем через атрибут itemprop=»itemListElement», указывая, что это элемент списка.
3. Добавляем itemscope, так как это тоже объект, и указываем itemtype.

4. Ссылку на пункт крошек мы размечаем через атрибут itemprop=”url”, название пункта — itemprop=»name», если есть картинка — itemprop=»image», а специальное свойство position отвечает за порядковый номер в списке, нумерация начинается с 1.

Разметка хлебных крошек скриптом JSON-LD будет выглядеть следующим образом:

В данном примере @id — это уникальный url для данной страницы, name — название пункта меню, image — картинка, а position — позиция пункта в списке, нумерация также начинается с единицы.

МЕТАтеги Open Graph

Open Graph имеет свои метатеги и как остальные они добавляются в шапку сайта, а именно между <head>…</head>. Для начала, давайте я покажу как выглядят обычно метатеги Open Graph на сайте:

<meta property="og:type" content="article" />
<meta property="og:image" content="http://gnatkovsky.com.ua/image.png" />
<meta property="og:url" content="http://gnatkovsky.com.ua" />
<meta property="og:title" content="Заголовок страницы" />
<meta property="og:description" content="Краткое описание того что на странице" />

1. og:type — указываем тип объекта, от него зависит то, какие дальше будут заданы свойства.
2. og:image — указываем превью картинку нашей страницы.
3. og:url — указываем ссылку на текущую страницу (ту где располагаются эти метатеги).
4. og:title — указываем заголовок страницы.
5. og:description — указываем краткое содержание страницы, статьи.

Еще часто добавляют тег og:site_name — в нем указывается название сайта.

Первые 4 метатегов являются основными и обязательными. Если вы решили добавлять протокол Open Graph, то они должны быть указанны в любом случаи. Последние og:description и og:site_name не обязателен, но наличие приветствуется, вы сами видели начале статьи примеры. Есть и другие теги которые можно добавлять к страницам сайта, более подробно о них можно узнать на сайте Ruogp.me.

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

<meta property="fb:app_id" content="10000000001111"/>
<meta property="fb:admins" content="10000000001111"/>

1. fb:app_id — указывается айди приложения от Facebook.
2. fb:admins — указывается айди администратора или администраторов через запятую.

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

Аналитика социальных сетей

Если собираемся использовать аналитику Facebook — Facebook Analytics, мы должны предоставить уникальный идентификационный номер, связанный с учетной записью. Тег будет выглядеть примерно так:

У Twitter есть нечто похожее — Twitter Card Analytics. Чтобы получить максимальную отдачу от этого инструмента, Twitter рекомендует использовать следующий тег , содержащий имя пользователя Twitter, которое хотим связать с общей веб-страницей:

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

Теги

При передаче ссылки — и Facebook, и Twitter берут указанную веб-страницу, и читают её теги , чтобы отобразить соответствующую информацию.

Facebook использует протокол , систему классификации для веб-страниц, выходящую за рамки тех тегов , которые уже определены в HTML5. Полный список доступных тегов можно найти на веб-сайте Open Graph. Их довольно много, но на самом деле требуется несколько:

У Twitter есть свои собственные теги , которые похожи на протокол , но используют префикс вместо . Как и в случае с Facebook, требуется всего несколько. Тип формата отображения, также указывается:

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

Открытые и закрытые порты

Информация об авторе статьи

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

<meta name="article:author" content="https://www.facebook.com/ivanpupkin">

Если объект страницы — продукт коллективного труда, то авторов можно указать через запятую:

<meta name="article:author" content="https://www.facebook.com/ivanpupkin, https://www.facebook.com/sergeyvolkoff">

Как вы уже успели заметить, указание автора происходит путём указания ссылки на его профиль в Facebook. Но как быть, если авторство застолбить охота, но профиля в FB нет? В таком случае используем следующий тег:

<meta name="author" content="ivanpupkin" />

Да, он уже идёт без пометки og и не очень каноничен, но это вынужденная мера — не заводить же аккаунт в Facebook, в самом деле!