Делаем Twitter Cards с галереями и котиками

[s0lar]

Очень круто, спасибо. За 15 минут сделал карточку продукта. Проверка прошла за минуту.
Единственное, валидатор немного глючит. Не всегда картинки подтягивает при проверке. Т.е. тег и путь к картинке правильный, а валидатор говорит, что нет. Несколько раз повторил с теми же параметрами — подтянул картинку.

[gwer]

У меня валидатор не сразу принял картинки для Gallery Card. Про Unknown aspect ratio говорил, кажется. Но само прошло после пары нажатий на обновление.

[s0lar]

Ну, собственно, и у меня была та же ошибка.
Не сдавайтесь!!!

[shumaher86]

а если например у меня в твиттер попадают ссылки только из RSS в Feedburner'е (типа goo.gl/fb/XXXXX), можно как-то аналогично добавить теги именно в RSS, чтоб валидатор их увидел?

[gwer]

По сути, в твите про RSS ни слова. Туда постится ссылка на оригинальную страницу. Сокращатель goo.gl дает 301 редирект, который твиттер прекрасно обрабатывает (если ссылку предварительно не сократить, он сам ее через свой сокращатель прогонит). Так что ничего в RSS добавлять не нужно, только на сами страницы сайта.

[shumaher86]

смущает, что goo.gl делает ведь редирект на feedproxy.google.com, а не на сам сайт. feedproxy.google.com уже делает редирект на сайт.
ясное дело, что про RSS ни слова, но и исходного URL сайта, который добавлен в валидатор, в твите тоже нет.

никак не заапрувится, чтобы проверить

[gwer]

Специально в вашем твиттере взял ссылку именно такого типа, как вам нужно. Ну два там 301 редиректа. Разницы не должно быть: краулер (или какое там животное этим занимается) фактически должен увидеть сразу конечный адрес.

[tehnolog]

Не совсем понял, как в твиттере давать ссылку. Все сделал, получил одобрение, добавил в твите ссылку на свою страницу и вижу только ссылку. Ничего не подтягивается.

[tehnolog]

Вопрос снимается. Понял.

[shumaher86]

тоже самое. поясните плз, что вы там поняли. а то ничего не работает

[gwer]

Просто ссылка на страницу с метатегами и с одобренного сайта постится в твиттер. Единственный момент: если ссылку отправляете, перезагружайте страницу после этого (не знаю, как в клиентах обстоят дела). При постинге карточка не отображается до перезагрузки (вероятно, особенности ajax'а). Остальные видят сразу.

Для тестов можете использоваться страницы с гитхаба, указанные в посте перед примерами кода. Они уже проиндексированы и точно работают.

[shumaher86]

я заметил, что НЕ у всех твитов появляются описания, хотя ссылки точно есть в каждом, и все ведут на аналогичные страницы. не знаю почему так

[gwer]

Страницы новые? Если старые, то, вероятно, на них уже побывал краулер твиттера и закэшировал, попробуйте тогда добавлять GET-параметры или якоря к URL. Если не помогает, посмотрите, что говорит валидатор о проблемных страницах.

[tehnolog]

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

[Mithgol]

Я правильно понимаю, что в одном домене можно одобрить два разных типа карточек (на разных страницах домена), после чего без дальнейших усилий можно быть уверенным в том, что по гиперссылке на любую другую страницу домена Твиттер пойдёт и подберёт нужный тип карточки из числа одобренных типов?

[gwer]

Да, верно. Тип карточки берется из twitter:card. Если указанный тип одобрен для данного домена, все без проблем подцепляется дальше.

[shurph]

Замечу, что используемая разметка основана на стандарте Open Graph. Он используется, например, VK и FB, о чем я говорил в начале поста. Единственное отличие — вместо twitter:title, twitter:description и twitter:image используются og:title, og:description, og:image и добавляется og:url, содержащий ссылку на страницу.

Стоит отметить, что есть ещё одна особенность: как видно из вашего же примера, если нужно указать несколько тегов изображений, то для твиттера следует использовать twitter:image0, twitter:image1, twitter:image2, twitter:image3 и т.д., в то время как в Open Graph используется просто og:image для всех изображений.

[gwer]

Отметил. Обновил пост. Спасибо.

[plutov]

Спасибо, а поддерживает ли это API Твиттера? Т.е. могу ли я, например, автоматически шарить какую-то ссылку, можно ли передавать ссылку на изображение и т.д. Как у тех же FB и VK.

[gwer]

Не совсем понял, о чем речь. Поясните, пожалуйста, куда и как вы передаете ссылку на изображение при шаринге в VK/FB.

[plutov]

Про изображения я уже нашел, что Twitter определяет только парсингом по странице. Главное, что я хотел узнать, смогу ли сделать такие карточки через Twitter API?

[gwer]

Документация говорит о том, что карточки оформляются исключительно на основании метатегов. Максимум, что позволяет API, — это statuses/update_with_media, то есть самая стандартная подгрузка изображений в твит.