【コピペ可】SNSシェア用のOGPを設定するタグ

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

OGP設定とは？

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

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

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

<meta property="og:title" content="タイトル">
<meta property="og:description" content="ディスクリプション">
<meta property="og: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:title" content="タイトル">
<meta name="twitter:description" content="ディスクリプション">
<meta name="twitter:image" content="画像URL">
<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/