Как сделать так, чтобы в Twitter вместе с твитом уходил полноценный анонс статьи

  Автор:
  16289
Репост в Твиттер с фото

Когда мы кликаем на кнопку Twitter, чтобы поделиться статьей в Twitter аккаунте, мы может отправить не больше 140 знаков + ссылка на статью. Как правило отправляется только заголовок статьи.

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

twitter-svodka

Когда Вы кликаете на эту ссылку или просто по тексту твита, появляется полный анонс статьи с блога с заголовком, описанием, изображением и ссылкой на статью.

svodka-twit

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

Внимание! Для пользователей шаблоном AB-Inspiration. В новую версию шаблона — конструктора AB-Inspiration это новшество уже включено. Все что нужно это обновить шаблон до новой версии 4.14, отредактировать файл robots.txt, и отправить запрос в Twitter на занесение блога в «белый лист». Что именно нужно включить в файл robots.txt и как отправить запрос я расскажу в конце статьи. Вы можете пропустить техническую часть и перейти сразу к «Как открыть Twitter доступ к изображениям» и «Как занести блог в белый список Twitter «

Как и в случае с facebook за отображение анонса отвечают специальные метатеги (Как опубликовать запись с блога в Facebook с картинкой на всю ширину).  Метатеги для Twitter в html коде выглядят так:

twittermeta

Здесь, в примере показано, как создать анонс с изображением на всю ширину. За тип анонса отвечает тип карты — summary_large_image. Если Вы хотите попробовать другие типы анонсов, подробнее об этом можно почитать на официальном сайте твиттер: https://dev.twitter.com/cards/types

В этой статье мы разберем именно анонс с большим изображением, тип карты — summary_large_image.

Вставка метатегов Twitter в Head

Итак, в файле header.php между тегами head нужно вставить следующий код:

<meta name="twitter:site" content="@anfisabreus">
<meta name="twitter:creator" content="@anfisabreus">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<?php the_title(); ?>">

<meta name="twitter:description" content="<?php while (have_posts()):the_post(); $out_excerpt = str_replace(array("\r\n", "\r", "\n", "'" ,"\""), "", get_the_excerpt()); echo $out_excerpt; endwhile; ?>">

<?php if(!has_post_thumbnail( $post->ID ))
{
$default_image='http://AdresBloga.ru/adres-izobrazhenia.jpg';
echo '<meta name="twitter:image:src" content="' . $default_image . '">';
}
else
{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
echo '<meta name="twitter:image:src" content="' . esc_attr( $thumbnail_src[0] ) . '">';
} echo "\n"; ?>
<meta name="twitter:image:width" content="435">
<meta name="twitter:image:height" content="375">

Давайте разберем код поподробнее:

<meta name="twitter:site" content="@anfisabreus">
<meta name="twitter:creator" content="@anfisabreus">

Здесь нужно заменить anfisabreus на свой логин в Твиттер. В шаблоне AB-Inspiration пользователи прописывают логин Твиттер в настройках шаблона в разделе «Вставки».

<meta name="twitter:site" content="summary_large_image">

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

<meta name="twitter:title" content="<?php the_title(); ?>">

Здесь ничего менять не нужно. Функция the_title() автоматически подставит заголовок Вашей статьи

<meta name="twitter:description" content="<?php while (have_posts()):the_post(); $out_excerpt = str_replace(array("\r\n", "\r", "\n", "'" ,"\""), "", get_the_excerpt()); echo $out_excerpt; endwhile; ?>">

Здесь много кода :), его задача взять первые строчки статьи. Ничего менять не нужно.

<?php if(!has_post_thumbnail( $post->ID ))
{
$default_image='http://AdresBloga.ru/adres-izobrazhenia.jpg';
echo '<meta name="twitter:image:src" content="' . $default_image . '">';
}
else
{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
echo '<meta name="twitter:image:src" content="' . esc_attr( $thumbnail_src[0] ) . '">';
} echo "\n"; ?>

