web-dev-qa-db-ja.com

リンクがTwitterプレビューをサポートすることを保証する方法は？

まず、この質問をするためにSocialMediaStackExchangeを検索しましたが、ないようです。

これが私が疑問に思っていることです。 Twitterにツイートを投稿するとき、それがYouTubeリンクまたは特定のWebサイトのリンクである場合、TwitterはユーザーがクリックできるExpand機能を表示します。 Twitterインターフェースでメディアコンテンツをプレビューします。

これがTwitterによって決定されているかどうか、またはTwitterでプレビューを有効にするようにWebサイトを変更できる方法があるかどうかを誰かが知っていますか？

ブログエントリをツイートするときに、記事の最初の部分をプレビューできるようにしたいと思います。次に例を示します:(リンクを追加するだけで、表示されるプレビューコンテンツが表示されます）この場合、これはInfoWorldの記事です。

Web link creates preview of content

拡張コンテンツを説明するリンクがTwitterにありますが、それを実現する方法は説明していません。 https://blog.Twitter.com/2012/experience-more-with-expanded-tweets

twitterpreview
11
raddevus

おそらく「 Twitterカード "」を見たいと思うでしょう。設定はとても簡単です。ページのヘッダーに数行のコードを追加し、サイトを検証して（自動化されたプロセス）、離れます。

たとえば、ここに「プレビュー」コンテンツを含む私のツイートの1つがあります 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">

カードのスタイルが異なれば、プレビューの種類も異なります（ビデオ、画像、アプリのインストールなど）。

12
Terence Eden

また、重要なことを一つ指摘しておきます。ために 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
2
Andrii Los