Когда вы публикуете сообщение в социальной сети, такой как Facebook, оно сканирует URL-адрес, которым вы делитесь, и возвращает определенную информацию для отображения страницы в вашем фиде. Facebook получит заголовок страницы, описание страницы и уменьшенное изображение для страницы. Вы можете изменить информацию, которую получает Facebook, используя метатеги открытого графика .
Это просто метатеги, которые вы можете добавить в заголовок вашей страницы. Когда Facebook сканирует вашу страницу, чтобы получить заголовок, описание и изображения, она будет искать эти теги, если они есть, то вместо этого она будет использовать содержимое этих тегов. заголовка страницы. Это означает, что вы можете полностью настроить заголовки страниц только для Facebook.
В Twitter также есть метатеги, которые вы можете использовать для настройки сообщения в Twitter. Они называются карточками Twitter, и это позволяет владельцам сайтов добавлять больше описательного текста в свои ссылки, когда они публикуются в Twitter.
Когда ссылка публикуется в Твиттере, она ограничена пределом в 140 символов для всех твитов, но во всех твитах вы можете расширить твит, чтобы узнать о нем больше. В этом разделе вы найдете информацию о том, сколько людей ответили на твит, переписали его и добавили в избранное. Но если у вас есть метатеги Twitter, добавленные к вашему заголовку, тогда вместо того, чтобы просто просматривать информацию о повторных твитах и избранном, вы также увидите фрагмент страницы с заголовком, описанием и изображением.
Поскольку вы можете публиковать ссылки различных типов в Twitter, например изображения и видео, у вас могут быть разные типы карт Twitter, одна из них предоставит вам фрагмент страницы, другая отобразит изображение, последняя — воспроизведение мультимедиа. музыка или видео.
Какой тип отображаемой карты также можно определить с помощью метатега.
<meta name="twitter:card" content="summary">
Чтобы отобразить фрагмент страницы, значение атрибута содержимого должно быть кратким . Для изображения значение должно быть изменено на фото . Чтобы изменить это для отображения медиаплеера для видео или музыки, установите значение для проигрывателя .
Мета-теги карты Twitter
Существуют разные метатеги, которые вы можете использовать в зависимости от типа используемой вами карты Twitter.
Сводная карта
- twitter: card — тип карты, который будет одним из «итогов», «фото» или «игрок».
- twitter: url — канонический URL-адрес содержимого карты.
- twitter: title — Название вашего контента, как оно должно отображаться на карточке.
- twitter: description — описание содержимого не более 200 символов.
- twitter: image — URL-адрес изображения, представляющий контент.
<meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@paulund_"> <meta name="twitter:creator" content="@paulund_"> <meta name="twitter:url" content="http://www.paulund.co.uk"> <meta name="twitter:title" content="Page Title"> <meta name="twitter:description" content="Page Description"> <meta name="twitter:image" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg">
Фото карта
- twitter: card — установите это значение на фото
- twitter: url — канонический URL-адрес содержимого карты.
- twitter: title — Название вашего контента, как оно должно отображаться на карточке.
- twitter: description — описание содержимого не более 200 символов.
- twitter: image — URL-адрес изображения, представляющий контент.
- twitter: image: width — задайте исходную ширину изображения, это может быть не тот размер, который Twitter использует для его отображения, но это поможет Twitter сохранить пропорции изображения, если ему нужно изменить размер изображения.
- twitter: image: height — определяет исходную высоту изображения.
<meta name="twitter:card" content="photo"> <meta name="twitter:site" content="@paulund_"> <meta name="twitter:creator" content="@paulund_"> <meta name="twitter:url" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg"> <meta name="twitter:title" content="Image Title"> <meta name="twitter:description" content="Image Description"> <meta name="twitter:image" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg"> <meta name="twitter:image:width" content="500"> <meta name="twitter:image:height" content="500">
Карта игрока
- twitter: card — Установите это значение для игрока
- twitter: url — канонический URL-адрес содержимого карты.
- twitter: title — Название вашего контента, как оно должно отображаться на карточке.
- twitter: description — описание содержимого не более 200 символов.
- twitter: image — URL-адрес изображения, которое будет использоваться в качестве эскиза видео.
- twitter: player — URL игрока
- twitter: player: stream — URL видео для потоковой передачи на плеере
- twitter: player: width — ширина рамки для отображения плеера
- twitter: player: height — высота рамки для отображения плеера
<meta name="twitter:card" content="player"> <meta name="twitter:site" content="@paulund_"> <meta name="twitter:url" content="http://www.paulund.co.uk/example-video.mp4"> <meta name="twitter:title" content="Title Of Video"> <meta name="twitter:description" content="Description of the video"> <meta name="twitter:image" content="http://example.com/example-video-thumbnail-image.jpg"> <meta name="twitter:player" content="https://www.paulund.co.uk/example-player"> <meta name="twitter:player:stream" content="http://www.paulund.co.uk/example-video.mp4"> <meta name="twitter:player:width" content="500"> <meta name="twitter:player:height" content="250">
Facebook Открыть График Теги
Если вы уже используете теги открытого графика Facebook, у вас будет что-то вроде этого в заголовке вашего HTML.
<meta property="og:url" content="http://www.paulund.co.uk/example-url"> <meta property="og:title" content="Example Title"> <meta property="og:description" content="Example Description"> <meta property="og:image" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg">
Поскольку метатеги карт Twitter были основаны на тегах открытого графика , Twitter фактически использует их как запасной вариант. Сначала он будет искать теги карты Twitter, если их там нет, то он будет искать теги открытого графика и использовать их для заголовка, описания и изображений. Это означает, что вам не нужно дублировать теги с той же информацией, что и теги открытого графика.
Это означает, что вы можете иметь это в заголовке вашего сайта, и поиск будет работать отлично.
<meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@paulund_"> <meta name="twitter:creator" content="@paulund_"> <meta property="og:url" content="http://www.paulund.co.uk/example-url"> <meta property="og:title" content="Example Title"> <meta property="og:description" content="Example Description"> <meta property="og:image" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg">
Для просмотра обновленной информации о карте Twitter посетите документацию Twitter.