【コピペ可】SNSでシェアできるようにするOGP設定タグ

コーディングでSNSシェア用のOGP設定を忘れていませんか?OGP設定をしておくとSNSでページのシェアをした時にリンクを見やすく表示することができます。

OGP設定とは?

OGP(Open Graph Protocol)は、ページがSNSでシェアされる際にタイトルや説明文、イメージ画像などの設定項目をhtmlのheadタグ内に挿入することでシェアされたページ情報をわかりやすく伝えることができる仕組みです。

OGP設定タグの雛形(コピペ用スニペット)

OGP設定用の雛形を用意しました。適宜、内容を入れ替えて使用してください。

<meta property="og:title" content="タイトル">
<meta name="twitter:title" content="タイトル">
<meta property="og:description" content="ディスクリプション">
<meta name="twitter:description" content="ディスクリプション">
<meta property="og:image" content="画像URL">
<meta name="twitter:image" content="画像URL">
<meta property="og:image:secure_url" content="画像URL">
<meta property="og:url" content="サイトURL">
<meta property="og:site_name" content="サイト名">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary">

OGPが正しく設定されているか確認できるサイト

ラッコツール(OGP確認)

Facebook、Twitter、はてなブックマーク、LINEでのOGPの表示確認を一括で行うことができます。

URLを入力することで、そのページのOGP設定の確認ができます

facebook・twitter・はてなブックマーク・LINEでページをシェアした際のOGP画像・タイトル・説明文を表示(プレビュー)できます

PC版だけでなく、スマートフォン版・アプリ版で表示サイズ・表示文字数が異なるものも、それぞれ全て確認できます

https://rakko.tools/tools/9/

https://rakko.tools/tools/9/

Twitter

https://cards-dev.twitter.com/validator

Facebook

https://developers.facebook.com/tools/debug

LINE

https://poker.line.naver.jp/

公式ドキュメント

OpenGraphProtocol(ogp.me)

https://ogp.me/

Twitter

https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards

Facebook

https://developers.facebook.com/docs/sharing/webmasters/