Как добавить Twitter Cards на сайты WordPress

Публикация контента в Твиттере — отличный способ привлечь трафик на ваш сайт. Тем не менее, сам твит на самом деле не предоставляет много информации о публикуемом контенте. В лучшем случае стандартный твит будет просто содержать небольшое количество описательного текста, написанного пользователем, ссылку на контент, загруженное вручную изображение и, возможно, один или два #хэштега или @упоминания.

Все вполне стандартные вещи, ни одна из которых не извлекалась динамически. Кроме того, если ваши твиты ретвитят, ваш исходный твит (и его контент) получают минимальную известность – карты Твиттера меняют все это. Twitter Cards предлагает возможность автоматически извлекать контент из URL-адреса, публикуемого в Твиттере, с использованием популярного протокола Open Graph.

Контент, такой как отрывок текста, изображение или даже видео, а также многое другое, можно динамически получать и отображать на соответствующей карточке Twitter. Мало того, каждая карточка также будет отображать прямые ссылки на ваше имя в Твиттере и даже позволит подписаться в один клик. Это означает, что если ваши твиты ретвитят, ваша информация (и общий контент) находится в удобном месте для привлечения внимания, а не пользователь, делающий ретвит. Это идеально подходит для увеличения количества ваших подписчиков в Твиттере.

Два способа интеграции Twitter Cards

Давайте подробнее рассмотрим, как мы будем реализовывать эту революционную функцию на вашем сайте WordPress. Внедрить Twitter Cards в WordPress можно несколькими способами. Один из них — с помощью плагина. Во-вторых, изменив код вашей темы с помощью дочерней темы.

Первый вариант, который мы рассмотрим, — это использование плагина. Существует несколько плагинов, которые позволяют легко внедрить Twitter Cards на ваш веб-сайт WordPress. Для этой цели просто скачайте и установите один из доступных и популярных плагинов. Плагины можно загрузить через каталог плагинов или на панели управления WordPress, когда вы перейдете в раздел «Плагины» .

Мета-плагин Twitter Cards

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

Теперь вы можете приступить к настройке плагина Twitter Cards Meta. Заполните данные, относящиеся к вашей учетной записи Twitter, добавьте URL-адрес изображения по умолчанию и выберите, какое изображение вы хотите отображать на своих карточках Twitter. Наконец, сохраните ваши параметры, нажав кнопку «Сохранить параметры» .

SEO-плагин Yoast

Один из самых популярных плагинов для WordPress — Yoast SEO. В настоящее время насчитывается более миллиона активных установок. Этот мощный плагин WordPress поставляется со встроенной интеграцией Twitter Card. У большинства людей этот плагин установлен для SEO-оптимизации. Так что, скорее всего, эта конкретная функция уже доступна вам, даже не подозревая об этом.

Загрузите и установите плагин как обычно и откройте меню администратора SEO => Социальные сети на панели управления WordPress. Введите свое имя пользователя Twitter в поле «Имя пользователя Twitter» и нажмите кнопку «Сохранить изменения» . Вверху страницы расположены вкладки для различных социальных сетей. Теперь щелкните вкладку Twitter , чтобы открыть страницу параметров Twitter с плагином Yoast SEO.

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

Последний шаг — добавить свое имя пользователя Twitter в учетную запись пользователя вашего сайта. Вы можете сделать это через меню администратора «Пользователи => Ваш профиль» на панели управления WordPress. Прокрутите страницу своего профиля пользователя вниз, пока не увидите мета-заголовок «Для карт Twitter» . Там вы можете добавить свое имя пользователя Twitter в соответствующее поле. Обязательно нажмите кнопку «Обновить профиль» , чтобы правильно сохранить изменения.

Плагин JM Twitter Cards

JM Twitter Cards — еще один плагин, который позволяет легко интегрировать Twitter Cards с вашим веб-сайтом WordPress. Он поддерживает все типы карт и не конфликтует с Yoast SEO. Это позволяет вам по-прежнему использовать другие функции Yoast, если вы предпочитаете использовать этот плагин для своих нужд Twitter Card.

После активации плагина вы можете посетить страницу параметров на панели управления WordPress, нажав JM Twitter Cards . Просто заполните запрошенные данные, такие как ваше имя пользователя в Твиттере, тип карты, размер изображения. Теперь загрузите резервное изображение, которое будет отображаться, если изображение публикации не существует.

Вы также можете предоставить дополнительные данные, которые будут связаны с различными магазинами мобильных устройств, такими как Google Play и Apple Store . Это позволит вам самостоятельно рекламировать приложения , которые могут быть связаны с публикуемым контентом. Используя вкладку «Типы сообщений» в верхней части страницы параметров, вы также можете выбрать, будут ли ваши сообщения, страницы и/или вложения предлагать вам возможность дальнейшей настройки каждой из ваших карточек Твиттера для каждого сообщения.

Добавьте Twitter Cards без плагинов

Как разработчики тем, так и люди, которые просто хотят испачкать руки кодом, могут сравнительно легко внедрить Twitter Cards в свою тему WordPress. Используя дочернюю тему конкретной активированной вами темы, просто добавьте следующий код в ее файл function.php :

функция my_twitter_cards() {
    если (is_singular()) {
        глобальный $пост;
	$twitter_user = str_replace('@', '', get_the_author_meta('twitter'));
	$twitter_url = get_permalink();
	$twitter_title = get_the_title();
	$twitter_excerpt = get_the_excerpt();
	$twittercard_image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
	$twittercard_thumb = $twittercard_image[0];
	если (!$twittercard_thumb) {
	    $twittercard_thumb = 'https://www.example.com/default-image.png';
	}
	если ($twitter_user) {
	    echo '<meta name="twitter:creator" value="@' . esc_attr($twitter_user) . '" />' . "\п";
	}
	echo '<meta name="twitter:card" value="summary" />' . "\н";
	echo '<meta name="twitter:url" value="' . esc_url($twitter_url) . '" />' . "\п";
	echo '<meta name="twitter:title" value="' . esc_attr($twitter_title) . '" />' . "\п";
	echo '<meta name="twitter:description" value="' . esc_attr($twitter_excerpt) . '" />' . "\п";
	echo '<meta name="twitter:image" value="' . esc_url($twittercard_thumb) . '" />' . "\п";
	echo '<meta name="twitter:site" value="@mhthemes" />' . "\п";
    }
}
add_action('wp_head', 'my_twitter_cards');

Все, что мы здесь сделали, — это создали функцию PHP под названием my_twitter_cards . Эта функция подключается к действию wp_head и присваивает некоторые данные из любого сообщения, просматриваемого в данный момент, некоторым переменным PHP. Не забудьте изменить значение $twitter_user в соответствии с вашими личными потребностями и указать URL-адрес резервного изображения для $twittercard_thumb . Эти данные затем используются в качестве метаданных сообщений. Именно эти данные Twitter Cards извлекает и отображает на экране.

Проверка ваших URL-адресов

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

В некоторых случаях (в зависимости от выбранного вами типа карты) ваш домен будет автоматически добавлен в белый список . Вот почему настоятельно рекомендуется выполнить этот процесс проверки. Вы можете сделать это, скопировав и вставив URL-адрес одного из ваших сообщений в валидатор Twitter Card. После проверки вы увидите предварительный просмотр того, как будет отображаться эта конкретная публикация после публикации в Twitter. Теперь вы готовы использовать Twitter Cards и делиться своим контентом со всем миром!