Создание микроразметки статьи

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

как подключить протокол Open Graph к статической странице сайта

Примерный шаблон подключения Open Graph для статической страницы:

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

далее…

Ниже дан код, установив который — страницы архивов станут отдавать картинку логотипа сайта (ну или ту, до которой укажете путь в строке кода)!

Отныне, например, Ф.Б, если кто-то поделится страницей архива публикаций, будет брать именно её…

Код добавлять в файл , ну или тот, который в вашем шаблоне отвечает за формирование шапки сайта (разметка шапки сайта — теги h1 — h2 условия вывода):

Код возможно организовать в связке с произвольными типами записей. Почитайте ЭТУ статью…

На этом вроде бы всё, что хотел, рассказал…

…Но если у вас возникли вопросы, либо не получается добавить в файлы своего сайта код, пишите (или звоните в Skype)… помогу!

Проверить валидность (правильность) подключения протокола Open Graph, а также очистить КЭШ сайта в Ф.Б возможно здесь: дебаггер Фейсбук Open Graph.

почитать подробнее из уст Яндекс об Open Graph можно здесь…

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

Создаем превью сайта при помощи 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">

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

Используйте качественные изображения

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

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

×

Замечание для внимательных читателей

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

Продолжаем!

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

Как использовать Open Graph разметку?

Причем 5 из них можно назвать обязательными, остальные (полный список можно найти на) – второстепенными, но позволяющими повысить информативность превью ссылки (например, добавить контакты владельца контента, адрес и пр.).

Итак, пример куска кода с обязательными тегами (свойствами) OG выглядит так:

meta property=»og:title» content=»Здесь вы прописываете название, которое хотите видеть в превью ссылки в социальной сети«

meta property=»og:image» content=»Здесь указывается ссылка на картинку, которая будет отображаться в превью«

meta property=»og:type» content=»article»/> — этот параметр определяет тип добавляемого материала (в данном случае — статья).

meta property=»og:url» content= «Ссылка на саму веб-страницу, которая и будет добавляться в соц. сеть«

ВАЖНО. Для популярных CMS существуют даже свои плагины, позволяющие внедрить разметку Open Graph для Facebook, VK и прочих соцсетей самостоятельно, без привлечения специалистов и долгого «рытья» в коде

Это значительно облегчает интеграции OG даже для неопытных пользователей.

Аналоги Open Graph

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

Как устроен мир семантической разметки

• Микроформаты (Microformats.org). Этот проект можно рассматривать как набор инструментов, заточенных под определённые нужды (например, для разметки товаров используется микроформат hProduct, для кулинарных рецептов – свой hRecipe). Главная особенность Microformats – более сложное внедрение, поэтому этот словарь применяется сегодня все реже.
• Schema.org – словарь, активно поддерживаемый поисковиками (создавался с целью обеспечения возможности формирования специальных сниппетов в поисковой выдаче). Главная особенность этого инструмента – гибкость, которая достигается за счет обилия свойств, которые можно описать в коде микроразметки. Всего словарь насчитывает более миллиона характеристик и свойств.
• Dublin Core. Этот словарь разрабатывался с прицелом на различного рода электронные библиотеки и базы данных, и активно используется специалистами музейной сферы, библиотечного дела и пр. Он, в отличие от других, даже стандартизирован в РФ ГОСТом Р 7.0.10-2010.

И это лишь малая часть словарей, используемых сегодня для облегчения жизни владельцам сайтов, оптимизаторам и конечным пользователям. Внедрение Open graph разметки гарантированно улучшит превью ссылок Вконтакте, Skype, Facebook, Google+, Twitter, Pinterest, LinkedIn и др.

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

Возможно ли снизить переплату еще на этапе оформлении кредита?

Контролируйте внешний вид репостов с помощью Open Graph

Репосты в соцсетях (ваши или пользовательские) могут дать дополнительный трафик на сайт

Но помните: в соцсетях важна визуальная привлекательность публикации — только так можно зацепить внимание пользователя при прокрутке ленты

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

Для получения же большего охвата используйте возможности таргетированной рекламы. В системе PromoPult вы можете запустить рекламу в myTarget (Одноклассники, проекты Mail.ru) и ВКонтакте из единого интерфейса. Комиссия при этом 0%. То есть вы платите столько же, сколько платили бы при запуске рекламы в соцсетях напрямую, но получаете дополнительные удобные инструменты.

Массивы

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

<meta property="og:image" content="http://example.com/rock.jpg" />
<meta property="og:image" content="http://example.com/rock2.jpg" />

Укажите структурированные метатеги после основного метатега.

<meta property="og:image" content="http://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="http://example.com/rock2.jpg" />
<meta property="og:image" content="http://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />

где разметка означает, что на странице размещены 3 изображения: первое имеет размер 300×300, для второго изображения размер не указан, третье — 1000 пикселей в высоту.

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.

Properties

