ギャラリーと猫でTwitterカードを作成する

今日は、サイトへのリンクを含むツイートに高度なコンテンツを埋め込むことについてお話します。 FacebookやVKで似たようなものに出会った人は多いでしょう。ソーシャルネットワークでリンクを共有し、それに加えて、たとえば、タイトル、説明、画像が自動的にアップロードされます。 これはVKとFBの技術サポートに過ぎず、特にRuNetではTwitterカードはそれほど一般的ではありません。

Twitterカードまたは拡張ツイートを使用すると、通常よりも多くの情報を1つのツイートに入れることができます。 テキスト情報に加えて、グラフィックとオーディオ/ビデオもサポートされています。 サポートは、公式のtwitterクライアントと多くのサードパーティのクライアントの両方で実装されています。 この追加情報は、ユーザーがリンク付きのツイートの下にある「展開/詳細」ボタンをクリックしたときにのみロードされます（ボタンは使用するクライアントによって異なります）。

ドキュメントをコピーして翻訳することには意味がありません。それはTwitterでかなり良く、理解のために英語の特別な知識を必要としません。 可能性について簡単に説明し、いくつかの例を挙げ、役立つリンクを示します。 技術的な問題はありません。

そのため、私が言ったように、Twitter Cards（以降、便宜上カードと呼びます）を使用すると、サイトのコンテンツをツイートに埋め込むことができます。 しかし、それらはさまざまなタイプです。

• 要約カード。 タイトル、説明、画像付きの標準カード。
• 大きな画像の要約カード。 同じ概要で、画像に重点が置かれているだけです。
• 写真カード。 ここではすべてが明らかです、写真カード。
• ギャラリーカード。 4つの画像のミニギャラリー。
• アプリカード。 App StoreまたはGoogle Playのアプリケーションカード。
• アプリのインストールとディープリンク。 必要に応じてアプリケーションをインストールし、ディープリンクします（正しく理解できれば、これは指定されたアプリケーションへの移行を意味します）。
• プレイヤーカード。 メディアプレーヤー付きのカード。
• 製品カード。 製品カード（オンラインストア用）。

ご覧のとおり、可能性は非常に広いです。 使用する場合、画像を操作する機能を検討する価値があります。 彼らは割礼をすることができるだけでなく、異なる動作をします。 たとえば、要約では、それらはページへのリンクであり、ギャラリーでは、画像のフルバージョンを含むウィンドウが開きます。

ビジネスに取り掛かろう。 これはすべて、メタマーキングに基づいて機能します。 たとえば、投稿の最初に画像を取得するために、次のメタタグがページに追加されました。

<meta name="twitter:card" content="summary"> <meta name="twitter:creator" content="@webholt"> <meta name="twitter:title" content=",   "> <meta name="twitter:description" content="      ,    Twitter Cards   .     ,    ,   ."> <meta name="twitter:image" content="http://gwer.imtqy.com/twi-cards/img/cat1.jpg"> 

念のため、何と理由を説明します。

• twitter：カード-カードのタイプ。 この場合、サマリーはデフォルトであるため、省略できます。
• twitter：作成者-著者のtwitter（コンテンツ、サイト）。
• twitter：title-タイトル。 最大70文字。
• twitter：説明-説明。 最大200文字。
• twitter：image-画像へのリンク。 絶対に必要です。

ツイート自体の120文字（リンクごとにマイナス20）、カード内の270文字、および画像は、リンク付きのツイートよりもユーザーを良いサイトに引き付ける可能性が高いことを理解するのは簡単です。

ところで、Twitterへの新しいページの自動投稿を整理する多くのサイトは、サードパーティの画像ホスティングサービスを使用してそれらをツイートに（画像）アップロードすることがよくあります。 記載されているカードは、優れた代替手段です。 そして、特に注意を払った人は、カードに投稿された情報がページのコンテンツとまったく一致しないかもしれないことに気付くことができました（しかし、私はあなたにそれを伝えませんでした）。

残念ながら、タグを追加するだけでは不十分です。 選択したタイプのカードを使用するには、サイトを承認する必要があります。 メタタグを追加したら 、 バリデーターに移動して、目的のタイプのカードを選択し、[ 検証と適用 ]タブに移動して、登録されたメタタグがあるページへのリンクを挿入します。 マークアップが正しいことを確認してから、ドメインが承認されていないことに注意してください。


しかし、すべては見た目ほど怖くない。 [ 承認をリクエスト]をクリックして、すでに記入済みのフォームをご覧ください。 自由に編集できます。 ウェブサイトの説明を記入するだけです。 正直に「 Twi-cardのテスト用サイト 」と書いて、「 承認をリクエスト 」をクリックしました...そして、メッセージが表示されました。

