5 простых способов установить Twitter Cards на свой сайт

Итак, вы знаете, как в Твиттере, когда кто-то публикует ссылку на свой веб-сайт, Твиттер создает поле с миниатюрой изображения, заголовком, описанием и URL-адресом целевой страницы? Это очень распространено. Это делает стандартные сообщения со ссылками намного более заметными на временной шкале, немного демонстрирует назначение ссылки и побуждает к большему взаимодействию с пользователем.

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

• Сводная карта, как уже упоминалось, является предварительным просмотром веб-сайта. Это пользовательское изображение и текст, извлеченные из метаинформации, которые обеспечивают хороший предварительный просмотр того, что увидит пользователь, когда он нажмет на вашу ссылку.
• Сводная карточка (с большим изображением)… идентична сводной карточке. Я честно не знаю, почему такая разница. Нажмите на каждую из ссылок и просмотрите предварительно просмотренные твиты и узнайте, что я имею в виду. Я полагаю, что до последнего редизайна Twitter они могли выглядеть по-другому, но сегодня все выглядит как большая карточка с изображением.
• Карточку игрока не следует путать с бейсбольными или другими спортивными карточками. По сути, это большие карты изображений, за исключением того, что изображение представляет собой некую форму анимированного мультимедиа. В зависимости от того, как они отображаются, они могут быть небольшими окнами предварительного просмотра и описания, которые расширяются до медиафайлов, или просто медиафайлами, готовыми к воспроизведению. Как правило, это встроенное видео, такое как видео на YouTube, хотя веб-сайты становятся все более популярными.
• Карточка приложения — это поле, которое извлекает данные со страницы магазина приложений для создания настраиваемого окна продвижения приложения. Он показывает важные детали приложения, на которое ссылается твит, а также кнопку призыва к действию, чтобы пользователи сразу же установили приложение.

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

Основы твиттер-карт

У вас может быть только один тип карточки Twitter на веб-сайт или, по крайней мере, на веб-страницу, если вы хотите указать индивидуальный код для каждой страницы. Большинство людей выбирают базовую сводную карту с большим изображением и помещают код в заголовок своего шаблона сайта, чтобы он отображался на каждой странице. Некоторые сайты, такие как YouTube, размещают карточку игрока в своем заголовке. Главный вывод здесь заключается в том, что у вас может быть только один набор информации о карточке в метаданных заголовка на данной странице.

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

Сегодня я собираюсь рассказать вам, как добавить карточки Twitter на ваш сайт. Я не буду описывать каждый отдельный атрибут — документации Twitter достаточно много — я просто дам вам краткое изложение того, как это сделать для различных CMS.

Прежде чем мы начнем; для каждого метода установки вам нужна проверка. Чтобы убедиться, что вы все сделали правильно, после включения карты скопируйте URL-адрес этого валидатора. Это скажет вам, действительно ли карта работает.

1: WordPress

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

Рекомендуемый способ реализации карточек Twitter — использование официального плагина Twitter . Вы можете установить его так же, как и любой другой плагин, и оттуда вы сможете автоматически генерировать свои карточки Twitter. Он также включает кнопки обмена и твитов / подписок, встроенную обработку твитов и короткие коды для отслеживания аналитики. Вы можете прочитать документацию здесь и скачать сам плагин здесь.

Если вы не хотите использовать официальный плагин Twitter или если вы находитесь на хостинге WordPress.com, вы можете использовать Jetpack. В Jetpack нужно найти раздел «Общий доступ» и настроить его. Там будет раздел Twitter, где вы авторизуете свою учетную запись Twitter на своем веб-сайте.

Третий вариант — использовать плагин JM Twitter Cards. Этот плагин от Julien Maury добавляет совместимость с картами Twitter с некоторыми базовыми настройками. Вы можете выбрать, чтобы он использовал первое изображение на вашей странице, а не избранное изображение, вы можете предварительно просмотреть рендеринг своей карточки Twitter и настроить карточку для каждого сообщения при создании сообщения. Чтобы настроить плагин, перейдите на боковую панель и щелкните панель плагина на панели администратора. Выберите тип карты и заполните остальные поля своей учетной записью Twitter, учетной записью вашего сайта, длиной описания и всем, что вы хотите добавить.

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

2: Тамблер

Tumblr — удивительно популярная платформа для ведения блогов, о которой многие даже не догадываются, что она стала такой плодовитой, как сейчас. Сеть Tumblr выходит за рамки только блогов, отмеченных .tumblr.com; на самом деле, некоторые известные сайты используют Tumblr в качестве базовой архитектуры. Если у вас есть пользовательский домен, он работает так же, как и любая другая внутренняя архитектура. Или это?

