HTML/CSS

Разметка страниц для Twitter (Twitter Cards)

Разметка Twitter Card добавляется в <head> каждой страницы сайта и используется для расширенного описания ссылки, вставленной в твит.

Правильность разметки можно проверить на cards-dev.twitter.com

URL и изображение должны быть открыты для индексации в robots.txt.
Если ресурсы сайта закрыты, то можно добавить отдельную секцию для Twitterbot:

User-agent: Twitterbot
Allow: /

Описание свойств

twitter:card тип карточки: summary, summary_large_image, app, player
twitter:site @username - аккаунт сайта
twitter:creator @username - аккаунт автора
twitter:title название
twitter:description описание
twitter:image ссылка на изображение
twitter:url ссылка на страницу
1

Пример разметки для обычной карточки

<head>
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="Аккаунт сайта в Твиттере">
    <meta name="twitter:creator" content="Аккаунт автора в Твиттере">
    <meta name="twitter:title" content="Название страницы">
    <meta name="twitter:description" content="Описание страницы">
    <meta name="twitter:image" content="http://example.com/image.jpg">
    <meta name="twitter:url" content="http://example.com">
</head>

Twitter Cards

2

Вариант с большой картинкой

<head>
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="Аккаунт сайта в Твиттере">
    <meta name="twitter:creator" content="Аккаунт автора в Твиттере">
    <meta name="twitter:title" content="Название страницы">
    <meta name="twitter:description" content="Описание страницы">
    <meta name="twitter:image" content="http://example.com/image.jpg">
    <meta name="twitter:url" content="http://example.com">
</head>

Twitter Cards

Твиттер кэширует сформированное описание на 7 дней.

05 апреля 2018
Такой эффект можно легко сделать через CSS свойство transition например для кнопок, меню и т.д.
Цвет карты можно изменить начиная с версии 2.0 с помощью CCS фильтров, применив их к элементу .ymaps-layers-pane
Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты форм сайта. Исправить это можно...
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.