ZorNet.Ru — сайт для вебмастера » HTML и CSS » Twitter Cards извлечь стильное оформление

Twitter Cards извлечь стильное оформление

Twitter Cards извлечь стильное оформление
Это статья для тех у кого есть социальные кнопки на сайте. И здесь мы разберемся как красиво оформить твит на уже социальном сайте. Все делается по одному клику, и если материал интересен, то мы его переносим на свою страницу социального сайта Twitter.

Теперь давайте разберемся, что вообще означает Twitter Cards и для чего он.

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

Чтоб разместить ту или иную информацию, тут безусловно вам нужен аккаунт на Twitter, где как раз вы будете все размещать.

Давайте посмотрим, если вы прямо сайта разместите, да и вообще как основном получается.

Twitter Cards и как извлечь дополнительные преимущества

После установки тегов, у вас сформируется уже совершенно другое оформление.

Twitter Cards, или как сделать сводку в Твиттере

Это обозначение:

twitter:card - вид контента (может быть summary, photo или player);
twitter:site - Название сайта
twitter:title - Название статьи
twitter:url - ссылка на статью
twitter:description - описание статьи
twitter:creator - Автор
twitter:image:src - Ссылка на изображение
twitter:domain - Ссылка на ваш сайт

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

Код
<meta name="twitter:card" content="summary"/>  
  <meta name="twitter:site" content="Сайт по теме как создать сайт uCoz с различными интересными решением."/>  
  <meta name="twitter:title" content="$ENTRY_TITLE$">  
  <meta name="twitter:url" content="http://uconet.ru$ENTRY_URL$"/>  
  <meta name="twitter:description" content="$BRIEF$" />  
  <meta name="twitter:creator" content="Дмитрий Разведос"/>  
  <meta name="twitter:image:src" content="http://zornet.ru$IMG_URL1$"/>  
  <meta name="twitter:domain" content="zornet.ru"/>


Здесь мы видим BRIEF, этот оператор отвечает за краткое описание на каталоге файлов. Если у вас подключено CEO настройка, то здесь нужно заменить SEO_DESCRIPTION, что также в ручную прописывается, когда вы заливаете на сайт или пишите статью. Но главное, что здесь можно на все модули применить, кроме форума. Если нет этой настройки, так как ее нужно покупать, то только можно поставить на каталог файлов, просто там оператор одет на этом модуль, что у других не предназначено.

Установка происходит в head, что идет в начале странице, смотрим на изображение.

Установка тегов Twitter Cards

PS - не приходилось устанавливать, но ДимДимыч установил, и как можете заметить на представленном изображение к материалу, то все работает как нужно и оформление идет как на сайте вид материала и построено понятно для читателя.
19 Декабря 2016 Просмотров: 1460 Комментариев: (8)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 8
FeStemBer
FeStemBer 19 Декабря 2016 03:141
0
Вот это интересно, в первые встречаюсь с таким, так можно поставить и постить еще в твитторе, но для начало страницу нужно сделать и немного читателей набрать.
Kolinkor
Kolinkor 19 Декабря 2016 03:182
0
Можно поставить, но и как понимаю для других социальных сетей нужно теги прописывать.
tsakonter
tsakonter 19 Декабря 2016 03:253
0
А есть теги, которые можно поставить и они сразу будут отвечать за все популярные социальные сайты, вот как этот выводить.
Сафрон
Сафрон 19 Декабря 2016 03:434
0
Вот это точно нужно, здесь хочу добавить, что вам даже не обязательно делать страницу в Твиттер, просто это же все для гостей и пользователя.
Kosten
Kosten 19 Декабря 2016 03:535
0
Есть такие, сто ставят в страницу материала и комментариев к нему, как эти мета теги и они идут почти на все социальные площадки, только кроме как раз твиттер, вот потому отдельно идет.

Цитата tsakonter ()
А есть теги, которые можно поставить и они сразу будут отвечать за все популярные социальные сайты, вот как этот выводить.
rmadiev
rmadiev 04 Января 2017 13:186
+1
Спасибо большое! долго мучился с отображением картинки при репосте! Ваша статья мне очень помогла! Огромнейшее спасибо!
Kosten
Kosten 04 Января 2017 14:097
0
Всегда пожалуйста, это ДимДимычу нужно сказать от души. Если у вас подключена CEO настройка, то можно по другому сделать, на многие социальные сайты.
Kosten
Kosten 04 Января 2017 14:208
0
Если подключены CEO настройки и у вас главная страница каталог файлов, то ставим так вид материала и комментариев к нему. Только меняем на свой сайт и делаем свое описание.

Код
<html>  
<head>  
<meta charset="utf-8">
<title><?if($SEO_TITLE$)?>$SEO_TITLE$<?else?>$ENTRY_TITLE$<?endif?></title>
<link rel="dns-prefetch" href="//www.ucoz.ru/">  
<link rel="dns-prefetch" href="//an.yandex.ru/">  
<link rel="dns-prefetch" href="//mc.yandex.ru/">  
<?if($SEO_DESCRIPTION$)?><meta name="description" content="$SEO_DESCRIPTION$" /><?endif?>  
<?if($SEO_KEYWORDS$)?><meta name="keywords" content="$SEO_KEYWORDS$" /><?endif?>
<?if($SEO_TITLE$")?><meta property="og:title" content="$SEO_TITLE$" /><?else?><meta property="og:title" content="$ENTRY_TITLE$" /><?endif?>  
<?if($SEO_DESCRIPTION$)?><meta property="og:description" content="$SEO_DESCRIPTION$" /><?endif?>  
<?if($IMG_URL1$)?><meta property="og:image" content="$IMG_URL1$" /><?endif?>  
<?if($ENTRY_URL$)?><meta property="og:url" content="$ENTRY_URL$" /><?endif?>  
<meta property="og:site_name" content="ZorNet - сайт про uCoz" />
<meta name="twitter:site" content="ZorNet - сайт про uCoz" />  
<?if($SEO_TITLE$)?><meta name="twitter:title" content="$SEO_TITLE$" /><?endif?>  
<?if($SEO_DESCRIPTION$)?><meta name="twitter:description" content="$SEO_DESCRIPTION$" /><?endif?>  
<?if($SEO_TITLE$)?><meta itemprop="name" content="$SEO_TITLE$" /><?endif?>  
<?if($SEO_DESCRIPTION$)?><meta itemprop="description" content="$SEO_DESCRIPTION$" /><?endif?>  
<?if($IMG_URL1$)?><meta itemprop="image" content="$IMG_URL1$" /><?endif?>  
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<meta itemprop="url" content="http://zornet.ru/">
<meta itemprop="title" content="ZorNet - сайт про uCoz">
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<meta itemprop="url" content="$MODULE_URL$">
<meta itemprop="title" content="$MODULE_NAME$">
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<meta itemprop="url" content="$CAT_URL$">
<meta itemprop="title" content="$CAT_NAME$">
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<meta itemprop="url" content="$ENTRY_URL$">
<meta itemprop="title" content="$ENTRY_TITLE$">
</span>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />  
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />  
<script type="text/javascript">  
var navTitle = 'Navigation';  
</script>  
<?$SEO_CANONICAL$?>
</head>
Войдите:
avatar