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

Теперь рассмотрим это на реальном примере. Если вы хоть раз делились какой-то публикацией в социальных сетях то замечали что обычно это выглядит так:

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

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

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

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

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

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

МЕТАтеги Open Graph

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

Для начала, давайте я покажу как выглядят обычно метатеги Open Graph на сайте:

  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:

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

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

Подключение Open Graph

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

Чтобы подключить Open Graph к WordPress, можно пойти двумя путями. Первый - установить плагин, второй - добавить самописную функцию. С плагином все просто, если вы любите их устанавливать то можете выбрать любой и добавить к своему сайту. Среди популярных плагинов имеющих в своем функционале и поддержка Open Graph в WordPres, я бы выделил:

  • All in One SEO Pack.
  • Yoast SEO
  • Open Graph

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

Перед тем как подключать метатеги, нужно включить поддержку Open Graph в WordPress. Сделать это можно двумя способами. Для начала нужно открыть файл вашей текущей темы header.php и во второй, скорее всего, его строке посмотреть на тег

Если вы видите примерно такое:

То можно добавить prefix="og: http://ogp.me/ns#" и все.Получится:

Если у вас так:

>

То можно или добавить то же самое или благодаря функции language_attributes , вывести в ней. Для этого открываете файл пользовательских функций function.php и добавляете в самый конец перед закрывающим тегом PHP ?> , а если его нет, то просто в самый конец - фильтр:

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

