БЛОГ 2410

Руководство для начинающих: как добавить карточки Twitter в WordPress

Руководство для начинающих: как добавить карточки Twitter в WordPress
Обсудим ваш проект?

Предлагаем обсудить, чем мы можем вам помочь. Забронируйте 15-минутную консультацию.

Поделиться статьей

Вы хотите добавить Twitter Cards на свой сайт WordPress? Twitter Cards позволяет прикреплять мультимедийные материалы к твитам, которые ссылаются на ваш контент. Это очень похоже на публикацию ссылки в Facebook, которая автоматически отображает предварительный просмотр с заголовком, сводкой и миниатюрой содержимого вашей страницы. В этой статье мы покажем вам, как добавить карточки Twitter в WordPress.

Добавление карточек Twitter на сайт WordPress
Добавление карточек Twitter на сайт WordPress Изображение с сайта wpbeginner.com

Как работают карточки Twitter?

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

Предварительный просмотр карточек Twitter
Предварительный просмотр карточек Twitter Изображение с сайта wpbeginner.com

Самым большим преимуществом твиттер-карт является то, что они увеличивают количество людей, подписанных на ваши аккаунты в твиттере за счет атрибуции контента. Часто люди публикуют твиты по вашим ссылкам, не указывая вам надлежащую ссылку.

Мы заметили это у некоторых популярных кураторов контента. Они будут твитнуть наши статьи без каких-либо сообщений через @abcили RT @cde. Это их право, но мы / вы как издатели особенно упускаем из виду, когда другие люди ретвитят ваш контент с чужими атрибутами.

Например, @def ретвитирует сообщение @abc без указания авторства, а другие люди ретвитируют @def. Тогда пользователи, просматривающие эти ретвиты, с большей вероятностью будут подписываться на @def, чем на @abc.

Часто кураторы контента делают это для того, чтобы твиты были короткими, и чтобы обеспечить ретвиты собственных твитов. С помощью твиттер-карт эта проблема решается, потому что вы получаете кредит на свой сайт за каждый твит, в котором упоминается ваша статья. Примечание: мы не выбираем кураторов контента. Это недостаток в 140 символов, и Twitter помогает исправить его с помощью карточек Twitter.

Например, когда Энни написала нашу статью в Твиттере, она не упомянула @abc. Но благодаря интеграции с нашими твиттер-картами мы получили полный кредит и риск. Обратите внимание на то, что на нем также есть кнопка перехода в один клик.

Превью ретвита с карточкой Twitter
Превью ретвита с карточкой Twitter Изображение с сайта wpbeginner.com

Теперь, когда вы знаете о преимуществах твиттер-карт, давайте посмотрим, как реализовать их в WordPress.

Как добавить карточки Twitter в WordPress

Есть два способа добавления твиттер-карт в WordPress. Давайте посмотрим на них обоих.

Метод 1: плагин Yoast SEO

Если вы используете плагин WordPress SEO by Yoast, то вам повезло. Yoast имеет встроенную интеграцию с твиттер-картами, поэтому включить ее можно в несколько кликов.

Просто перейдите на страницу «Социальные сети» страницы настроек Yoast SEO. Введите свое имя пользователя Twitter и сохраните изменения.

Добавьте имя пользователя twitter на страницу в соцсетях в настройках SEO
Добавьте имя пользователя twitter на страницу в соцсетях в настройках SEO Изображение с сайта wpbeginner.com

После этого перейдите на вкладку Twitter. На вкладке Twitter вам нужно установить флажок Добавить метаданные карты Twitter. Выберите тип карты по умолчанию. Вы можете выбрать отображение сводки или сводки с большим изображением.

Включение твиттер-карт
Включение твиттер-карт Изображение с сайта wpbeginner.com

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

Если у вас сайт с несколькими авторами, посоветуйте своим авторам заполнить эту часть в своем профиле. Таким образом, каждый конкретный автор также получает признание за свою работу. См. Пример ниже:

Предварительный просмотр карточек Twitter с указанием создателя или автора контента
Предварительный просмотр карточек Twitter с указанием создателя или автора контента Изображение с сайта wpbeginner.com

Это все, что вы успешно добавили метатеги Twitter Cards на свой сайт WordPress.

Этот метод, безусловно, самый простой. Поскольку мы используем WordPress SEO от Yoast на всех наших веб-сайтах, мы используем этот метод.

Метод 2: жестко запрограммируйте это самостоятельно

Этот метод требует добавления кода в вашу тему или файлы дочерней темы. Просто откройте файл header.php и добавьте этот код непосредственно перед тегом </head>.

<?php
#twitter cards hack
if(is_single() || is_page()) {
    $twitter_url    = get_permalink();
    $twitter_title  = get_the_title();
    $twitter_desc   = get_the_excerpt();
    $twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
    $twitter_thumb  = $twitter_thumbs[0];
    if(!$twitter_thumb) {
        $twitter_thumb = 'http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75';
    }
    $twitter_name   = str_replace('@', '', get_the_author_meta('twitter'));
    ?>
<meta name="twitter:card" value="summary" />
<meta name="twitter:url" value="<?php echo $twitter_url; ?>" />
<meta name="twitter:title" value="<?php echo $twitter_title; ?>" />
<meta name="twitter:description" value="<?php echo $twitter_desc; ?>" />
<meta name="twitter:image" value="<?php echo $twitter_thumb; ?>" />
<meta name="twitter:site" value="@libdemvoice" />
    <?
    if($twitter_name) {
    ?>
    <meta name="twitter:creator" value="@<?php echo $twitter_name; ?>" />
    <?
    }
}
?>

Источник: Райан Каллен @artesea

Если вы не знаете, как работать с PHP или у вас возникли проблемы с методом 2, используйте метод 1.

Заключительный шаг: тестирование и проверка

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

Просто перейдите на страницу Card Validator на сайте разработчиков Twitter. Введите URL-адрес любого сообщения с вашего сайта WordPress и нажмите кнопку предварительного просмотра карты.

Тестирование предварительного просмотра карт Twitter с помощью Cards Validator
Тестирование предварительного просмотра карт Twitter с помощью Cards Validator Изображение с сайта wpbeginner.com

Twitter покажет вам предварительный просмотр вашей карточки Twitter.

Обновление: раньше вам нужно было подавать заявку на участие в Twitter Cards. Однако Twitter внедрил систему, которая автоматически заносит домены в белый список, когда вы тестируете их с помощью валидатора или просто делитесь URL-адресом в Twitter.

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

Свяжитесь с нами.

Узнайте, чем мы можем быть для вас полезны.

Контакты
Руководство для начинающих: как добавить карточки Twitter в WordPress | Блог 2410

Агентство веб разработки.

Услуги программирования и веб разработки по фиксированной цене. Специализация: WordPress, разработка B2B решений и создание кастомных скриптов.

WordPress

Разработка шаблонов, плагинов, интернет магазинов на WooCommerce, создание сайтов

Подробнее

B2B решения

CRM, ERP, внутренние системы, автоматизация, калькуляторы, SaaS и индивидуальные решения

Подробнее

Программирование

Разработка кастомных скриптов, API, интеграции, Zapier, Integromat, автоматизация

Подробнее

Подписка

Безлимитные услуги графического дизайна и веб разработки по фиксированной цене

Подробнее