Дело в том, что архитектура Tumblr не такая обширная и не такая настраиваемая, как что-то вроде WordPress. Вам нужно будет использовать некоторый пользовательский код , чтобы внедрить в свой блог специальные настраиваемые карточки Twitter. Вы можете прочитать код и его описание здесь, в ответе Дэна Левейля на Quora.

Здесь стоит отметить, что этот код требуется для ручной настройки ваших карт; не обязательно просто иметь сводные карточки. Twitter уже внес Tumblr.com в белый список для автоматического создания карточек при публикации ссылки, поэтому, если вам не нужна конкретная карточка с конкретными данными или вы не используете собственный домен, вы можете просто использовать то, что реализовано по умолчанию. Я бы прибегнул к его коду только в том случае, если у вас есть собственный домен для вашего сайта Tumblr или вам нужны данные, которые Twitter не собирает естественным образом.

3: Блогер

Установка карточек Twitter в блоге Blogger сводится к вашему шаблону. Я дам вам общие инструкции, но если ваш шаблон сайта слишком сильно отличается от нормы, вам придется разобраться с этим самостоятельно, основываясь на подсказках, которые я вам даю.

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

Затем нажмите кнопку «редактировать HTML» под предварительным просмотром вашего шаблона блога. Внутри этого кода выполните поиск «<b:includable id='post' var='post'>». Сохраните эту строку там, где она есть, но вставьте следующее прямо под ней:


<meta content='summary' name='twitter:card'/>
<meta content='@yourname' name='twitter:site'/>
<meta content='@yourname' name='twitter:creator'/>
<meta content='www.yoursite.com' name='twitter:domain'/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>
<meta expr:content='data:post.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>


Очевидно, вам нужно будет отредактировать данные выше самостоятельно. Измените @yourname на свое имя пользователя в Твиттере, измените www.yoursite.com на URL вашего сайта и убедитесь, что он правильный.

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

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

4: Джумла

У Joomla много общего с WordPress, поскольку это CMS с упором на настройку с помощью расширений, а не ограниченную платформу с косметическими улучшениями, такими как Tumblr или Blogger. Таким образом, существует несколько различных способов реализации карточек Twitter с использованием различных расширений Joomla.

Tweet Cards — это одно из расширений, которое, вероятно, предпочитает большинство людей. Его можно бесплатно загрузить и использовать, и он добавляет карточки Twitter на ваш веб-сайт на базе Joomla. Вот и все; в конфигурации нет ничего необычного, в его функциональности или реализации нет ничего особенного, он просто делает то, что написано на жестяной банке.

Второй вариант — профессиональное расширение Open Graph и Twitter Card Tags. Это более надежное расширение, которое добавляет теги как для Twitter, так и для Facebook. Он имеет множество параметров настройки, чтобы выбрать конкретные изображения и данные, которые вы хотите использовать для своих сообщений. Интеграция Open Graph с Facebook великолепна, плюс он добавляет дополнительные метаданные для Twitter и Google, когда они приходят. Единственным недостатком является то, что в качестве профессионального расширения это будет стоить вам денег. Однако это дешево; всего 7 евро за лицензию. Вы можете приобрести дополнительную поддержку, если хотите, но давайте будем честными; это просто метаданные, это прославленная работа по копированию и вставке для людей, боящихся кода. Вам не нужна поддержка.

Третий вариант, который у меня есть для вас, — это использование TEXTman, внешнего редактора сообщений для создания и публикации ваших статей на сайте Joomla. Вам не нужно ничего настраивать, чтобы карточки Twitter работали; просто используйте TEXTman в качестве редактора, и функция автоматически появится. Недостатком здесь является то, что это также профессиональный инструмент и гораздо более дорогой. Поскольку это полноценный текстовый редактор и связанные с ним инструменты, это большая лицензия с несколькими добавленными расширениями. Это будет стоить вам 99 долларов за подписку со всем или 40 долларов только за сам TEXTman и ограниченную лицензию на поддержку и обновление. Очень дорого, если все, что вам нужно, это карточки Twitter.

Наконец, конечно, вы можете использовать метод ниже или описанный в этом посте, чтобы реализовать их вручную.

5: Пользовательские системы управления контентом

Я уже опубликовал пример метаданных в коде выше. Это в основном тот же код, который вы вставляете в заголовок своего сайта, независимо от того, какую архитектуру вы используете. Настройте вещи в соответствии с потребностями вашего сайта и скопируйте код в заголовок вашего сайта. Неважно, где именно он находится, главное, чтобы он находился между тегами <head> и </head> в верхней части сайта.

Не забудьте настроить теги. Основные из них, на которые вам нужно обратить внимание, — это теги карты, сайта, создателя и домена. Они должны быть заполнены типом карты, которую вы хотите, идентификатором Twitter вашего сайта и создателя контента, а также URL-адресом вашего домена. Затем подтвердите карту после внесения изменений.

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