function opg_html($output){ return $output ." prefix="og: http://ogp.me/ns#""; } add_filter("language_attributes", "opg_html");

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

Function facebook_open_graph(){ global $post; global $wp; //для ссылок $current_url = home_url($wp->request); //для description if($excerpt = $post->post_excerpt){ $trim_words = strip_tags($post->post_excerpt); } elseif($wptw = wp_trim_words(get_the_content(), 25)){ $trim_words = preg_replace("/[""]/", "", $wptw); }else{ $trim_words = get_bloginfo("description"); } //для изображений $first_img = ""; $otimg = preg_match_all("//i", $post->post_content, $matches); $first_img = $matches ; if(empty($first_img)){ $first_img = get_bloginfo("template_directory"). "/images/defimages.jpg"; } //общие meta-теги echo ""; echo ""; if(has_post_thumbnail($post->ID)){ $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), "medium"); echo ""; }else{ echo ""; } echo ""; //meta-теги для статей, страниц if (is_singular()){ echo ""; echo ""; } else{ //meta-теги для главной, рубрики и остальных echo ""; echo ""; } } add_action("wp_head", "facebook_open_graph");

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


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

На этом все, спасибо за внимание. 🙂

  • Сейчас уже сложно представить разработку сайта без его оптимизации под социальные сети. К сожалению, многие под этой процедурой подразумевают лишь установку стандартных виджетов соцсетей. А этого часто недостаточно.

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

Оптимизация сайта под социальные сети

Появление термина SMO принято связывать с публикацией Рохита Бхаргавы (Rohit Bhargava), сформулировавшего 5 основных правил SMO:

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

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

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

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

Сначала как должен.

В Фейсбуке.

ВКонтакте.

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

А вот как не должен расшариваться контент.

В Фейсбуке.

ВКонтакте.

Видим, что и Фейсбук, и ВКонтакте получили только адрес сайта. Еще я часто вижу при расшаривании, как в качестве изображения прикрепляются разные счетчики Лайвинтернета, Рамблера, какие-то логотипы и прочие бессмысленные картинки. Так тоже быть не должно. Изображение должно соответствовать публикации или хотя бы тематике сайта, если публикация не несёт в себе никаких изображений. Никакие счетчики и элементы интерфейса прикрепляться не должны.

Такой шаринг никуда не годится.

Такие посты никто не будет ни лайкать, ни репостить. Скорее всего и посетитель, решивший расшарить публикацию, увидев эту срамоту, изменит свои планы.

Задача веб-разработчика сделать так, чтобы социальные сети видели метаданные публикаций и понимали, что конкретно репостит посетитель. Если это статья - она должна быть соответствующе оформлена, если это медиаконтент - он должен оставаться медиаконтентом, не теряя при репосте никакой информации о себе. Иначе не может быть никакой речи о SMO.

Для решения этой задачи в 2010 году компанией Facebook был разработан протокол Open Graph .

Протокол 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 .

Подключение Open Graph

Open Graph подключается к HTML-страницам так же как и любые другие метатеги.

Для статичных страниц так, например:

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

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

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

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

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

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

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

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

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

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

// Поддержка Open Graph в WordPress function add_opengraph_doctype($output) { return $output . " xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml""; } add_filter("language_attributes", "add_opengraph_doctype"); function insert_fb_in_head() { global $post; if (!is_singular()) return; echo ""; echo ""; echo ""; echo ""; echo ""; if(!has_post_thumbnail($post->ID)) { $default_image = "http://example.com/image.jpg"; echo ""; } else{ $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), "medium"); echo ""; } echo " "; } add_action("wp_head", "insert_fb_in_head", 5);

В результате на страницах всех записей будут выводиться основные метаданные 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 .

Разметку Open Graph используют Facebook, Вконтакте, Google+, Twitter, LinkedIn, Pinterest и другие сервисы. В Яндексе Open Graph используется для передачи данных в сервис Яндекс.Видео .

Сервис Яндекс.Видео распознает не только основные, но и многие другие метатеги, например, разные типы видео (сериалы, клипы, фильмы и т. д.), ограничения по возрасту или стране просмотра. В зависимости от выбранного типа можно также указывать дополнительные свойства объекта: название фильма, номер эпизода сериала, дату выпуска телешоу и другие. Так как для Яндекс.Видео нужны метатеги, которых нет в документации от Facebook, в сервисе используется свое расширение.

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

  1. Основные метатеги
  2. Дополнительные метатеги
  3. Структурированные метатеги
  4. Массивы
  5. Объекты
  6. Пример использования

Основные метатеги

В стандарте Open Graph одна страница описывает только один объект - человека, компанию или продукт. Для этого объекта и указываются все данные. Чтобы передать информацию сервисам, необходимо в HTML-код (в элемент head ) добавить следующие обязательные метатеги:

    og:title - название объекта.

    og:type - тип объекта, например, video.movie (фильм). Если у вас несколько объектов на странице, выберите один из них (главный). В зависимости от типа можно указать дополнительные свойства.

    og:image - URL изображения, описывающего объект.

    og:url - канонический URL объекта, который будет использован в качестве постоянного идентификатора.

\n\n\n\n

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

    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 видео файла, который относится к описываемому объекту.

\n\n\n\n\n\n\n

Структурированные метатеги

Некоторые метатеги могут иметь дополнительные (необязательные) метаданные. Такие метатеги содержат дополнительный знак : (двоеточие).

Например, og:image может содержать следующие метаданные:

    og:image:url - URL изображения, описывающего объект (соответствует og:image ).

    og:image:secure_url - дополнительный URL, если страница открывается по протоколу HTTPS.

    og:image:width - ширина изображения в пикселах.

    og:image:height - высота изображения в пикселах.

\n\n\n\n

og:video может содержать такие же метаданные, как и og:image . Например:

\n\n\n\n

og:audio содержит только некоторые метаданные из вышеперечисленных:

\n\n

Массивы

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

\n

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

\n\n\n\n\n

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

Объекты

Чтобы передать данные об объекте, необходимо указать его тип с помощью метатега og:type :

В этом примере указан один из глобальных (общепризнанных) типов. Остальные типы указываются согласно синтаксису CURIE :

\n\n

Глобальные типы объектов группируются в вертикали. Каждая вертикаль имеет свое пространство имен. Значение метатега og:type для пространства имен всегда состоит из названия типа объекта и уточнения (< тип объекта:уточнение > ). Это позволяет избежать путаницы с типами, которые задаются пользователем и содержат знак : (двоеточие).

Музыка

Значения метатега og:type :

Music.song

    music:duration (integer >=1) - длительность песни в секундах.

    music:album (music.album, массив) - название альбома.

    music:album:disc (integer >=1) - номер диска.

    music:album:track (integer >=1) - номер трека.

    music:musician (profile, массив) - имя исполнителя.

\n\n\n\n\n\n...\n music.album

    music:song - music.song - название песни.

    music:song:disc (integer >=1) - номер диска (соответствует значению music:album:disc ).

    music:song:track (integer >=1) - номер трека (соответствует значению music:album:track ).

    music:musician (profile) - исполнитель песни.

    music:release_date (datetime) - дата выпуска альбома.

music.playlist

    music:song - соответствует значению music.song , которое указано в music.album .

    music:song:disc

    music:song:track

music.radio_station

Видео

Значения свойства og:type :

Video.movie

    video:actor (profile, массив) - актеры.

    video:actor:role (string) - роли, которые исполняют актеры.

    video:director (profile, массив) - режиссер.

    video:writer (profile, массив) - сценарист.

    video:duration (integer >=1) - длительность фильма в секундах.

    video:release_date (datetime) - дата выхода фильма в прокат.

    video:tag (string, массив) - теги (слова, фразы), связанные с фильмом.

\n\n\n\n\n\n...\n video.episode

    video:actor - соответствует значению video.movie .

    video:actor:role

    video:director

    video:writer

    video:duration

    video:release_date

    video:tag

    video:series (video.tv_show) - серия.

video.tv_show

ТВ-шоу. Разметка соответствует значению video.movie .

Video.other

Видео, которое не относится к перечисленным категориям. Разметка соответствует значению video.movie .

Другие

Значения метатега og:type :

    article:published_time (datetime) - дата публикации статьи.

    article:modified_time (datetime) - дата последнего изменения статьи.

    article:expiration_time (datetime) - дата, после которой статья считается устаревшей.

    article:author (profile, массив) - автор статьи.

    article:section (string)- тема (раздел), к которой относится статья (например, Технологии).

    article:tag (string, массив) - теги (слова, фразы), связанные с этой статьей.

book

    book:author (profile, массив) - автор книги.

    book:release_date (datetime) - дата публикации книги.

    book:tag (string, массив) - теги (слова, фразы), связанные с этой книгой.

profile

    profile:first_name (string) - имя.

    profile:last_name (string) - фамилия.

    profile:username (string) - ник (имя пользователя, под которым он зарегистрирован).

    profile:gender (enum) - пол (male , female ).

website

Не имеет значений, кроме основных. Любая неразмеченная страница определяется как объект website .

Типы объектов

Тип Описание Примеры значений
Boolean

Может принимать значения true или false , 1 или 0

true, false, 1, 0
DateTime

ISO 8601

2015-07-15, 15:05
Enum
Float
Integer
String

Unicode
URL

http://www.example.com
Временная величина. Может содержать дату (год, месяц, день) и время (часы, минуты) согласно стандарту ISO 8601

2015-07-15, 15:05

Enum

Состоит из ограниченного множества постоянных строковых значений

Float

64-битное число с плавающей точкой

1.234, -1.234, 1.2e3, -1.2e3, 7E-10

Integer

32-битное целое число. Может содержать все символы, которые соответствуют следующим форматам: 1234, -123

String

Последовательность символов стандарта Unicode

URL

Все действительные URL, которые доступны по HTTP- или HTTPS-протоколу

http://www.example.com

Пример использования

Чтобы добавить информацию для формирования сниппетов, в HTML-коде страниц внутри элемента head укажите заголовок страницы и название сайта в свойствах og:title и og:site_name .

\n \n \n \n

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

Изображением может оказаться иконка или любая другая нерелевантная картинка. Иногда парсер вовсе не подгружает изображение. Знакомая картина, не правда ли?

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

Давайте разберемся, что это за зверь такой – Open Graph, какую пользу он приносит интернет-магазину (да, в общем, и любому другому ресурсу), и как правильно добавить OG-разметку к себе на сайт.

Откуда появился Open Graph?

Open Graph – это словарь микроданных, который был разработан специалистами Facebook специально для решения проблемы с «кривым» отображением ссылок в ленте соцсети.

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

КСТАТИ. Несмотря на то, что Open Graph разрабатывался Facebook «под себя», его используют и другие социальные сети (ВКонтакте, Одноклассники, Twitter). Так что, внедрив такую разметку на свой сайт, вы одномоментно решите проблему с некорректным показом ссылок в большинстве популярных соцсетей и сервисов.

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

Все довольно просто: чтобы получить красивое превью ссылки ВКонтакте, Facebook, Одноклассниках и в других социальных сетях, в код страницы (в теге head) необходимо внедрить мета-теги Open Graph.

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

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

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

meta property="og:description" content="Здесь укажите описание материала (например, краткую характеристику товара или категории интернет-магазина). Размер – до 295 симв. "

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

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

ВАЖНО. Для популярных 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 и др.

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



Это очень важная настройка. Каждый владелец блога WordPress, который хочет профессионально продвигаться на Facebook, должен настроить теги Open Graph. От этого зависит конверсия ссылок и престиж вашего блога.

Первоначально движок WordPress этих тегов не содержит, поэтому их надо настроить самостоятельно. Без них на Facebook будет отправляться очень некрасивая и порой непонятная информация. Приведу 1 пример. На скриншоте видны публикации после нажатия «Мне нравится» и комментирования на блоге Михаила Шакина . Картинки публикуются случайным образом, потому что не настроены теги. А представьте, если у вас на сайте есть рекламный блок с картинками!?

Эту картину можно наблюдать и на некоторых известных новостных ресурсах.

Что происходит, когда есть теги Open Graph? Приведу пример моего сайта для продажи видеокурса . Я настроил картинку, заголовок и описание для кнопки «Мне нравится». Результат на скриншоте. Согласитесь, что такой пост привлекает внимание намного больше.

1-ый вариант. Самый простой. Плагин All in One SEO Pack

Этим плагином пользуюсь я на своем блоге. Его можно . Он позволяет сразу оптимизировать блог для поисковиков и для Facebook. Я остановился на этом плагине, потому что мне надо оптимизировать не только статьи блога, но и отдельные страницы видеокурса «Фан-страница: запуск». Если оптимизировать и статьи, и страницы блога вручную, это занимает время и требует навыков работы с PHP. Но благодаря тому, что плагин All in One SEO Pack позволяет настроить картинку, заголовок и описание для каждой статьи и для каждой страницы отдельно, я могу полностью контролировать информацию и для поисковиков, и для Facebook.

Настройка этого плагина стандарта. Скачиваете его на компьютер, устанавливаете себе на блог (Плагины -> Добавить новый -> Загрузить), нажимаете «Активировать». Затем заходите в «Параметры» -> «All in One SEO Pack» и заполняете поля «Заголовок сайта», «Краткое описание», «Адрес WordPress (URL)», «Адрес сайта (URL)» — это стандартные настройки плагина. Затем обязательно внизу нажимаете кнопку «Сохранить». Самое важное для нас — в настройках само́й статьи или страницы блога. Выглядят эти настройки вот так:


Если вы добавили новую страницу на блог, то для неё появится поле загрузки картинки чуть выше, чем поле «Title».

На сколько хорошо работает этот плагин, вы можете проверить, нажав на кнопку «Мне нравится» под этой статьёй. После этого на вашей стене Facebook появится первая картинка статьи и заголовок + описание, которые вы видели чуть выше на скриншоте. Переходим ко второму варианту.

2-ой вариант. Плагин Facebook Open Graph Meta

Этот вариант также прост как и предыдущий. Вы скачиваете (работу плагина я проверил, и также я знаю, что его автор — опытный разработчик, который ведёт свою страницу на Facebook), также как и в первом варианте загружаете на блог через панель управления и активируете. Я подробно остановлюсь на настройках этого плагина.

В панели управления слева заходите в «Настройки» -> «Facebook Open Graph». Вверху появится такая форма:


Первое поле «App Id» можете пропустить. Во второе поле «Admins» вставьте ваш личный id на Fаcebook. Чтобы узнать свой id, зайдите к себе в профиль и в адресной строке замените «www» на «graph». Например, в моём случае:

надо заменить

https://www.facebook.com/neoandrej

https://graph.facebook.com/neoandrej

Скопируйте id и вставьте его в поле «Admins» плагина. Затем в третье поле «Image Url» вставьте ссылку на картинку, которая будет отображаться по умолчанию на тот случай, если в какой-то статье блога не будет изображений или если это главная страница блога, или любая другая страница (не статья).

После этих действий нажимаете серую кнопку «Save» (Сохранить). Плагин почти готов к работе.

Зачем плагину нужен ваш id Facebook? Чтобы подключить статистику Facebook к вашему блогу, которая будет доступна в вашем аккаунте по этому адресу http://facebook.com/insights . Благодаря этой статистике, вы увидите данные по всем Facebook-плагинам, установленным на вашем блоге: кто нажимал, сколько раз, когда, где чаще/реже и другие важные данные. Подробно о том, как пользоваться этой статистикой я рассказал в своём платном видеокурсе «Фан-страницы: результат за 27 дней» .

Последний важный шаг. Вам необходимо вручную заменить тег в файле header.php на этот код:

>

В противном случае ваш блог может не понять метатеги Facebook. Чтобы отредактировать файл header.php, в панели управления слева зайдите во «Внешний вид» -> «Редактор» и справа найдите и нажмите на ссылку «Заголовок (header.php)». В самом верху кода вы увидите тег (на скриншоте ниже), который надо заменить и сохранить изменения.

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

3-ий вариант. Добавление и настройка тегов Open Graph вручную

Если вы привыкли всё делать и настраивать самостоятельно и вы любите работать с кодом WordPress, вам подойдёт, конечно, это вариант. Для начала нужно проделать те же действия, что и в предыдущем варианте — заменить стандартный тег на тот, что нам нужен. Открываете файл header.php и заменяете стандартный тег:

>

на этот код:

>

Следующий шаг — самый интересный . В этом же файле header.php перед закрывающим тегом вставляете код тегов Open Graph Facebook:

" /> ID)); } ?>" /> " /> " />

В этих тегах вам нужно заменить 2 значения:

«fb:admins» content=«ВАШ_ЛИЧНЫЙ_ID_FACEBOOK» — вставьте id вашего аккаунта на Facebook (как его найти, я объяснил выше);

«og:image» content=«http://ПУТЬ-К-КАРТИНКЕ/КАРТИНКА.jpg» — вставьте ссылку на картинку, которая будет отображаться по умолчанию, если в статье или на странице нет других картинок. Как правило, сюда вставляется ссылка на логотип.

Сохраняете изменения и проверяете работу тегов Open Graph, нажав на кнопку «Мне нравится» в любой статье блога.

Может быть ситуация, при которой картинка статьи всё равно публикуется некорректно или вся статья просто не отображается (как было у меня). Это значит, что функция wp_get_attachment_thumb_url() не работает. Тогда необходимо сделать следующие действия.

Замените этот тег:

ID)); }?>" />