Twitterのカードサービスにご参加いただきありがとうございます。 できるだけ早くリクエストを確認します。 納期に数週間かかります。 リクエストが確認されると、メールが届きます。

率直に言って、これらの数週間は私を少し動揺させました。 しかし、判明したように、承認は1〜2分以内に合格します。 おそらく、この条項は、承認に時間がかかった過去、またはHabrahabr全体が突然サイトにパッチを適用し始めた場合に、そこからかかっています。

その後、承認が行われたリンクをTwitterに投稿できます。リンクには新しいカードが必要です。 さらに、承認されたドメイン（およびそのサブドメイン）に登録されたメタタグを持つ他のページでカードを利用できます。 クローラーは比較的高速に動作します。 既にインデックス化されたページの再インデックス化も30分以内に行われますが、公式には週に約1回と言われています（ここでは大きなマージンで機能しています）。 さらに高速にページのインデックスを再作成する必要がある場合は、元のリンクではなく、アンカーまたはGETパラメータをリンクに追加して投稿するだけです。

誤解を避けるため、承認は1種類のカードのみに対して行われることにすぐに注意します。 別の例で説明します。

概要カードを承認したと仮定すると、それらは機能し、新しいページのインデックスが作成されます。 そしてここで、メタタグをページの1つに挿入します 。

  <meta name="twitter:card" content="gallery"> <meta name="twitter:creator" content="@webholt"> <meta name="twitter:title" content=" !"> <meta name="twitter:image0" content="http://gwer.imtqy.com/twi-cards/img/cat2.jpg"> <meta name="twitter:image1" content="http://gwer.imtqy.com/twi-cards/img/cat3.jpg"> <meta name="twitter:image2" content="http://gwer.imtqy.com/twi-cards/img/cat4.jpg"> <meta name="twitter:image3" content="http://gwer.imtqy.com/twi-cards/img/cat5.jpg"> 

すべてが機能するように見えますが、機能しません。 問題は、要約カードのみが承認され、これがギャラリーカードであるということです。 それらを機能させるには、再度バリデータにアクセスして、このタイプのカード用にマークアップされたページを承認する必要があります。 同時に、マークアップが正しいことを確認してください。 検証に合格し、アプリを取得して...

利益！

承認されたドメイン内で、サマリーカードとギャラリーカードの両方を含むページを追加できます。これらのページは完全に認識され、表示されます。 他のタイプのカードの場合、当然、対応するタイプを同じ方法で承認する必要があります。

当然、ここではすべての例を挙げます。 実際のプロジェクトで手動で処方するものは何も必要ありません。 説明した機能を使い慣れたCMSに実装する機能を追加することは、Web開発者にとって難しくありません。 WordPress、Blogger、Tumblrには既製のソリューションがあります。

また、この投稿を網羅的なガイドと見なすべきではないことにも注意してください。 他の種類のカードと使用可能なすべてのオプションについてはここでは説明しません（たとえば、作成者のTwitterだけでなく、サイトのTwitterも指定できます）。 これを実装する可能性の存在について話し、最も簡単な例を示しました。 その後、 公式文書が残りの部分を簡単に支援します。

PS：使用されているマークアップはOpen Graph標準に基づいていることに注意してください。 たとえば、VKやFBで使用されます。これについては、投稿の冒頭で説明しました。 唯一の違いは、 twitter：title 、 twitter：descriptionおよびtwitter：image 、 og：title 、 og：description 、 og：imageが使用され、ページへのリンクを含むog：urlが追加されることです。 幸いなことに、Twitterは、重複するメタタグを必要とせずに、TwitterカードとOpen Graphの混合をサポートしています。 ドキュメントからの混合例 。 これを行うと、他のソーシャルネットワークでリンクを投稿するときにページカードが同時に表示されます。

UPD：shurphからの注意 ：

別の機能があることに注意する価値があります：あなたの例からわかるように、いくつかの画像タグを指定する必要がある場合、twitterはtwitter：image0、twitter：image1、twitter：image2、twitter：image3などを使用する必要がありますOpen Graphは、すべての画像にog：画像のみを使用します。

実際、Gallery Cardを使用するときは、これを考慮する必要があります。 つまり、他のソーシャルネットワークで画像が必要な場合は、4つのうち1つを選択してog：imageに追加するか、4 og：imageのすべての画像を複製する必要があります。 この場合、VK / FBに投稿するユーザーは、提案された画像のいずれかを選択できます（FB、ところで、インターフェースの選択は驚くほど良く実装されています）。