В продолжение микроразметки, чтоб Твиттер понимал нас лучше

+27
3.6K
Порывшись с инете наткнулся на возможность добавить свои твиты с картинкой, чтоб получить больше ретвитов и переходов на сайт. Ну и конечно решил оставить себе шпаргалку тут в блоге.
Попутно добавим еще и для майл.ру и одноклассников микроразметку mrc__share, в статьи и блоги, чтоб лучше понимали и брали нужную картинку с описанием, если таковое прописано в дискрипшене. Если описание не прописано meta_desc, то выводится пустое поле, при нажатии на кнопку поделится в майл.ру.

Для начала прописываем в шапку сайта следующее:
  1. <meta name="twitter:card" content="summary" />
  2. <meta name="twitter:site" content="@логин аккаунта твиттера" />
  3. <meta name="twitter:creator" content="@логин аккаунта твиттера" />

Далее прописываем для компонентов микроразметку идем во frontend.php статей и вставляем следующий код после
// Картинка статьи
$article['image'] = (file_exists(PATH.'/images/photos/medium/article'.$article['id'].'.jpg')? 'article'.$article['id'].'.jpg': '');

Для статей микроразметка

  1. $inPage->addHead('<meta name="twitter:image:src" content="'.HOST.'/images/photos/medium/'.$article['image'].'"/>');
  2. $inPage->addHead('<meta name="mrc__share_title" content="'.htmlspecialchars($article['title']).'"/>');
  3. $inPage->addHead('<meta name="mrc__share_description" content="'.htmlspecialchars(strip_tags($article['description'])).'"/>');
  4. $inPage->addHead('<link rel="image_src" href='.HOST.'/images/photos/medium/'.$article['image'].'"/>');
Теперь идем во frontend.php блогов и вставляем следующий код после
$is_author = ($inUser->id && $inUser->id == $post['user_id']);

Для постов блога микроразметка

  1. $inPage->addHead('<meta name="twitter:image:src" content="'.HOST.''.$imagefirst[1][0].'"/>');
  2. $inPage->addHead('<link rel="image_src" href='.HOST.''.$imagefirst[1][0].'"/>');
  3. $inPage->addHead('<meta name="mrc__share_title" content="'.htmlspecialchars($post['title']).'"/>');
  4. $inPage->addHead('<meta name="mrc__share_description" content="'.htmlspecialchars($post['meta_desc']).'"/>');

Идем в Twitter и логинимся под своим аккаунтом в приложении.
В открывшемся окне с лева вносим урл статьи и нажимаем проверить. С права должно выйти поле с заголовком, описанием и картинкой статьи. Далее под введенным урлом нажимаем снова кнопку и в открывшемся окнце добавляем свои данные. Сохранили. Идем на почту своего акка твиттера и подтверждаем соданное приложение.
0
Avert Avert 9 лет назад #
Полезная вещь.
0
Helg Helg 9 лет назад #
Я не прогер, но вроде правильно и работает laugh
0
kirkr kirkr 9 лет назад #
Почитайте тут http://instantcms.ru/blogs/kollektivnyi-razum там есть для всех, в том числе и для вконтакте разметка. Все есть уже. Но молодец что пробуете.
0
Helg Helg 9 лет назад #
Да я и не скрываю, что делал по аналогии с Этим. И у меня получился вот такой код:

Код PHP:
  1. // Картинка статьи
  2. $article['image'] = (file_exists(PATH.'/images/photos/medium/article'.$article['id'].'.jpg') ? 'article'.$article['id'].'.jpg' : '');
  3. $inPage->addHead('<meta property="og:type" content="website" />');
  4. $inPage->addHead('<meta property="og:title" content="'.htmlspecialchars($article['title']).'"/>');
  5. $inPage->addHead('<meta property="og:description" content="'.htmlspecialchars(strip_tags($article['description'])).'"/>');
  6. $inPage->addHead('<meta property="og:url" content="'.HOST.'/'.$model->getArticleURL(null, $article['seolink']).'" />');
  7. $inPage->addHead('<meta property="og:image" content="'.HOST.'/images/photos/medium/'.$article['image'].'"/>');
  8. $inPage->addHead('<meta name="twitter:image:src" content="'.HOST.'/images/photos/medium/'.$article['image'].'"/>');
  9. $inPage->addHead('<meta name="mrc__share_title" content="'.htmlspecialchars($article['title']).'"/>');
  10. $inPage->addHead('<meta name="mrc__share_description" content="'.htmlspecialchars(strip_tags($article['description'])).'"/>');
  11. $inPage->addHead('<link rel="image_src" href='.HOST.'/images/photos/medium/'.$article['image'].'"/>');
