MENU

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

CATEGORY

大学 (115) 航空宇宙 (82) 写真 (54) 旅行 (28) 飯・酒 (14) コンピュータ (104) その他 (30)

TAG

ARCHIVE

RECENT

【研究】これまでの研究室生活振り返り 東京大学大学院 学位記授与式と工学系研究科長賞受賞式 【資格】第一級陸上無線技術士 取得 【研究】修士論文の提出を終えて 【CanSat】缶サット甲子園を目指す高校生向け電子工作講座 @福井

【Twitter】Twitterカードの設定

事象発生日:2017-09-10

記事公開日: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 (※公開されることはありません)

コメント