Open Graph разметка для DLE

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

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

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

Приводить примеры различных типов метаразметки я не стану, а сразу расскажу о ее внедрении в DataLife Engine.

app_id — что это и где его взять?

app_id — это идентификатор вашего приложения в Facebook. Почему Facebook? Потому что протокол Open Graph — их детище.

Чтобы получить app_id нужно перейти на https://developers. facebook. com/apps. нажать на кнопку «Создать новое приложение» и в открывшемся окне дать ему имя.

Затем, после нажатия на «Продолжить», попадаем на страницу редактирования приложения, где и видим свой app_id.

Создание типа объекта

Объекты в Open Graph могут быть описаны разные, но я расскажу об одном, а именно — article. Со всеми типами объектов можно ознакомиться на официальном сайте протокола .

Так как app_id мы получили, то теперь переходим на начальную страницу настройки Open Graph и выбираем параметры. В первом поле — «publish», во втором — «article» и жмем на «Начало работы».

Попадаем на страницу, с созданными только что типами данных, где виднеется две ссылки «Get code». Нам нужны метатеги, по-этому жмем на «Get code» второго пункта — «Object Types».

С полученными метатегами и предстоит работать дальше. Размешать их можно только в секции head нашего документа, а так как у DLE шаблонизатор этого сделать не позволяет, то придется извращаться — править код index. php и show. full. php .

Правки, правки, правки

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

1. Открыть index. php. найти строку: $tpl->set ( '', $metatags."\n".$js_array ); и заменить ее на: $tpl->set('', $metatags. $opengraph ."\n". $js_array); .

2. Открыть /engine/modules/show. full. php. найти строку: $tpl->set( '', $full_link ); и после нее вставить:

3. Найти строку: $row['full_story'] = stripslashes($row['full_story']); и ниже добавить:

Что конкретно делает этот код? Во-первых, он выбирает из полной новости все картинки и делит их на два массива: первый содержит все HTML теги <img src="" alt="" /> изображений из новости, второй — данные из атрибутов src. Во-вторых, идет проверка на расположение картинки и далее я попробую разъяснить для чего она. Допустим при публикации новости вы использовали спойлер, смайлик или еще какие-то элементы содержащие изображение, но не имеющие прямого отношения к теме публикации. И по-этому, не проверяй мы расположение картинок, в метатегах размещалась бы куча ненужного «хлама» приблизительно такого вида (использовал три смайла и спойлер):

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

Бывает и так, что в посте размещено двадцать и более изображений, а это значит что в секцию head вашего сайта добавится, внимание, 40+(!) метатегов. Оно вам надо? По-этому, в-третьих кстати, есть возможность выставлять кол-во изображений отбирающихся для OG разметки. В вышеприведенном коде присутствует цифра 4 и отвечает она за отбор первых пяти картинок (отсчет ведется с нуля). Рекомендую не злоупотреблять и отбирать, максимум, десяток изображений.

Небольшое отступление

Выполнив предыдущие пункты мы дошли до завершающего и, на мой взгляд, самого важного шага — установки <meta property="og:description" content="" />. Важно понимать, что описание из этого тега будет поститься в соц. сеть и в нем нужно как можно более точно передать всю суть статьи в

250 символах, дабы заинтересовать потенциальную аудиторию. В преобладающем количестве случаев происходит так, что ни начало краткой новости, ни полной не отражает максимальную суть публикации и по-этому, для вывода информации в метатег, необходимо самостоятельно заполнять поле «Метатег description» на вкладке «Дополнительно».

Вернемся же к делу

5. В show. full. php находим код строку: if ($row['metatitle']) $metatags['header_title'] = $row['metatitle']; и после добавляем: $opengraph .= "\n <meta property=\"og:description\" content=\"\" />";

6. Открываем main. tpl и <head> заменяем на:

Подытожим?

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

Если вы внимательно смотрели код, то могли заметить тег <link rel="image_src" href="" />. Он предназначен для указания картинок, которые буду предложены пользователю при кросспостинге, является аналогом <meta property="og:image" content="" /> и несет на себе миссию охвата большего количества соц. сетей.

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

Добавить комментарий