Артём Мáлков

Микроразметка Open Graph для Twitter

16 дек2 комм

Социальные сети играют большую роль в продвижении сайтов. И в них есть свои «секреты». Так, например, в Twitter, когда вы делитесь ссылкой своего сайта, отображение выглядит примерно таким образом:

Микроразметка Open Graph для Twitter

Не очень привлекает внимание, правда? Именно поэтому Twitter предоставляет web-мастерам свою собственную разметку Open Graph - «Twitter Cards», с помощью которой вы можете настроить то, как будут отображаться ссылки вашего сайта в этом сервисе микроблогов. Open Graph поддерживают множество и других социальных сетей, таких как VK, Facebook, Google+ и другие. Но я бы хотел сделать акцент именно на Twitter, т.к. он имеет особый вид разметки.

Twitter предлагает порядка 4 типов представлений страниц вашего сайта, в зависимости от нужд. Это: Summary Card, Summary Card with Large Image, App Card и Player Card.

Для подключения нужного вам типа копируйте соответствующие теги и вставляйте их между <head></head> в код вашего сайта, если же нет такой возможности или правка кода вызывает у вас затруднение, то вставляйте его прямо на нужные вам страницы, выше описания:

Микроразметка Open Graph для Twitter

А теперь более подробно рассмотрим все типы.

1. Summary Card

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

Микроразметка Open Graph для Twitter

Микроразметка:

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@ваш аккаунт в Twitter">
<meta name="twitter:title" content="Название статьи">
<meta name="twitter:description" content="Краткое описание">
<meta name="twitter:image" content="Ссылка на изображение">

Информация:

Заголовок: 70 символов.
Описание: 200 символов.
Изображение: минимум 120×120 пикселей и не больше 1 мегабайта.

2. Summary Card with Large Image

Второй по популярности тип. Отличие от предыдущего - имеет больший размер изображения.

Микроразметка Open Graph для Twitter

Микроразметка:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ваш аккаунт в Twitter">
<meta name="twitter:title" content="Название статьи">
<meta name="twitter:description" content="Краткое описание">
<meta name="twitter:image:src" content="Ссылка на изображение">

Информация:

Заголовок: до 70 символов.
Описание: до 200 символов.
Изображение: минимум 280x150 пикселей и не больше 1 мегабайта.

3. Player Card

Как вы поняли из названия - основой карточкой является видео. Этот тип, к сожалению, просто так на сайте не применить, поскольку ресурс должен быть с https протоколом и пройти модерацию в Twitter (подать заявку на модерацию можно здесь. Для этого нужно проверить хотя бы 1 страницу с этой разметкой, после чего появится кнопка «Request Approval», нажав на которую вам будет предложена форма для заполнения).

Микроразметка Open Graph для Twitter

Микроразметка:

<meta name="twitter:card" content="player" />
<meta name="twitter:site" content="@ваш аккаунт в Twitter" />
<meta name="twitter:title" content="Название видео" />
<meta name="twitter:description" content="Краткое описание" />
<meta name="twitter:image" content="Ссылка на кадр из видео" />
<meta name="twitter:player" content="Ссылка на плеер" />
<meta name="twitter:player:width" content="480" />
<meta name="twitter:player:height" content="480" />
<meta name="twitter:player:stream" content="Ссылка на видео" />
<meta name="twitter:player:stream:content_type" content="video/mp4" />

Для подробной настройки этого типа, в конце статьи мы прилагаем официальный пример разметки. В нем вы найдете необходимые файлы (видео, изображения и пример страницы). Не забудьте в файле page.html прописать необходимую информацию в мета-теги, включая ссылки на ваш сайт.

Важно! Для того, чтобы проверить работоспособность примера - все файлы должны находиться на вашем сайте.

Информация:

Описание: до 200 символов.
Видео: до 640х480 пикселей, 30 fps.
Аудио: AAC.

4. App Card

Этот тип отлично подойдет для владельцев мобильных приложений. С помощью такой разметки, можно указать все возможные варианты существования приложения для различных платформ, таких как android, iphone и ipad, за счет чего в Twitter появятся ссылки на скачивание приложения в официальных магазинах Google Play и iTunes. И, при всем этом, будет выведена основная информация программы: название, изображение, рейтинг и количество отзывов.

Микроразметка Open Graph для Twitter

Микроразметка:

<meta name="twitter:card" content="app" />
<meta name="twitter:site" content="@ваш аккаунт в Twitter" />
<meta name="twitter:description" content="Описание приложения" />
<meta name="twitter:app:country" content="Страна разработчика, например US" />
<meta name="twitter:app:name:iphone" content="Название приложения" />
<meta name="twitter:app:id:iphone" content="Id приложения" />
<meta name="twitter:app:url:iphone" content="Ссылка на приложение" />
<meta name="twitter:app:name:ipad" content="Название приложения" />
<meta name="twitter:app:id:ipad" content="Id приложения" />
<meta name="twitter:app:url:ipad" content="Ссылка на приложение" />
<meta name="twitter:app:name:googleplay" content="Название приложения" />
<meta name="twitter:app:id:googleplay" content="Id приложения" />

Стоить отметить, что если ваше приложение, существует, например, только в магазине Google Play, то теги нужно написать только для этого сервиса.

Информация:

Описание: до 200 символов.

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

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

Вот с помощью такой несложной хитрости мы с вами повысили привлекательность вашего сайта в Twitter.

Файл
Размер
Ссылка
player.zip
1,07 Mb
Скачать с сервера
Рекомендуем к просмотру
Круглые иконки социальных сетей PNG
Графика и дизайн
Кнопки «Twitter» HTML
Модули и скрипты
Как правильно рассказать о своем новом сайте?
Статьи и советы
2
комментария
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 5
    1066
      •  Команда Pandoge
    3 июл в 23:18

    Mika, очень хорошо влияет на поведенческие факторы и привлекает внимание пользователей. Так что ставьте - лишним не будет wink

    • 1
    766
      •  Гости
    3 июл в 19:34

    А на сео есть какое-то влияние от вида ссылки?

    Можно ли сразу ко всем записям поставить сразу?

Подняться наверх
«Pandoge» - помощник вебмастера