MENU

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

CATEGORY

大学 (91) 航空宇宙 (59) 写真 (33) 旅行 (16) 飯・酒 (11) コンピュータ (94) その他 (20)

TAG

ARCHIVE

RECENT

【写真】都市夜景撮影 英会話をまた習い始めました 【Perl】YAPC::Tokyo 2019 にスタッフとして参加してきました むちゃくちゃな就活をして,内定がでたので,博士進学が決まった 【写真】望遠レンズで白黒(ACROS)撮影@銀座

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

コメント