Обновите метаданные своего веб-сайта для поддержки карт предварительного просмотра в Twitter.
Вы, должно быть, сталкивались с людьми, которые делились ссылками на веб-сайты с богатыми предварительными изображениями, заголовками и описаниями в Twitter. Но когда вы попробовали тот же подход на своем собственном веб-сайте, все, что вы получили, было скучной карточкой с отсутствующим изображением и минимальным описанием.
В этом руководстве вы узнаете, как добавить эту функциональность на свой веб-сайт, просто добавив несколько строк кода.
Метаданные
Твиттер использует метаданные веб-сайта, чтобы получить соответствующую информацию, такую как заголовок и описание карточки Твиттера. Эти метаданные также хранят ссылку для предварительного просмотра изображения для веб-сайта.
Перейдите в корневой файл проекта и добавьте следующие метатеги.
Первый метатег определяет тип карточки Твиттера, так как они бывают 4-х типов -
- Сводная карта: Название, описание и миниатюра.
- Сводная карта с большим изображением: аналогична сводной карточке, но с изображением на видном месте.
- App Card: Карта с прямой загрузкой в мобильное приложение.
- Карта игрока: Карта, которая может отображать видео/аудио/медиа.
В этом уроке мы будем использовать тип Сводная карта с большим изображением. Второй метатег соответствует вашему дескриптору Twitter. А третий и четвертый — для заголовка и описания сайта соответственно.
Изображение для предварительного просмотра
На данный момент все, что осталось сделать, это добавить метатег с изображением для предварительного просмотра. Но перед этим нам нужно разместить изображение в облачном хранилище, чтобы сгенерировать для него ссылку для загрузки. Вы можете использовать такие сервисы, как Google Диск, Dropbox или OneDrive для размещения изображения.
После загрузки в хранилище сгенерируйте ссылку для общего доступа и вставьте ее сюда. Этот веб-сайт преобразует ссылку в загружаемую. Вернитесь к файлу кода и добавьте следующий метатег.
<meta name="twitter:image" content="Downloadable link here."/>
Валидатор карты
После того, как у вас есть все метатеги, вставьте свой код и подождите, пока веб-сайт не заработает. После этого перейдите в Валидатор карт и вставьте свой URL. Это даст вам предварительный просмотр того, как карта будет отображаться в Twitter.
Заворачивать
Вот и все!! Вы добавили карточку Twitter на свой веб-сайт, просто добавив несколько строк кода. Если ваша карта не отображается в валидаторе должным образом, проверьте консоль валидатора на наличие ошибок и попробуйте выполнить указанные выше шаги еще раз.
Want to Connect? As always if you have any further questions, you can always reach out to me on Twitter.
