スキップしてメイン コンテンツに移動

Twitterカードのサイトへの一般的な導入について

Twitterにブログの記事を共有しても何も取り込まれなくて普通のツイートと全く同じになってしまうので、他のサイトではできているにも拘わらず、一体、なぜなのかと調べてみるとTwitterカードが設置してないとコンテンツがツイートに反映しないためだった。


やってみるとツイートにサイトのURLを入力するだけでタイトルや説明文や画像が直ぐに取り込まれてリッチに反映するから物凄く便利だと感心した。


Twitterのロゴマーク

サイトに専用のmetaタグを記載して検証ツールでOKが出るとTwitterカードが実際に使えるようになる。専用のmetaタグが適切か、またはrobots.txtでTwitterのクローラーが除外されてなければサイトのコンテンツがURLを入力するだけでツイートに反映して来る。


Getting Started GuideによるとTwitterのmetaタグが幾つかあって常に欠かせないのは「twitter:card」だけみたいで、Twitterカードのデザインを指定するんだ。


Twitterユーザー名を入れる「twitter:site」と「twitter:creator」は記載しなくてもTwitterカードの表示に不具合はない。前者はサイトとTwitterのアカウントを結び付けるため、後者は大きな画像のカードタイプに限ってコンテンツの作成者を示すために使われる。


ツイートに取り込まれるサイトのコンテンツそのものはTwitterのmetaタグだけではなくてOGP設定から記載しておいても構わない。


OGP設定はサイトがソーシャルメディアに取り込まれ易くなるための汎用的なマークアップだ。


TwitterカードはサイトへOGP設定で導入するためにはheadタグにprefix要素で「og:http://ogp.me/ns#」が予め必要らしい。


<head prefix="og:http://ogp.me/ns#">

次いでmetaタグのproperty要素とcontent要素でサイトの「title」や「description」などの項目を表示したいTwitterカードのデザインに合わせて記載しておけばTwitterのクローラーがコンテンツを拾ってくれるようになる。


TwitterカードのOGP設定の基本的なソースコード


<meta name="twitter:card" content="カードタイプ" />
<meta name="twitter:site" content="@Twitterユーザー名" />
<meta name="twitter:creator" content="@Twitterユーザー名" />
<meta property="og:url" content="サイトURL" />
<meta property="og:title" content="サイト名" />
<meta property="og:description" content="説明文" />
<meta property="og:image" content="画像URL" />

無料ホームページやブログだとサイトのheadタグを操作できない場合もあってTwitterカードを導入するのは無理だと思う。しかしhead内のmetaタグが操作できない場合こそ本当に無理だけど、headタグが操作できないだけならばTwitterカードはTwitterのmetaタグで対応できる。


Cards Markup Tag ReferenceによるとOGP設定のproperty要素をTwitterのmetaタグに置き換える方法も示されていた。


その場合はTwitter専用のmetaタグとしてカードタイプやTwitterユーザー名を入力しているのと同じようにproperty要素の「property」を「name」に、さらにog属性の「og」を「twitter」に切り替えて記載することになる。


TwitterカードのTwitterのmetaタグだけの基本的なソースコード


<meta name="twitter:card" content="カードタイプ" />
<meta name="twitter:site" content="@Twitterユーザー名" />
<meta name="twitter:creator" content="@Twitterユーザー名" />
<meta name="twitter:url" content="サイトURL" />
<meta name="twitter:title" content="サイト名" />
<meta name="twitter:description" content="説明文" />
<meta name="twitter:image" content="画像URL" />

ソーシャルメディアへのサイトのコンテンツの表示がTwitterだけで良ければmetaタグを並べるだけでも作業は済んでしまうので、比較的に楽ではないか。


因みにOGP設定のproperty要素の「URL」は使わなくても大丈夫みたいで、検証ツールでエラーも出ないし、トップページでも子ページでもサイトのURLは自動的に対応してツイートに反映する。


Twitterカードの四つのデザイン属性


  • summary(概観)
  • summary_large_image(大画像の概観)
  • app(アプリ用)
  • player(動画/音声/スライドショーなど)

Card TypesによるとTwitterのmetaタグの「twitter:card」で何れかの属性を選択してデザインが付けられるようになる。


Twitterカードのsummary(概観)を使用した結城永人のTwitterカード

カードタイプは「summary」と「summary_large_image」がTwitterカードのサイトへの一般的な導入として相応しいのではないか。Twitterで良く見かけるし、自分でも使うために覚えておきたかった。サイトのURLとサイト名と説明文と画像が取り込まれてツイートにリッチに反映するのがとても嬉しい。


参考:Facebook・TwitterのOGP設定方法まとめ

コメント

些細な日常の人気の投稿

アドセンスの支払い日は翌月二十一日前後だけれども保留されると送金されない

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策

Imgurで画像URLと埋め込みコードを取得する方法