Но без подключенного приложения и не которых моментов твиттер не берет картинку из текста. А с подключенным получается вот так:
0
m0skit m0skit 9 лет назад #
Вы хоть указывайте в посте для какой это ветки. А то ветки две и уже фиг разберешь что где и для какой
0
Helg Helg 9 лет назад #
А, что не ясного - первая ветка!
0
m0skit m0skit 9 лет назад #
А указать это в заголовке или как минимум в первой части поста - не судьба? А то приходится заходить, смотреть и читать то, что мне не нужно, в виду того что интересует только двойка. Причем, не мне одному.
+2
sotastroy sotastroy 9 лет назад #
За микроразметку автору однозначно плюс.

Но, может пора сделать универсальное решение и внедрить в коробочную версию? Если каждый раз править каждый сайт под твиттер, под FB и тд, то можно запутаться. Выбрать OG или Schema.org, и внедрить в нужные компоненты - всем будет здорово. Плюсаните, кто согласен, мож админы еще разок подумают об этих моментах.
Олег Васильевич я Олег Васильевич я 9 лет назад #
Комментарий удален
Олег Васильевич я Олег Васильевич я 9 лет назад #
Комментарий удален
0
sotastroy sotastroy 9 лет назад #
Обычно плюсануть просят именно ключевое сообщение, но судя по плюсам мало кто понимает ценность микроразметки.
+1
Helg Helg 9 лет назад #
Кстати Твиттер читает разметку OG, так что можно ее только в коробочную версию внести. Было бы удобно и хорошо, а то в компоненте видео она есть а вот в бесплатных компонентах ее нет...
+1
qwest qwest 9 лет назад #
По моему разметка OG считается более менее официальной. Наверное лучше ей и пользоваться в разработках.
+1
Старый балбес Старый балбес 9 лет назад #
sotastroy:
Но, может пора сделать универсальное решение и внедрить в коробочную версию? Если каждый раз править каждый сайт под твиттер, под FB и тд, то можно запутаться. Выбрать OG или Schema.org, и внедрить в нужные компоненты - всем будет здорово.
Как правильно выполнить разметку Schema.org для ICMS в рамках создаваемого типа контента ,
Обьявите методику реализации , как я должен привязать поле (предположим привязать по факту text-photo) в разных видах контента , к различным ( по выбору ) схемам разметки.
В первой ветке такую методику я реализовал. На универсальном типе контента.
Поэтому знаю как это задание технически реализуется.
Во второй ветке, у меня нет ни цели ни желания отвлекаться на разметку.
Попробую поработаю в этом направлении.Вместо перекуров.
PS//Прошу к диалогу
0
sotastroy sotastroy 9 лет назад #
Группе, к которой вы принадлежите, запрещено просматривать этот скрытый текст

У различных типов контента почти всегда есть основные элементы, которые можно "разметить". Название(заголовок), автор, дата/время, основная картинка и тд. Даже эти крохи пригодятся.
Можно взглянуть на вашу реализацию для первой ветки.
0
Helg Helg 9 лет назад #
Ссылку на Твиттер поправил
+1
Доротея Доротея 9 лет назад #
Можно ещё во frontend.php добавить $inPage->addHead('<a rel="author" href="https://plus.google.com/ваша_страница"/>'); - для авторства статей и блогов. Что бы по всему сайту не бегала ссылка)
0
al955 al955 8 лет назад #
Почему-то не работает

пишет

ERROR: Invalid value (message: Field title failed to validate because: text expects tag property, but not found in Map().)
ERROR: Invalid value (message: Field description failed to validate because: text expects tag property, but not found in Map().)
0
vikont vikont 8 лет назад #
А как правильно все прописать для Второй ветки?
0
Helg Helg 8 лет назад #
Появились (видимо давненько уже) изменения в валидаторе твиттера. Теперь создавать приложение он не требует и подтверждать его на почте его не надо.
Достаточно просто все правильно прописать в код сайта и подождать некоторое время пока твиттер подстроиться и начнет выводить картинку.

Для двойки я сделал следующее:
1 установил OGP
2 main.tpl.php добавил это

<head>
<title><?php $this->title(); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="<?php echo $canonical; ?>"/>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@логин тви" />
<meta name="twitter:creator" content="@логин тви" />
<meta name="twitter:image:width" content="435" />
<meta name="twitter:image:height" content="375" />
<meta name="twitter:domain" content="тут сайт.ru"/>

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

Еще от автора

Плагин - Похожие фото под видео 10.6
Предлагаю вашему вниманию плагин, который выводит похожие фото из альбомов сайта, под видео роликом. Версия системы 10.6 и версия видео 8.3 последняя.
Обратная ссылка при копировании
Тексты с сайта копируют, не только веб мастера, но и если ресурс посещаем обычные пользователи тоже.
Плагин редиректа
Заказывал я Димитриусу кусок кода. А в итоге вышел плагин. Теперь вот с его позволения, я решил выложить плагин здесь.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.