15.10.13, 17:38
4 комментарий
  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 нужно перейти на developers.facebook.com/apps, нажать на кнопку "Создать новое приложение" и в открывшемся окне дать ему имя.

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


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

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


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

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

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

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


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

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


С полученными метатегами и предстоит работать дальше. Размешать их можно только в секции 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 .= <<<HTML
 
	<meta property="fb:app_id" content="полученный app_id" />
	<meta property="og:type" content="article" />
	<meta property="og:url" content="$full_link" />
	<meta property="og:title" content="{$row['title']}" />
HTML;


3. Найти строку:

$row['full_story'] = stripslashes($row['full_story']); 


и ниже добавить:

		preg_match_all('/<img[^>]*src=["']?([^"' >]+.(jpeg|jpg|png|gif))["']?s*[^>]*>/si', $row['full_story'], $images);
 
		foreach($images[1] as $key => $value) {
			$control = strstr($value, 'posts');
			$control = substr($control, 0, strpos($control, '/'));
 
			if ($control == 'posts') {
				$opengraph .= "rn" . '	<meta property="og:image" content="'. $value .'" />';
				$opengraph .= "rn" . '	<link rel="image_src" href="'. $value .'" />';
				if ($key == 4) break;
			}
		}
 
		unset($images, $key, $value, $control);


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

<img src="" alt="" /> 


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

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

	<meta property="og:image" content="/engine/data/emoticons/crying.gif" />
	<link rel="image_src" href="/engine/data/emoticons/crying.gif" />
	<meta property="og:image" content="/engine/data/emoticons/sad.gif" />
	<link rel="image_src" href="/engine/data/emoticons/sad.gif" />
	<meta property="og:image" content="/engine/data/emoticons/tongue.gif" />
	<link rel="image_src" href="/engine/data/emoticons/tongue.gif" />
	<meta property="og:image" content="/templates/Soccer/dleimages/spoiler-plus.gif" />
	<link rel="image_src" href="/templates/Soccer/dleimages/spoiler-plus.gif" />


Суть же самой проверки очень проста. В 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="{$metatags['description']}" />";


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

<head[aviable=showfull] prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"[/aviable]>


Подытожим?

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

Если вы внимательно смотрели код, то могли заметить тег

<link rel="image_src" href="" />


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

<meta property="og:image" content="" /> 


и несет на себе миссию охвата большего количества соц. сетей.

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

Автор: BR0kEN

Комментарии

  1. roman48 20 февраля 2015 21:39                    

    я как раз сейчас разметку делал у меня
    ($opengraph .= "n <meta property="og:description" content="{$metatags['description']}" />";)
    так не получилось
    https://yadi.sk/i/KRmMJ7kYeoYPM
    может тут какой нибудь запетой не хватает.получилось по другому в файле engine.php после {$s_meta} этого тега вставил
    <meta property="og:description" content="{$metatags['description']}"/>

    сейчас все работает ровно
    https://yadi.sk/i/ceUB34pfeoYa2
    а вторая разметка что то не получается пол дня выход ищу
    https://yadi.sk/i/AtsihP_NeoYds
    админ может подскажет что добавить нужно.если время есть

  1. ToNik Пользователь offline 20 февраля 2015 23:37                    

    roman48, Не совсем понял, может эта темка поможет

    roman48, На форуме прочитал:
    Вместо второго действия вставить:
    $opengraph .= "
    		<meta property=\"og:type\" content=\"article\" />
    		<meta property=\"og:url\" content=\"$full_link\" />
    		<meta property=\"og:title\" content=\"{$row['title']}\" />
    		";

  1. roman48 20 февраля 2015 23:53                    

    спасибо сейчас зделаю.
    второе вот
    https://yadi.sk/i/At3N2cnleofXN
    в валидаторе яндекс там видно

  1. Lexxs Пользователь offline 5 апреля 2016 15:23                    

    Тема походу наверное устарела ?
    В одиннадцатом DLE уже где то есть разметка по умолчанию ?
    Где лучше править ?

Напишите своё мнение