DataLife Engine > Версия для печати > Open Graph разметка для DLE

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

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

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

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

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

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

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

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

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

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

Так как app_id мы получили, то теперь переходим на начальную страницу настройки Open Graph и выбираем параметры. В первом поле — «publish», во втором — «article» и жмем на «Начало работы». 1381832817_1355795286_ogpstart-1616116 Попадаем на страницу, с созданными только что типами данных, где виднеется две ссылки «Get code». Нам нужны метатеги, по-этому жмем на «Get code» второго пункта — «Object Types». 1381832843_1355795417_ogpcontinue-4900227

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

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

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

1. Открыть index.php, найти строку:

$tpl->set ( '{headers}', $metatags."n".$js_array ); 

и заменить ее на:

$tpl->set('{headers}', $metatags . $opengraph ."n". $js_array);

2. Открыть /engine/modules/show.full.php, найти строку:

$tpl->set( '{full-link}', $full_link );

и после нее вставить:

$opengraph .=  $value) {
                        $control = strstr($value, 'posts');
                        $control = substr($control, 0, strpos($control, '/'));
 
                        if ($control == 'posts') {
                                $opengraph .= "rn" . '   ';
                                $opengraph .= "rn" . '   ';
                                if ($key == 4) break;
                        }
                }
 
                unset($images, $key, $value, $control);

Что конкретно делает этот код?

Во-первых, он выбирает из полной новости все картинки и делит их на два массива: первый содержит все HTML теги

 

изображений из новости, второй — данные из атрибутов src.

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

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

        
        
        
        
        
        
        
        

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

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

Рекомендую не злоупотреблять и отбирать, максимум, десяток изображений.

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

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

 

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

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

5. В show.full.php находим код строку:

if ($row['metatitle']) $metatags['header_title'] = $row['metatitle']; 

и после добавляем:

$opengraph .= "n ";

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

Подытожим?

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

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

 

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

Автор: BR0kEN

Вернуться назад