Эта часть кода отвечает за вывод изоабражения. Я подробно разбирала этот код в предыдущей статье — Как опубликовать запись с блога в Facebook с картинкой на всю ширину.

Здесь нужно заменить адрес изображения, которое будет по умолчанию, если в статью не вставлена миниатюра. Пользователи шаблона AB-Inspiration загружают это изображение в настройках шаблона в разделе «Вставки»

<meta name="twitter:image:width" content="435">
<meta name="twitter:image:height" content="375">

Эти строчки задают размер изображения. Их можно оставить как есть.

Как открыть Twitter доступ к изображениям

Еще один важный момент — нужно открыть Твитер ботам доступ к изображениям. Для этого нужно прописать разрешение в файле robots.txt

Редактирование файла robots.txt через хостинг

1. зайдите на хостинг в корневую папку блога
2. найдите файл robotx.txt
3. откройте его для редактирования и впишите следующую строчку:

User-agent: Twitterbot
Allow: /wp-content/uploads/

Редактирование файла robots.txt через админку блога

Эта инструкция подходит для пользователей шаблоном AB-Inspiration и всем, кто установил плагин All In One Seo Pack. Этот способ поможет отредактировать файл robots.txt в админке блога.

1. Зайдите в админку блога
2. передите в меню в раздел «Инcтрументы SEO» — «Другие модули»
3. найдите блок «File Editor» и нажмите «Activate»
Снимок экрана 2014-10-09 в 18.20.17
4. у вас появится дополнительное меню «File Editor» — перейдите в него
seo
5. убедитесь, что открыта вкладка «Robots.txt»
robots

6. вставьте код в самом низу

User-agent: Twitterbot
Allow: /wp-content/uploads/

7. нажмите «Update robots.txt» кнопку внизу.

Как занести блог в белый список Twitter

И еще один маленький момент — занесение Вашего блога в белый список Твиттер. Для этого перейдите в Твиттер валидатор: http://cards-dev.twitter.com/validator. Вставьте в поле ссылку на ваш блог, и нажмите на кнопку «Preview card».

На экране Вы увидите вот такую запись — «АдресВашегоБлога.ru is no whitelisted».

twittercard

Нажмите на кнопку «Request Approval». Это необходимо для проверки блога и занесение его в белый список. На проверку может понадобиться некоторое время.

Через пару часов снова зайдите в Twitter валидатор и вставьте в поле адрес статьи. Если все сделано правильно, Вы увидите справа пред просмотр анонса.
validatortwitter

Ну что ж, теперь можно все протестировать в действии. Отправьте любую Вашу статью в Twitter. Зайдите в Twitter аккаунт и нажмите на ссылку «Показать сводку». Кстати, все Ваши старые твиты, тоже дополнятся анонсами статей :).

Теперь Ваши фаловеры в Twitter аккаунте будут видеть не только Твит из 140 знаков со ссылкой на статью, но и полный анонс статьи (как в facebook или google+).

Мой блог тоже сделан на шаблоне — конструкторе AB-inspiration и сейчас на нем установлена последняя версия. Поэтому  Вы можете протестировать этот механизм прямо сейчас. Кликните по кнопке Twitter и отправьте эту статью в свой аккаунт. Затем посмотрите, как Ваш твит будет выглядеть в Вашем аккаунт в Twitter.

Если у Вас что-то не получилось, пишите в комментариях. Буду рада помочь.

Как сделать так, чтобы в Twitter вместе с твитом уходил полноценный анонс статьи

   13 голосов
Средняя оценка: 5 из 5
Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:

Анфиса Бреус

Анфиса Бреус - разработчик сайтов на Wordpress с 2007 года. Создатель и разработчик универсального шаблона - конструктора "AB-Inspiration" для самостоятельного создания и профессиональной настройки сайтов на WordPress. Основатель клуба "Мастер WordPress". Спикер. Путешественница.

