以前書いた「2022年用に改めてOGPを整理してみた」の中では、TwitteryaFacebookの事について記載していませんでしたので、改めてこちらにまとめてみました。
目次
無難なTwitterとFacebookのOGPはコチラ
<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:title" content="タイトル" />
<meta name="twitter:url" content="ページURL" />
<meta name="twitter:description" content="ページの説明文" />
<meta name="twitter:image" content="アイキャッチ画像のURL" />
<meta name="twitter:site" content="ウェブサイトの@ユーザー名">
<meta name="twitter:creator" content="著者の@ユーザー名">
<meta property="fb:app_id" content="AppID" />
タグを省略しても問題なく共有される
<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:image" content="アイキャッチ画像のURL" />
<meta property="fb:app_id" content="AppID" />
og:と重複している内容があった場合、内容が流用でよければ、タグを省略しても問題共有されます。
また、ユーザー名関係のものも省略して問題がないようです。
※私は流用する場合でも念のため省略せずに記述するようにしています。
(Ttwitterを運用していないクライアントなどではユーザー名関係のみ省略しています。)
各タグの解説
twitter:card
<meta name="twitter:card" content="カードの種類" />
調べてみたところ4種類あるようです。業種などジャンルに合わせて変更したらクリック率のアップにつながるのかもしれません。
(私は基本的にsummary_large_image以外使用したことがありません。)
summary
小さいカードの形です。
summary_large_image
一般的の大きいカードの形です。
その他
調べるまで知りませんでしたが、アプリ用や動画用というのもあるようです。
詳細は是非TwitterのDeveloper Platformをのぞいてみてください。
https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards
twitter:title
<meta name="twitter:title" content="" />
ページのタイトルです。私は、og:titleと共通にしています。
※共通にしている場合は省略可能のようです。
twitter:url
<meta name="twitter:url" content="" />
ページのURLです。私は、og:urlと共通にしています。
※共通にしている場合は省略可能のようです。
twitter:description
<meta name="twitter:description" content="" />
こちらも他のディスクリプションと共通にしていますが、最適な文字数などを考えた記事も記載していますので、是非そちらもご覧ください。
twitter:image
<meta name="twitter:image" content="" />
共有された際に表示される画像のパスを指定します。
何も設定していない場合はサイト内で使われている画像などが自動で表示されるか、何も表示されない事もあります。
OGPシミュレーター:https://ogimage.tsmallfield.com/
ラッコツールズ:https://rakko.tools/tools/9/
fb:app_id
<meta property="fb:app_id" content="AppID" />
共有用というより、facebookのツールで解析をするために必要になるそうです。
AppIDはFacebookデベロッパーの方で取得することができます。
https://developers.facebook.com/?locale=ja_JP
※慣れていない人は難しいかもしれませんので、調べながら行う事をお勧めします。
※Facebookページをお持ちのクライアントの場合念のため入れるようにしています。
まとめ
og:のみちゃんとしていれば、あまり、SEOこだわらない、SNSからの流入を必要としていない場合などは設定をしなくてもよさそうですが、記述しておいて損はないタグだと思います。