TwitterやFacebookにURLが投稿されたときの表示をカスタマイズする。

近年のWebサイトはSNSでの拡散は大切なはず。なので、SNSにサイトのURLが投稿された時は、なるべく目立つように表示したい。

そんな時は、以下ののmetaタグをheadタグ内に記載すれば、画像・タイトル・説明文がTwitterやFacebookで表示されるようになる。

<meta property="og:title" content="タイトル">
<meta property="og:description" content="説明文">
<meta property="og:image" content="サムネイル画像のURL">
<meta name="twitter:card" content="summary_large_image" />

これらは”Open Graph Protocol”、通称”OGP”というらしく、もっと沢山指定項目があるが、とりあえず上記指定のみで表示可能なようなので省略している。

個々のタグの詳細

タイトルと説明文の指定

<meta property="og:title" content="タイトル">
<meta property="og:description" content="説明文">

この2つの指定がないとTwitterではURLテキストリンクで表示されてしまう。 titleタグやmetaタグのdescriptionと同じものを記載しておけばよい。

サムネイルとして表示される画像の指定

<meta property="og:image" content="サムネイル画像のURL">

httpやhttpsから始まるURLで指定する必要がある。推奨画像サイズは、横1200px・縦630pxだが、どんなサイズの画像でもよいと思う。表示環境によって多少見切れる。

Twitterで表示されるサムネイル画像のタイプの指定

<meta name="twitter:card" content="summary_large_image" />

この指定はTwitterのみ反映される指定。summary_large_imageは大きい横長の画像で表示される。summaryと指定すれば小さく正方形で表示されるが、大きい方がよい気がするので、summary_large_imageを指定している。

Twitter、Facebookで確認する方法

それぞれ以下のページからURLを入力すると、SNS上での表示プレビューを確認することが出来る。各サイトにログインが必要。ログインアカウントが何かに紐付くわけではないっぽいので何のアカウントでもよいと思う。

• Twitter Card Validator
• Facebook シェアデバッガー

指定した情報はTwitterやFacebook側でキャッシュされるので、指定を変更してもすぐには反映されない。すぐに反映したい場合は上記ページから該当ページのURLを確認すればキャッシュを削除して反映させることが出来る。