Как начинается история?
Мне было интересно, как Twitter создает эти карточки всякий раз, когда пользователь вводит ссылку или вставляет URL-адрес. Для нашего веб-сайта нам требуется много времени, чтобы пройти тестовые примеры проверки карты Twitter.

Зачем и что такое метаданные?
Вся оставшаяся логика связана с метатегами, которые есть на каждой веб-странице. Мета-теги настолько важны, что они не только помогают пользователям получать данные вашего веб-сайта только из доменного имени/URL-адреса, но метаданные также улучшают рейтинг поисковой системы для поискового робота Google.

Сканер Google перебирает веб-страницы и извлекает информацию о веб-сайте, такую ​​как название, описание, изображения и теги, чтобы предоставить пользователю точные результаты поиска.

Поймите логику самым простым способом, если Google может легко прочитать все страницы на вашем веб-сайте и их соответствующие данные, он может порекомендовать и предоставить их пользователям.

Как Twitter создал карты проверки
Twitter использует ту же концепцию под капотом, как только URL-адрес вставляется в текстовое поле, Twitter запускает API проверки для получения соответствующих метаданных ссылки.

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

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

Определите метаданные вашего сайта
Я разработал API для обнаружения метаданных вашего личного домена, вот ссылка для проверки метаданных вашего веб-сайта.

Если ваши метаданные недоступны, убедитесь, что вы тщательно добавили их на свой веб-сайт.

Идея проста: любой может создать свой собственный API или модуль для получения метаданных. На самом деле, используя внутренний API для получения метаданных, мы также можем разрабатывать карты, как Twitter, на нашем собственном веб-сайте.

Как я справился?

  • Я разработал собственный API для извлечения метаданных.
  • После добавления URL-адреса и ссылки в любой из журналов мы получили метаданные с помощью API по соответствующей ссылке.
  • Наконец, нам просто нужно отобразить карты, используя ответ от API метаданных.

Как создать API для получения метаданных?

  • Создайте маршрут извлечения метаданных, для которого требуется URL-адрес в параметрах.
  • Используйте этот модуль npm, который помогает серверу извлекать метаданные из каждой ссылки, переданной в параметрах.
  • Или вы можете использовать puppeteer для сканирования соответствующего веб-сайта и получения метаданных, это не ракетостроение.
  • Верните необходимые метаданные в ответ маршрута.

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

Изучая, как твиттер показывает карты, я копирую и вставляю ссылку в текстовое поле и одновременно проверяю вкладку сети Chrome. Как только URL-адрес добавлен в текстовое поле твита, Twitter немедленно запускает API для получения метаданных по соответствующей ссылке.

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

На сегодня все, до следующего раза, хорошего дня.
Продолжайте развиваться
Шри
iHateReading