Меню

Настройка open graph dle



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 теги изображений из новости, второй — данные из атрибутов src. Во-вторых, идет проверка на расположение картинки и далее я попробую разъяснить для чего она. Допустим при публикации новости вы использовали спойлер, смайлик или еще какие-то элементы содержащие изображение, но не имеющие прямого отношения к теме публикации. И по-этому, не проверяй мы расположение картинок, в метатегах размещалась бы куча ненужного «хлама» приблизительно такого вида (использовал три смайла и спойлер):

Читайте также:  Цифровой приемник dc910hd настройка

Суть же самой проверки очень проста. В 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.

Источник

Микроразметка Open Graph для Video (og:video)

Как известно, в DLE есть встроенная микроразетка опенграф для статей — article, но если у вас сайт с видео (фильмы или сериалы), то логично будет использовать такую микроразметку именно для видео. Для начала нам нужно отключить стандартную микроразметку. Для этого нужно загрузить плагин:

Для начала нужно ознакомиться с информацией по тегам в справочнике яшки . Как видно — самый простой вариант микроразметки для видео такой:

Но кроме этого можно передавать и другую информацию о кино, например, актеры, режиссер, жанры, длительность видео и т.д. Более детальная информация есть в справочнике яндекса. Приступим к настройке:

  1. В main.tpl прописываем:
    в тег html.
  2. Подключаем вывод информации внутри тега head:

Обратите внимание на расположение файла metagen.php, вы можете его загрузить в другую папку, но чтобы не было помойки из файлов — лучше создать папку для сторонних модулей и складировать их в ней, у меня для этого папка mods.

Далее осталось только настроить микроразметку в файле полной новости fullstory.tpl. Например, если мы хотим получить на выходе разметку:

в самый верх в fullstory.tpl нужно добавить код:

Вот в принципе и всё! Какие теги указывать в разметке — решать вам, в инструкции яндекса почти всё расписано, но так же можете посмотреть разметку на любом киносайте, где есть разметка опенграф для видео, и скопировать у них все «meta property»/»meta name» и потом настроить их на своём сайте.

Таким же образом можно настроить и разметку для twitter и вывести в main.tpl.

Увидел на странице метагена в комментариях вариант на JS:

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

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

    Открываете понравившийся сайт и копируете разметку, например:

Как видно здесь нужно вывести нам краткое описание и ссылку на материал. Но теги fullstory.tpl не работают в main.tpl, именно для этого и нужен плагин глобальных тегов.

  • Устанавливаете плагин.
  • Создаем в fullstory.tpl нужные нам теги:

    Прописываем в main.tpl следующий код:

    и не забываем про
    в тег html.

  • Готово! Микроразметка настроена!
  • Какой из вариантов использовать — решать вам, у каждого есть свои плюсы и минусы и сложности/проблемы по настройке.

    Источник

    Микроразметка ​Open Graph: что это и как настроить

    В статье:

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

    О видах микроразметки и ее настройке для «Яндекс» и Google читайте в статье.

    Кнопки «Поделиться в соцсетях» на сайте

    Социальные кнопки вроде «Поделиться», «Лайкнуть», «Share», «Like» полезны, они есть почти на всех сайтах. Пользователям удобно отправлять крутые материалы себе в социальные сети, не копируя и вставляя ссылку, а веб-мастеры получают дополнительное распространение контента и увеличение трафика.

    Кнопки для репостов в социальные сети

    Такие кнопки обычно размещают в блоге. Думайте о пользователе: он скорее сохранит полезную статью, чем каталог товаров. Хотя и товарами могут делиться в соцсетях — к примеру, пользователи Pinterest отправляют позиции с красочными фотографиями, схемы или рецепты себе на доску, чтобы показать друзьям или вернуться к ним позже.

    Поделиться пином с рецептом

    Веб-мастеру недостаточно просто установить кнопку «Поделиться в соцсети» для того, чтобы пользователь делился контентом с красивым превью. Картинка или заголовок можгут отображаться не так, как задумано.

    Проблема с добавлением ссылки в социальную сеть

    Распространённый сбой — превью содержит не тот графический контент. К примеру, новость в социальной сети сопровождается не тематическим фото обложки, а рисунком рекламного баннера, который также был на странице.

    Неправильное отображение сниппета

    Проблема устраняется просто — с помощью дополнительного стандарта микроразметки страницы Open Graph.

    Протокол Open Graph от Facebook

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

    Зачем нужен Open Graph

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

    Разметку Open Graph поддерживают соцсети и мессенджеры ВКонтакте, Facebook, Twitter, Pinterest, Одноклассники, Telegram, Skype и другие.

    Разберемся, как настроить микроразметку для страницы.

    Ключевые мета-теги Open Graph

    Протокол Open Graph состоит из мета-тегов, их интегрируют в html-код страницы в .

    Разберем основные теги:

    • og:title – название материала;
    • og:description – описание материала, заполнять не обязательно;
    • og:image – ссылка на картинку, которая должна сопровождать материал;
    • og:type – тип добавляемого материала, например, «article» – статья, «movie» – кино и т.д.;
    • og:url – ссылка на саму веб-страницу, которая добавляется в социальную сеть.

    Пример рецепта с разметкой Open Graph

    Есть и дополнительные теги для контактов, адреса, языка и других элементов, они перечислены на странице ogp.me. Иногда их использование тоже может быть оправдано: к примеру, если добавляемая страница содержит информацию о конкретном человеке, то можно дополнительно указать характеристики с помощью специального тега.

    Настройка через json-ld:

    Пример микроразметки страницы с помощью Open Graph

    Пример практического использования протокола Open Graph — фрагмент html-кода, в котором использованы необходимые теги данной разметки. Подопытная страница – недавняя статья про статья про редиректы на PR-CY:

    Отдельно можно настроить особенное отображение для соцсетей, к примеру, в аккаунте Twitter. Тогда к записи нужно добавить теги:

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

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

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

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

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

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

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

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

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

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

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

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

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

    Источник

    Adblock
    detector