Как обеспечить поддержку ссылок Twitter?

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

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

Кто-нибудь знает, если это определено Twitter, или если есть какой-то способ изменить свой веб-сайт, чтобы включить предварительный просмотр в твиттере?

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

Там есть ссылка на Twitter, в которой объясняется расширенный контент, но не как это сделать. https://blog.twitter.com/2012/experience-more-with-expanded-tweets

Ответ 1

Вероятно, вы захотите посмотреть "Карты Twitter". Их очень просто настроить. Вы добавляете несколько строк кода в заголовок страницы, проверяете свой сайт (автоматизированный процесс), и вы уходите.

Вот, например, это одно из моих твитов с содержанием предварительного просмотра https://twitter.com/edent/status/516544061495193601

Дополнительный HTML-код:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@edent">
<meta name="twitter:site" content="@edent">
<meta name="twitter:title" content="Tim Berners-Lee and the Freedom of The City">
<meta name="twitter:description" content="Last week, I had the privilege of being invited into the Guildhall to watch Tim Berners-Lee receive the Honorary Freedom of the City.  I was one of a dozen bloggers and tweeters asked to live tweet th">
<meta name="twitter:image:src" content="https://shkspr.mobi/blog/wp-content/uploads/2014/09/TimBL-Least-Well-Dressed-435x375.jpg">
<meta name="twitter:image:width" content="280">
<meta name="twitter:image:height" content="150">

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

Ответ 2

Кроме того, я укажу одну важную вещь. Для twitter:image meta его параметр содержимого должен быть абсолютным, а не относительным. В противном случае это не сработает.

<meta name="twitter:image content="/resource/img.jpg"/> //will not work
<meta name="twitter:image content="https://yourdomain.com/resource/img.jpg"/> //will work