Пошаговый план по созданию бизнес-блога на WordPress
Оставьте свой комментарий:
26 комментариев
  1. Интересно, я люблю Твиттер, но о такой функции впервые слышу! Надо будет глянуть) Анфиса, вы часто сидите в Твиттере?)

  2. Татьяна

    Спасибо, Анфиса за такую мощную подсказку. Все сделала как Вы рекомендовали, мне вышла надпись, что страница перенесена успешно, метатеги были найдены, а последнее выделено красным и написано — ошибка карта не найдена. Карту при создании проверяла по Вашим урокам и она создана. Сейчас еще раз проверила.

    • Татьяна, у Вас установлена старая версия шаблона AB-Inspiration. Метатеги твиттер внесены в шаблон с версии 4.14. Вам нужно обновить шаблон до новой версии. В клубе новая версия появится в конце декабря. Но если Вы хотите обновлять шаблон автоматически, и сразу как только выходит новая версия, Вы можете приобрести ключ автоматического обновления. Ключ автоматического обновления для шаблона AB-Inspiration 4.7. Также Вы можете обратиться в тех поддержку по скайпу: mlmproekt.ru. Если Вы покупаете ключ наши специалисты обновят и донастроят Вам блог бесплатно. В дальнейшем, с ключом Вы сможете обновлять блог автоматически через админку.

  3. Анфиса! Добрый день! Сегодня и для меня добрый день. Вчера прочитала Вашу статью, все применила и была еще больше изумлена возможностями Вашего шаблона. Это же надо такое придумать! Заходить в файл Роботс из админки блога и делать вставку! Вчера, так как было поздно, я не увидела ананса статьи своей в Твиттере. А сегодня утром я была в полном восторге от того, что все получилось. Теперь и старые мои статьи в Твиттере можно увидеть по новому: с полным анонсом и рисунком! Огромное Вам СПАСИБО!!!!!

  4. Думала, ума не хватит самой сделать! Но все получилось! Опять я переступила через свой страх. Анфиса, огромное спасибо за такую фишечку! =)

  5. Здравствуйте, Анфиса! Спасибо большое за ваши статьи!!! Буду внедрять все эти новшества.
    У меня вопрос по файлу robots.txt. Этот файл не изменялся у вас?
    А то я установил ваш рекомендованный файл, когда шаблон менял и больше к нему не возвращался. Я смотрю у вас несколько другой на картинке. Host указан перед Sitemap для Гугла, а у меня Host показан после Яндекса в самом низу.

    Я смотрю у вас есть разрешения для показа картинок для Гугла и Яндекса. Их тоже надо вставить и мне? Только где их вставлять: в самом низу файла или для Гугла в верхней части, а для Яндекса в нижней? И для Твиттера где: в самом низу файла или внизу первой части для Гугла?
    И еще вопрос. У меня два аккаунта в Твиттер, их можно объединить? Один делал в Яндексе, а другой в Гугле.
    Заранее спасибо!

  6. У меня почему-то не появляется фото.

  7. Ольга

    Анфиса!!!! Низкий поклон. Столько сегодня получила информации. Как сделать так, чтобы в Твиттер вместе с твитом уходил полноценный анонс статьи- ПОЛУЧИЛОСЬ и это!!!!

  8. Анфиса, БлагоДарю за урок. Но у меня не получается добавить блог в белый список. В валидаторе появляется надпись Unable to render Card preview. И нет кнопки «Request Approval». Наверное, что-то не так делаю %)

    • Светлана, у Вас установлен старый шаблон 4.7. Сейчас уже 4.16. Коды для отправки в Твиттер вставлены в шаблон с версии 4.14. Новая версия появится в клубе в конце декабря. Вам нужно приобрести ключ автоматического обновления, чтобы обновлять шаблон автоматически и не ждать когда будет выпущен шаблон в клубе. С верии 4.7 до 4.16 было сделано уже много изменений и добавлений. Если есть вопросы по ключу, обратитесь в тех поддержку по скайпу: mlmproekt.ru
      Больше о ключе можно почитать здесь: Ключ автоматического обновления для шаблона AB-Inspiration 4.7

  9. С валидатором справилась после того, как добавила код в header.php *OK*

  10. Сергей

    Здравствуйте!
    Проблемка в следующем: Проверка твиттер вебсайта по гуглу выдаёт такое сообщение — «Описание веб-страницы недоступно из-за ограничений в файле robots.txt».
    Как его решить? Есть ли вход из ситуации?
    Спасибо заранее!

  11. Lukas

    Благодарю, все настроил как вы писали, вот только не могу разобраться твиты с кнопкой «Показать сводку» по умолчанию у всех свернуты? Если так, то скорее мало шансов что кто то его развернет, точнее так: много шансов что кто-то его развернет. =)

  12. Lukas

    Снимаю свой предыдущий вопрос, но думаю другим будет полезно.
    В общем ответ таков: сводки (summary) задумывались быть скрытыми. Команда разработчиков задали тот же вопрос админу из twitter`а, кто-то даже пригрозился убрать кнопки со своих сайтов. Думаю нужно было про эту важную вещь написать хотя бы в валидаторе.

    https://twittercommunity.com/t/twitter-cards-validated-and-preview-ok-but-photos-not-are-pre-expanded/25702/2

  13. Анфиса, здравствуйте. Попробовал вставить вашими кодами твитты с картинками. Нет картинок, есть только серый квадратик слева и анонс… А если у записи нет миниатюры то вставляет картинку, которую указал, но криво (режет и растягивает)…
    Как быть и почему всегда проблемы, вы специально вредничаете?))) :(

    • Сергей, спасибо за эксперименты и проработку материала. Да уж, ситуация. Посмотрела одну из ваших статей в Твиттер и результат такой:

      ERROR: Fetching the page failed because the request timed out. (Не удалось получить данные, поскольку истекло время ожидания запроса)

      Это значит Twitter bot не смог зайти на страницу (либо она не доступна, либо стоит запрет по ip).

      Посмотрела на западных форумах подобная проблема встречается у тех, у кого на хостинге есть запрет по IP.
      1. Проверьте файл .htaccess
      2. если в файле .htaccess нет запрета по ip, то нужно обратиться на хостинг спросить у них.

      Вот одно из обсуждений этой темы на твиттер форуме:
      https://twittercommunity.com/t/twitter-cards-error-fetching-the-page-failed-because-the-request-timed-out/50560/10

  14. милана

    Здравствуйте Анфиса! Я все сделала по инструкции, через время проверяю, а статья так и не выходит анонсом, фото прикрепила в вк комментариях

    • Милана, посмотрела ваш блог. В коде вижу следующие ошибки.
      1. у вас очень старый шаблон AB-Inspiration. Вы используете версию 4.16, а сейчас уже вышла 6.0.26
      2. не заполнена страница настроек шаблона Вставки. Эта самая важная страница для настроек. Без нее не будут работать социальные сети.
      3. у вас изображение вставлено не как миниатюра. В код подставляется именно миниатюра записи. Если вы просто вставили изображение в статью, она не отобразится в коде, соответственно не уйдет в твиттер.
      Очень важно все настроить по инструкциям. Все инструкции находятся в клубе. После покупки шаблона AB-Inspiration вы должны были зарегистрироваться в клубе.
      Если у вас есть вопросы по инструкциям и настройке шаблона, обратитесь пожалуйста в тех поддержку по скайпу: mlmproekt.ru. Также очень важно обновить шаблон до последней версии. Только после обновления и полной настройки по инструкциям можно будет тестировать отправку в социальные сети.

      • милана

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

        • Теперь вы поменяли шаблон :). В коде не вставлены мета для изображений. Прочитайте еще раз статью и делайте все по инструкции. Все получится. Ничего не пропускайте в коде.

          • милана

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

  15. Alex

    Спасибо! Сделал для своего сайт — все работает! Хорошо написано! Спасибо!

  16. Спасибо за статью! А можно ли молодой блог продвигать ретвитами, и как это скажется на поисковых роботах. Благодарю!

на Блоге
в Фейсбук
в Вконтакте