Плагин вывода og:image на основе дополнительного поля в DLE




Разметка Open Graph уже реализована в движке DLE и работает правильно, но только до тех пор, пока вы используете вставку картинок в тело новости. Если в вашей публикации картинки выводятся через дополнительные поля - то метатег og:image предназначенный для вывода ссылки на изображение оказывается пустым. И при репостинге ссылок на вашу страницу сайты не отображается картинка с сайта. Для исправления этой проблемы подойдет плагин Своя картинка в og:image в полной новости



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

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


Пример кода генерируемого DLE для новостей.
<meta property="og:site_name" content="TCSE разработка и техническое сопровождение сайтов на основе DLE (DataLife Engine)">
<meta property="og:type" content="article">
<meta property="og:title" content="AMP для DLE - плагин AMP4DLE pro (платная версия)">
<meta property="og:url" content="https://tcse-cms.com/works/1610-amp-dlja-dle-plagin-amp4dle-pro.html">


В данном случае нас интересует только og:image

og:image — здесь указываем, какую картинку нужно подтянуть к публикации при репосте. В атрибуте content указывается URL изображения. Обратите внимание! При использовании разметки изображение может даже не находиться в статье или на странице. Его можно разместить в любой директории сайта, а в теге og:image указать ссылку на него. При репосте соцсети проигнорируют картинки на странице, а подтянут указанное изображение из нужной директории.

Плагин позволяющий указать название свое дополнительного поля для использования в разметке og:image основан на примере с форума поддержки https://forum.dle-news.ru/topic/72594

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

Перейдите в раздел Настройки скрипта -> Настройки системы -> Общие
в нем найдите пункт Указать название дополнительного поля картинки для og:images



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


Скачать плагин:
ogimage_v2_1.xml [4,02 Kb] (cкачиваний: 45)


PS:
Про микроразметку статей так же имеет смысл прочитать статью https://habr.com/ru/company/click/blog/492258/

Как быть с размерами картинок

У каждой соцсети есть свои требования к размеру картинок. По-хорошему, под каждую соцсеть нужно готовить отдельное изображение с подходящими размерами. Например, вы публикуете на сайте статью, которую планируете репостить в три соцсети: Твиттер, Фейсбук и ВКонтакте. Для каждой соцсети готовите отдельную картинку. Чтобы каждая соцсеть загрузила именно «свою» картинку, необходимо указать в разметке Open Graph следующие теги:


vk:image
fb:image
twitter:image

При репосте во ВКонтакте соцсеть учтет только тег vk:image, а остальные проигнорирует. Точно так же поступят и остальные соцсети.


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.


Похожие публикации

instant articles для dle - плагин DLE-rss-instant-articles

instant articles для Facebook в формате RSS Очень специфический плагин, предназначенный для облегчения работы smm специалистов по публикации новостей сайта в социальной сети Фейсбук.... читать далее

Модуль DLE importNews - работа с новостями сайта через CSV

ЭКСПОРТ / ИМПОРТ НОВОСТЕЙ DLE Плагин для DLE, позволяющий выгружать новости в CSV и загружать их на сайте. Модуль для DLE, позволяющий производить массовые изменения в опубликованных новостях путем... читать далее

Блог им. mancocapac / Google обесценивает ссылки с DMOZ и Yahoo?

По крайней мере, именно так восприняли SEO-оптимизаторы во всем мире тот факт, что рекомендация по регистрации нового сайта в авторитетных каталогах была удалена из официального руководства Google... читать далее

UNITE Gallery by TCSE - плагин галереи картинок

UNITE Gallery - модуль генерации галереи картинок из допполей (Плагин для DLE 13 и выше) Данный модуль подключает в шаблон сайта JS плагин unitegallery В комплекте идет инструкция по настройке и... читать далее

Как наложить иконку плеера поверх картинки на примере youtube превью

При использовании великолепного плагина YouTube PopUp jQuery Plugin который позволяет любой ссылке ведущей на страницу видео-хостинга YouTube добавить специальный CSS класс для запуска в модальном... читать далее

Кросспостинг свежих материалов вашего сайта в блогохостингах и социальных сетях

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

Комментарии (2)

  1. #1 написал: Руслан
    Группа: Гости
    22 марта 2021 00:42

    Здравствуйте, работает ли это с типом поля "Изображение"?
    • 0

       

    1. #2 написал: TCSE
      Группа: Администраторы
      22 марта 2021 10:23

      Руслан, попробуйте вписать название свое поля типа "изображение" в форму модуля



      и вам сразу все станет понятно.

      В базе данных сайта не храниться изображение - там находиться часть адреса с названием конкретной картинки.
      • 0

         

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent