Социальные сети - один из наибольших поставщиков трафика и по-этому сейчас практически не встретить сайта без кнопок кросспостинга.
При постинге информации в социальную сеть можно заметить что алгоритм сделал краткую сноску, отыскав в коде страницы метатеги 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.