MENU

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

CATEGORY

大学 (140) 仕事 (17) 航空宇宙 (104) 写真 (77) 旅行 (32) 飯・酒 (17) コンピュータ (118) その他 (44)

TAG

ARCHIVE

RECENT

【カメラ】X100 シリーズが好きすぎる(主にリーフシャッタ) 【カメラ】X100V から X100VI に買い替えました 【自宅サーバー】Google Domains から Cloudflare にドメインを移管 【カメラ】FUJIFILM XF レンズのサイズ比較ができるようにしてみた 【写真】自作写真閲覧ページにてフィルムシミュレーションで写真をフィルタできるようにした

【Twitter】Twitterカードの設定

事象発生日:2017-09-10

記事公開日:2017-09-10

アクセス数:3399

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

コメント