MENU

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

CATEGORY

大学 (135) 仕事 (11) 航空宇宙 (97) 写真 (67) 旅行 (30) 飯・酒 (16) コンピュータ (113) その他 (42)

TAG

ARCHIVE

RECENT

【学会】久しぶりのオンサイト開催 国内学会,かつ,学生最後の学会発表 【寝言】宇宙業界から「OBC が過去の PJ と同一なので,過去 PJ のソフトウェアが流用できて工数が削減できる」という主張を滅ぼしたい 【鉄道旅】鉄道開業150周年に思いを馳せる旅行(後編) 【鉄道旅】鉄道開業150周年に思いを馳せる旅行(前編) 【研究室プロジェクト】STAR SPHERE 衛星シッピング

【Twitter】Twitterカードの設定

事象発生日:2017-09-10

記事公開日:2017-09-10

アクセス数:1943

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

コメント