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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

Сообщить об ошибке

Отменить
1114
How-to Читать 7 минут 21 марта 2019

Как внедрить на сайте микроразметку Twitter Card

Как установить и настроить разметку Twitter Card на сайте
ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — МИКРОРАЗМЕТКА
Инструкцию одобрил
Руководитель SEO отдела в COMPAS Agency
Разметка Twitter Card позволяет правильно разметить контент для сниппета статьи в Твиттере. Система сканирует страницу и определяет контент: заголовок, изображение и анонс. Как именно будет отображаться пост в Twitter, зависит от настроек микроразметки.

Что такое микроразметка Twitter Card

Микроразметка для социальных сетей помогает отредактировать внешний вид поста при шеринге его с сайта. Чем красивее оформлена карточка поста — тем больше будет по ней кликов.

Хотя ссылки из соцсетей не добавляют веса сайту, это не значит, что они не влияют на продвижение. Ссылки на сайт, которые размещают пользователи в своих аккаунтах, считаются упоминанием для поисковых роботов.
При шейре в соцсеть статьи со ссылкой на веб-сайт пост автоматически получит красивое название, описание и картинку. А это — дополнительная возможность получить трафик.
Так как каждая соцсеть имеет собственные взгляды на атрибуты и их применение, то единого общего стандартного набора не разработано. Для социальных сетей Facebook и ВКонтакте используют микроразметку Open Graph — уже готовые правила структурирующих данные.

Твиттер имеет несколько иную микроразметку, чем другие социальные сети, однако использует похожие теги с Open Graph. Это позволяет избежать дублирования. Тем более, когда краулер Twitter Bot не находит разметки Twitter Card, он исходит из данных, которые структурировала Open Graph.

Так выглядит разметка Twitter Card:
Разметка Twitter Card в коде страницы
А так — микроразметка Open Graph вместе с Twitter Card (в конце):
Разметка Open Graph в коде страницы
Различие между этими разметками на примере элемента кода можно посмотреть в справке Twitter для разработчиков:
Разница между Open Graph и Twitter Card
Twitter Card не использует префикс «og», который требуется Open Graph в обязательном порядке, взамен используется префикс «twitter:» в атрибуте имени мета-элемента HTML.

Зачем нужна настройка разметки Twitter Card

1
Контроль. Вы сами решаете, что может подгрузить соцсеть вместе с гиперссылкой на сайт.
2
Расширенный сниппет. Вы сможете добавить больше информации по сравнению с обычным твитом.
3
Прикрепление медиафайлов и гифки. Вы можете прикреплять медиафайлы к твиту автоматически.
Внедрить микроразметку можно автоматически или вручную. Основные обозначения в коде микроразметки Твиттера:

  • twitter:card — необходимый элемент, который сообщает системе, к какому типу относится карточка. Обычно по умолчанию пишут «summary».

  • twitter:site — необязательный элемент, который прикрепляет твит к конкретному пользователю социальной сети, к его автору.

  • twitter:title — необходимый элемент, чтобы прописать заголовок. Максимальный объем — 70 символов.

  • twitter:description — описание или краткий анонс. Необязателен, должен отличаться от twitter:title. Объем не может превышать 200 символов.

  • twitter:image — позволяет разметить изображение, которое будет выведено в сниппете. Здесь необходимо указать URL-адрес картинки с размером не менее 144x144, пропорциональным соотношением сторон 1:1. Максимально допустимый размер — 4096x4096 пикселей, вес — до 5 мегабайт. Форматы: JPG, PNG, WEBP, GIF.

  • twitter:image:alt — отвечает за текстовое сопровождение изображения, название для картинки, кратко описывающее содержимое.

Пример фрагмента без разметки и с ней:
Статья с разметкой и без нее
В случае с GIF-форматом использоваться может только первое изображение, так как SVG не поддерживается этой системой.

Не рекомендуется для Твиттера использовать общие изображения: логотип, фотокарточку автора, иную визуализацию, охватывающую сразу несколько страниц веб-сайта. Делайте интересные иллюстрации, которые будут интриговать или дополнять запись.

Полный список рекомендаций находится в справочной Твиттера для разработчиков.

Вы также можете самостоятельно заключить в теги определенные данные со страниц сайта, вручную. Для этого найдите в корневой папке сайта файл index.php и пропишите в нем нужный код, один раз для всех страниц. Микроразметка для Твиттера используется вместе с Open Graph, поэтому располагают их обычно рядом.

Как добавить микроразметку Twitter Card автоматически

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

Для сайта на WordPress такая функциональность есть у популярных плагинов для SEO оптимизации — Yoast, All in One SEO других. Перед внедрением разметки Twitter Card следует включить разметку Open Graph.

Для OpenCart можно использовать в этих целях модуль Open Graph Meta. Для Joomla можно использовать Tweet Cards. А для Bitrix разработан модуль Open Graph и Twitter Cards.

Плагин Yoast SEO для WordPress

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

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

Плагин All in One SEO Pack для WordPress

Включите Open Graph разметку, которая находится в разделе Feature Manager → Social Meta, и задайте необходимые параметры.

В настройках для Твиттера укажите тип карточки, который может быть кратким описанием («Summary») или описанием, сопровождаемым крупной картинкой («Summary Large Image»). Если вы хотите связать пост с его автором, то укажите это в поле «Show Twitter Author». Также плагин позволяет указать название сайта и связанный с веб-сайтом аккаунт.
Настройки твиттера в плагине All in One SEO Pack для WordPress
Модули микроразметки для OpenCart: OCMOD, microdata.
Для Joomla: item rating.
Для Битрикс: schema.org, coffeediz.schema.org.

Валидация микроразметки

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

Вставьте URL-адрес страницы, которую желаете протестировать, в поле, отмеченное на скриншоте ниже. После этого нажмите на кнопку «Preview Card».
Валидация микроразметки Twitter Card
В результате проверки вы сможете увидеть превью твита на примере своего аккаунта и краткий отчет теста в разделе «Log»:
Twitter Card валидатор

Заключение

Разметка структурирует информацию для корректного отображения в выдаче и соцсетях. Twitter Card — микроразметка, которая работает только с Твиттером.

В результате вы получите предпросмотр твита, оцените и отредактируете его вид в ленте пользователя.
Эта статья — часть модуля «Список задач» в Serpstat
«Список задач» в Serpstat
«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач»

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Оцените статью по 5-бальной шкале

5 из 5 на основе 1 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Хотите узнать новые фишки по интернет-маркетингу?
Подпишитесь на нашу рассылку — только полезные статьи, реальные кейсы и новости Serpstat раз в неделю.

Поделитесь статьей с вашими друзьями

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

Свяжитесь с нашей службой поддержки
Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
Выберите один из проектов

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

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

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

Пригласить
Просмотр Редактирование

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

Я хочу больше лимитов