Property	Description	Allowable Values	Example	Dependencies	Notes
og:title		any text	The Rock	required	after a page receives 50 likes the title becomes unchangeable
og:type		see below		required	after a page receives 10,000 likes the type becomes unchangeable
og:url	«proper»/canonical format for URL of current page	fully qualified URL		required
og:image	image to associate with the content of the page	fully qualified URL		required
og:site_name	human readable name of the website this page is contained in	any text	IMDb	required
fb:admins	comma separated list of users who should have administrative access to any Facebook pages created about this web page	comma separated list of Facebook user ids		required if no defined
fb:app_id	Facebook ID for an application that owns this page	Facebook application ID	118381521562237	required if no defined
og:description	description of the page	any text

Locations

adding latitude and longitude coordinates

Property	Description	Allowable Values	Example	Dependencies	Notes
og:latitude			37.416343
og:longitude			-122.153013

adding a «human» readable address

Property	Description	Allowable Values	Example	Dependencies	Notes
og:street-address			1601 S California Ave	none
og:locality			Palo Alto	none
og:region			CA	none
og:postal-code			94304	none
og:country-name			USA	none

Contact Information

Property	Description	Allowable Values	Example	Dependencies	Notes
og:email			me@example.com	none
og:phone_number			+1-650-123-4567	none
og:fax_number			+1-415-123-4567	none

Videos

Property	Description	Allowable Values	Example	Dependencies	Notes
og:video	fully qualified URL to a SWF video		none	Facebook supports embedding video in SWF format only. You must include a valid og:image for your video to be displayed in the news feed.
og:video:width	pixel width of video described in og:video	integer ≤ 398	385	must have og:video
og:video:height	pixel height of video described in og:video	integer ≤ 460	400	must have og:video
og:video:type	mime-type of video file described in og:video		application/x-shockwave-flash	must have og:video

Audio

Property	Description	Allowable Values	Example	Dependencies	Notes
og:audio	fully qualified URL to an audio file		none	not sure what all formats are supported beyond mp3
og:audio:title	title of audio described in og:audio	any text	«Amazing Soft Rock Ballad»	must have og:audio
og:audio:artist	pixel height of audio described in og:audio	any text	«Amazing Band»	must have og:audio
og:audio:album	mime-type of audio described in og:audio	any text	«Amazing Album»	must have og:audio
og:audio:type	mime-type of audio file described in og:audio	any text	«application/mp3»	must have og:audio

Others

Property	Description	Allowable Values	Example	Dependencies	Notes
og:upc	UPC code of the item			none	may be an expectation of og:type being one under «Products and Entertainment»
og:isbn	ISBN code of book if describing a book		«978-0470878040»	none	may be an expectation of og:type being one under «Products and Entertainment»

Разные бесполезности

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

Примеры таких метатегов:

• — определяет имя автора страницы. Указывать бессмысленно, так как не используется.
• — указывает поисковым роботам время, через которое требуется зайти на страницу снова. Поисковые системы вроде «Яндекс» и Google не учитывают этот параметр.
• — обозначает возрастную категорию контента. Чтобы пометить страницу, на которой размещены изображения для взрослых, требуется пройти запутанную процедуру. Проще отметить «плохие» изображения, и сообщить об этом поисковым системам.
• — указывает дату создания и срок актуальности страницы. Если страницы уже не нужны, просто удалите. Дату создания же лучше указать в XML sitemap.
• — описывает авторские права. Посмотрите на нижний колонтитул сайта. Наверняка там размещена фраза вроде Copyright 20xx. Не стоит дублировать описание ещё в теги.
• — содержит аннотацию к содержанию страницы и чаще используется на образовательных ресурсах.
• — описывает права доступа к странице. Как правило, содержит значение . Изначально задумывалось, что если страница открыта (не защищена паролем), то предназначена для всего мира. Смиритесь и уберите со страницы.
• — указывает, с помощью какой программы создана страница. Как и , это бесполезно.
• — указывает, когда и как часто страница кэшируется в браузере. Лучше это определить в .
• — указывает тип ресурса страницы, например, document. Не тратьте на это время, так как это работа DTD.

Эта шпаргалка поможет понять, что происходит в мире метатегов. Если считаете, что нужно что-то добавить или удалить — пишите в комментарии.

Как подключить Open Graph к WordPress

Для WordPress традиционно существует два способа подключения: с помощью плагина и ручное подключение с помощью фильтров и экшенов.

Подключение Open Graph к WordPress с помощью плагина

Для подключения Open Graph к WordPress существуют специальные плагины:

• WP Facebook Open Graph protocol;
• Open Graph.

Но чаще всего подключение специальных плагинов не требуется, т.к поддержка Open Graph реализована во многих комплексных SEO-плагинах.

Самые популярные:

• Yoast SEO — рекомендую;
• All in One SEO Pack.

Иногда поддержка Open Graph имеется прямо в теме WordPress, особенно это касается премиум-тем. Поэтому, перед стартом работ по SMO, нужно открыть HTML-код сайта и проверить его на наличие метатегов Open Graph. Их можно определить по характерному свойству (property) — «OG:».

Подключение Open Graph к WordPress без плагинов

Код размещаем в файле функций активной темы (functions.php) или в функциональном плагине, в который вы выносите весь функционал, чтобы не потерять его при смене темы.

