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

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

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

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

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

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

Здесь, в примере показано, как создать анонс с изображением на всю ширину. За тип анонса отвечает тип карты — 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»

4. у вас появится дополнительное меню «File Editor» — перейдите в него

5. убедитесь, что открыта вкладка «Robots.txt»

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».

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

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

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

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

Создайте сайт с нами — легко и быстро!

Нужна помощь по данным урокам или хотите заказать сайт на WordPress «ПОД КЛЮЧ»?

Обращайтесь в нашу службу поддержки 24/7

Нужен качественный хостинг для сайта на WordPress?
Рекомендую, проверенные годами, хостинг Timeweb:

а также, хостинг Beget: