MENU

溶けかけてるうさぎ HP BLOG TOP RECENT ARTICLES POPULAR ARTICLES ABOUT THIS BLOG

CATEGORY

大学 (85) 航空宇宙 (55) 写真 (25) 旅行 (14) 飯・酒 (11) コンピュータ (88) その他 (13)

TAG

ARCHIVE

2018 (92) 2017 (80) 2016 (0)

RECENT

【駅メモ】4年目に突入して,ようやく3000駅突破 【WebRTC】Raspberry Pi搭載ロボットをWebRTCで遠隔操作しようとして失敗した 【航空宇宙】航空宇宙アドベントカレンダー 始まります! 【Perl】YAPC::Tokyo 2019 のチケットを確保しました! 【カメラ】Canonから富士フイルムに乗り換えました

【Twitter】Twitterカードの設定

2017-09-10

TwitterにURLを貼ったときにサムネイルなど,リンク先のダイジェストが表示されることがある.

あれはTwitter社の超技術でリンク先から情報を取得,表示していると思っていたが,どうやらサイト側でTwitterカードなるものを設定していたらしい.

今回は,このブログにTwitterカードを設定する.

 

トップ画像の出典はこちら

1.Twitterカードの設定

カードの種類の選択

カードの種類

上図のように,一般サイト用のカードには2種類ある.

このサイトのトップ画像は正方形ではないので,今回は右の,“Summary Card with Large Image”を選択した.

挿入するコード

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">
Twitterカードのサンプルコード

上のようなコードを,headタグ内に挿入すれば良い.

ついでにOGPの設定も

<meta property="og:title" content="ページタイトル">
<meta property="og:url" content="このページのURL(パラメータ除外)">
<meta property="og:image" content="サムネイル画像のURL">
<meta property="og:site_name" content="サイト名">
<meta property="og:description" content="ページの説明">
OGPのサンプルコード

これも挿入しておけば,Facebookなどの他のSNSでも有効になる.

2.参考サイト

Twitter Developer Documentation. Twitterカード. Retrieved September 10, 2017, from https://dev.twitter.com/ja/cards/overview
CNTLOG. 【2017年】よく使うmetaタグとかをまとめてみた. Retrieved September 10, 2017, from https://blog.cntlog.net/?p=1067

コメントを投稿

名前

Email (※公開されることはありません)

コメント