Если не отображается картинка в Twitter Card

0
208
Если не отображается картинка в Twitter Card

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

Помимо текстового сообщения и ссылки на статью можно включить в свой твит не только анонс, но и изображение (миниатюру) из этой самой статьи!

И всё это благодаря расширенному функционалу Твиттера — Twitter Card.

Для этого достаточно добавить в код страницы метаданные Twitter, выбрать формат отображения (например, краткое содержание (как выше) или краткое содержание с большой картинкой). В WordPress, например, все это позволяет сделать плагин Yoast SEO, как впрочем и многие другие плагины тоже. Но можно и руками.

Далее проверяем работу функционала в специальном валидаторе: https://cards-dev.twitter.com/validator.

И если лог проверки показывает, что все нормально:

INFO:  Page fetched successfully
INFO:  23 metatags were found
INFO:  twitter:card = summary tag found
INFO:  Card loaded successfully

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

Но часто бывает так, что вроде бы все требования выполнены: добавлены все метаданные, лог проверки ошибок не показывает, в тестовой карточке видны текст твита, ссылка на страницу, анонс, а изображения (миниатюры) нет! Вместо него либо серое пятно либо вообще ничего.

Решение этой проблемы весьма простое.
Если изображение в twitter card не отображается, то в 90% случаев причина в том, что робот Твиттера — Twitterbot не видит ваших картинок. И нужно разрешить этому User-agent индексировать ваш сайт.

Добавьте в начало своего robots.txt следующую запись:

User-agent: Twitterbot
Disallow:

Либо разрешите ему сканировать только изображения и архивы вашего контента:

User-agent: Twitterbot
Disallow: *
Allow: /images
Allow: /archives

Прим.: при необходимости добавьте слэш / на конце папок, если в своих ЧПУ вы его используете.

И ваша картинка будет видна, проблема решена.



Оставить комментарий

Please enter your comment!
Please enter your name here