В результате на страницах всех записей будут выводиться основные метаданные Open Graph:

• og:title;
• og:type;
• og:url;
• og:site_name;
• og:image.

А также fb:admins, в котором нужно указать ваш Facebook ID. Есть несколько способов определения своего ID, самый простой — навести курсор мыши на вашу аватарку Facebook, в системной строке браузера увидим fbid. Это и есть Facebook ID.

Отдельно стоит остановиться на og:image. В качестве изображения будет установлена миниатюра текущей записи. В случае ее отсутствия будет выводиться дефолтное изображение, ссылку на которое задается в переменной $default_image.

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

• 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

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

Протокол Open Graph хоть и является разработкой Facebook, однако, поддерживается всеми популярными соцсетями. На данный момент Open Graph поддерживают: Твиттер, ВКонтакте, Google+, LinkedIn, Pinterest и многие другие.

Основные метаданные Open Graph

• og:title — название объекта, заголовок;
• og:type — тип объекта, в зависимости от которого задаются другие свойства;
• og:image — URL-адрес изображения;
• og:url — канонический URL-адрес объекта.

Дополнительные метаданные Open Graph

• og:audio;
• og:description;
• og:determiner;
• og:locale;
• og:locale:alternate;
• og:site_name;
• og:video.

Структурированные свойства

Ряд свойств имеют дополнительные метаданные, которые определяются как и обычные метаданные.

С полным описанием протокола Open Graph можно ознакомиться на сайте Ruogp.me.

Микроразметка товара

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

Элемент с атрибутом itemprop=”name” — название товара, itemprop=»image» — изображение, если картинок много, то можно добавить этот атрибут к каждой из них.

Соответственно, атрибут description — для описания товара, brand — бренд (производитель), sku или mpn — идентификаторы товара, его товарный код.

Внутри товара также есть 2 объекта со своими параметрами:

1. aggregateRating, который отвечает за разметку отзывов;
2. Offer, который включает в себя свойства торгового предложения:

• цена;
• валюта;
• наличие товара на данный момент (чаще всего для этого используется два варианта: в наличии — link itemprop=»availabilit» href=»http://schema.org/InStock» и нет в наличии — link itemprop=»availability» href=»http://schema.org/OutOfStock»);
• состояние товара.

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

Как внедрять Open Graph

Вручную

Чтобы добавить разметку вручную в исходном коде страниц сайта, укажите следующую строку в самом начале html-страницы:

Это префикс, который указывает на то, что в коде страницы будет использоваться протокол Open Graph. После этого разместите нужные метатеги между тегами <head> и </head>.

С помощью плагинов

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

По ссылкам ниже можно найти плагины для вашей CMS:

• WordPress.
• Joomla.
• Битрикс.
• Opencart.
• Drupal.
• .

А если у вас, например, сайт на Tilda, вам не нужно искать плагин или внедрять разметку вручную. В конструкторе по умолчанию встроена оптимизация под соцсети.

Пример внедрения Open Graph на WordPress

Используем из самых популярных плагинов для Вордпресса — All in One SEO Pack.

Установите плагин (если он у вас еще не установлен), перейдите в раздел «Управление модулями». Найдите модуль «Социальные мета» и активируйте его.

После активации перейдите в модуль «Социальные мета» в меню плагина:

Укажите настройки:

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

Это общие настройки, которые будут применяться ко всем страницам. Если вы хотите настроить разметку отдельно для какой-нибудь статьи, перейдите на вкладку «Социальные настройки».

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

Вот вид размеченной ссылки в ленте Facebook:

Примерно по такому же принципу работают другие плагины.

Dublin Core metadata

Очень сильно сомневаюсь что от нее вообще есть толк, но на всякий случай (для информации) вынес все в отдельный PDF файл.

Сохраняем шаблон, переходим на главную и смотрим код (CTRL+U)

Сопутствующие ссылки для ознакомления что к чему:

• ogp.me/
• https://github.com/Konfuze/HEAD

Также посмотрите на модификаторы, на них можно много логики создать, например сделать вывод такого типа.

<meta name="description" content="]`:default=`]`]]">

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

Сервисы для работы и плагины Open Graph

Для работы с Open Graph есть много сервисов — для автоматического создания кода для конкретной страницы, плагины в CMS и сервисы для проверки правильности заполнения.

Составить код разметки Open Graph автоматически

Автоматически сделать код можно через Генератор мета-тегов Open Graph. Заполните поля ссылками и нужным текстом и скопируйте готовый код для вставки на сайт.

Пример работы сервиса

Посмотреть, как конкуренты составили микроразметку, можно с помощью парсера мета-тегов Open Graph. Он проанализирует страницу на наличие Open Graph тегов:

Пример работы парсера

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

• «Open Graph» или «Yoast SEO» для WordPress;
• «Phoca Open Graph» для Joomla;
• «Open Graph Meta» для Opencart.

Сервис проверки Open Graph

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

Фрагмент работы инструмента

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

Фрагмент анализа инструментом

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