Как создать карточку Twitter

1. Щебетать мета теги
2. Общие мета-теги
3. Изображение и видео META Tags
4. Подача заявки на утверждение в Твиттере
5. Twitter и Robots.txt
6. Образец твиттера

Одним из моих любимых социальных API был Open Graph API принят Facebook , Добавление всего нескольких мета-тегов на каждую страницу позволило стилизовать ссылки на мою статью и представлять их так, как я этого хотел, давая мне немного контроля над тем, как мой контент представлен в Facebook. Новый Твиттер API Twitter Cards позволяет использовать ту же идею: добавлять мета-теги на свои страницы, чтобы ссылки на ваш сайт были более информативными при твиттере. Внедрение мета-тегов Twitter Card на вашем сайте занимает пять минут, подача заявки на утверждение в Twitter занимает еще пять минут, и с этого момента ваш контент будет представлен более профессионально. Давайте начнем!

Щебетать мета теги

Существует три типа карт Twitter: резюме, фото и видео. Сводка Twitter Card предназначена для статей и текстового контента, в то время как фото и видеокарты говорят сами за себя (например, YouTube использует тип видеокарты). Есть несколько мета-тегов, используемых для всех типов карт, а затем еще несколько, которые зависят от типа карты. Все атрибуты имени тега META имеют префикс твиттер :.

Общие мета-теги

META-теги, которые вы используете во всех случаях, включают в себя:

• twitter: card - Тип создаваемой карты: сводка, фотография или видео.
• twitter: url - URL, который следует использовать для карты. Вероятно, это будет тот же URL, что и страница каноническая ссылка ,
• twitter: title - Название, как оно должно отображаться в Твиттере.
• twitter: description - 200-символьная сводка содержимого по указанному URL.
• twitter: image - типичный URL изображения для контента. Во многих случаях достаточно просто указать URL вашего логотипа.

Каждый из этих элементов получает свой собственный мета-тег, поэтому мета-теги Twitter Card для этой страницы будут выглядеть так:

Twitter также предоставляет мета-теги атрибуции для контента, предоставляя авторам возможность получить кредит в TwitterCard:

• twitter: site - имя пользователя Twitter, используемое данным сайтом, включая «@»
• twitter: creator - имя пользователя Twitter отдельного автора контента

Я использую один и тот же дескриптор для сайта и автора, хотя я мог бы использовать свою учетную запись @davidwalsh для создателя, если бы я хотел:

Это основные мета-теги, которые вы хотите использовать при создании Twitter-карт. Давайте посмотрим на теги, характерные для изображений и видеокарт!

Изображение и видео META Tags

Специфичные для носителей карты требуют немного больше информации о самом носителе, поэтому для изображений и видеокарт эти дополнительные теги полезны:

• twitter: image: width - ширина изображения
• twitter: image: height - высота изображения
• twitter: player - URL-адрес игрока с IFRAME, должен быть HTTPS
• twitter: player: width - Ширина проигрывателя ИМ
• щебетать: игрок: высота - высота игрока IFRAME
• twitter: player: stream - URL для потоковой передачи в виде видео
• twitter: player: stream: content_type - тип содержимого потока

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

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

Теперь, когда мета-теги Twitter Card установлены, следующим шагом является получение одобрения от Twitter.

Подача заявки на утверждение в Твиттере

Твиттер требует, чтобы ваш домен был одобрен, прежде чем они разрешат твиттер-карты для вашего сайта; это, скорее всего, бороться с нарушениями, как порнография и сайты, пропагандирующие незаконную деятельность. Когда ты подать заявку на одобрение Twitter Card вы предоставляете простую информацию о вашем сайте, например имя пользователя Twitter, связанное с доменом, карты, которые вы собираетесь использовать, и так далее:

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

Twitter и Robots.txt

Если у вас возникают проблемы с неправильным извлечением содержимого вашей карты, убедитесь, что файл robots.txt не блокирует Twitter. Бот Twitter удачно назван Twitterbot, поэтому проверьте файл robots.txt на наличие некорректных правил!

Образец твиттера

На следующем изображении показана карта Twitter для этого сайта:

Сначала я был расстроен идеей Твиттера о карточке Twitter, потому что предполагал, что она закроет платформу, и до сих пор никто не знает, так ли это. Что я знаю, так это то, что реализация мета-тегов Twitter Card невероятно проста и предоставляет владельцам бизнеса / сайта еще один способ эффективно продвигать свой сайт. Карты Twitter также удобны для пользователя, позволяя им воспроизводить видео в своем клиенте Twitter или просто предоставлять визуальные эффекты, связанные с данным твитом.

Хотите увидеть Twitter карты в действии? Чирикать ссылку на этот или любой другой пост на сайте, а затем нажмите / нажмите твит для подробного просмотра!

Похожие

Комментарии