Генерация превью ссылок

Когда речь заходит о создании превью, то первым делом на ум приходит Open Graph. Особый протокол который с помощью тегов в head секции страницы помогает там вытащить необходимые данные для создания превью. Однако, не всегда все так просто и зачастую подход к каждому сайту становится более индивидуальным. В рамках этого поста мы разберем несколько примеров и выработаем основной подход к этой задаче.

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

Для начала необходимо определится со списком ресурсов на которые желательно было бы вывести. Для этого можно месяц-полтора пособирать аналитику. По TOP-10 же уже начать тестирование.

Мета теги

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

• og:title - заголовок страницы
• og:description - описание
• og:image - картинка для превью
• og:site_name - имя сайта (параметр от которого стоит отталкиваться в случае когда необходимо выделить дополнительные параметры)

С другими тегами можножно ознакомится на сайте протокола - https://ogp.me/

Все прекрасно, но зачастую бывает недостаточно. Сайты просто игнорируют реализацию таких тегов. Тут на помощь приходят теги твиттера. Они называются в документации твиттера как Cards.

og:site_name в случае карт будет twitter:site. По использовав этот параметр как id можно уже идти дальше к более детальному получению информации по каждому сайту.

Случается так, что страницы отказываются давать нам достаточно информации, поэтому при запросе желательно добавить User-Agent к которому сервер более охотно отдаст ответ. Например User-Agent: Googlebot или User-Agent: Twitterbot.

Частные случаи

Twitter

Для того чтобы получить какие либо дополнительные данные из твиттера нам необходимо использовать их API, а следовательно требуется получить токен для работы с ним. Но для того чтобы сделать запрос к API надо знать что именно мы хотим от него получить. Для этого самым простым путем будет распарсить путь ссылки и взять последний его элемент. В большой долей вероятности если это число - то это ссылка на твит, иначе - ссылка на юзера.

Получить твит можно по endpoint-у https://api.twitter.com/2/tweets/<id-твита> с параметрами. Например,

• "tweet.fields" = "id,text"
• "expansions" = "attachments.media_keys,author_id"
• "media.fields" = "preview_image_url"

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

Для пользователя же необходимо обратиться к https://api.twitter.com/2/users/by/username/<username>, с параметрами

• "user.fields" = "name,username,profile_image_url"

В ответ мы получим все те же что и вариантом с постом параметры. Документация к запросу доступна по ссылке.

Youtube

Для Youtube нам необходимо общаться с API гугла, однако прежде всего нам необходимо вытащить id видео. Оно доступно в параметрах запроса с id - v. К сожалению, без этого id мы мало что можем сделать, правда если только парсить html дальше, однако вариант не особо надежен.

Получаем информацию о видео по запросу на https://youtube.googleapis.com/youtube/v3/videos где в параметры добавим

• "part" = "snippet,statistics"
• id = id видео

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

Однако, на этом можно не останавливаться, ведь Youtube пришлет нам еще и id канала. По id канала можно забрать еще больше данных. Получить информацию о канале можно получить по запросу на https://youtube.googleapis.com/youtube/v3/channels, где добавим параметры

• "part" = "snippet"
• id = id канала

Теперь нам доступно не только название канала, но и еще ссылка на его картинку. Документация.

Instagram

Для того чтобы производить какие либо действия необходимо разобрать путь ссылки. Если компонент все один, то вероятно это ссылка на профиль и можно предполагать, что последний этот компонент является id пользователя на которого сделана ссылка. Иначе это вероятнее всего является ссылкой на пост или на рилс, что серьезно усложнит получение дополнительной информации. Так как дальнейшие запросы потребуют от нас авторизации для получения токена к API.

В случае же с id юзера все проще. Есть достаточно популярный запрос к  приватному API - https://www.instagram.com/<username>?__a=1. Он выдаст нам как минимум ссылку на аватар профиля и его имя.

Следующие шаги

К сожалению, нам не всегда доступны какие либо API, а мета данные не до конца удовлетворяют нашим запросам. В этом случае приходится прибегать к менее надежным вариантам. А именно к парсингу самого html. Здесь нет универсальных путей и потребуется переодически мониторить правильно ли мы достали эти данные. Но с правильно настроеной системой сбора аналитики и сбоев даже такой подход не будет является большой проблемой.