на этот тег:

" />

Сохраните изменения. Затем справа в панели управления найдите ссылку на файл «Функции темы» (functions.php), откройте его и в конце кода перед знаком ?> вставьте следующий код:

Function catch_that_image() { global $post, $posts; $first_img = ""; ob_start(); ob_end_clean(); $output = preg_match_all("/ /i", $post->post_content, $matches); $first_img = $matches ; if(empty($first_img)){ //Определяет картинку по умолчанию $first_img = "http://ПУТЬ_К_КАРТИНКЕ_ПО_УМОЛЧАНИЮ/ФОТО.jpg"; } return $first_img; }

Этот код описывает функцию catch_that_image() , которая находит первую картинку в статье блога и вставляет её ссылку в тег изображения Open Graph. Если в статье нет картинки, то эта функция использует изображение по умолчанию. Для этого вставьте ссылку нужного изображения в эту переменную:

$first_img = «http://ПУТЬ_К_КАРТИНКЕ_ПО_УМОЛЧАНИЮ/ФОТО.jpg»;

Теперь сохраняйте изменения в файле functions.php, заходите на блог и проверяйте работу кнопок «Мне нравится». Всё должно работать корректно.

Результаты тестирования

Чтобы показать вам, как работают методы, которые описаны в статье, я создал тестовый блог . На блоге сделал несколько постов с 3-мя изображениями в каждом, добавил кнопки «Мне нравится». Протестировал работу кнопок до Open Graph и после.

Тест №1. Результат работы кнопки «Мне нравится» на блоге без тегов Open Graph и плагина All in One SEO Pack.

Тест №2. Результат работы кнопки «Мне нравится» на блоге после установки плагина Facebook Open Graph Meta.

Тест №3. Результат работы кнопки «Мне нравится» на блоге после настройки тегов Open Graph вручную.

Результаты говорят сами за себя. Желаю успешной настройки тегов Open Graph Facebook на вашем блоге. Применяйте шаринг профессионально и по максимуму.

Решение проблем

Если нужная картинка всё равно не показывается при публикации ссылки в Facebook, то проверьте размеры картинки. Если они меньше, чем 200х200 пикселей, то Facebook будет искать и подставлять картинку большего размера.

Ещё бывает такой глюк, что картинка отображается неправильно в опубликованном посте на Facebook даже при наличие тегов Open Graph. Выход очень простой. Копируете ссылку страницы блога, на которой установлена «неправильная» кнопка «Мне нравится». Вставляете её в дебаггер Facebook (