SNS関係は年代の関係もあり、Facebookをたまに見る程度ですが、WEBサイトとSNSの連携は必須となってきています。 OGP（Open Graph Protocol）設定はした方がいいとよく聞くので調べてみました。 OGPはWebページのメタデータをソーシャルメディアプラットフォーム上でより魅力的かつ詳細に表示するためのプロトコルです。Facebookによって開発されましたが、現在では多くのソーシャルメディアや検索エンジンがこのプロトコルを使用しています。
OGPを使用すると、Webページのタイトル、説明、画像などの情報を指定することができます。これにより、そのページがソーシャルメディア上で共有された際に、特定の画像やテキストが表示され、より魅力的な共有結果を得ることができます。例えば、記事やブログポストがFacebookやTwitterで共有される際、OGPタグによって設定された特定の画像や説明文が表示されるようになるとのことです。
OGPタグはHTMLの<head>セクションに追加され、以下のような形式をとります：
<head> <!– ここに他のメタタグやリンクタグがあるとします –>
<!– OGPタグの例 –>
<meta property=”og:title” content=”ページのタイトル” />
<meta property=”og:type” content=”website” />
<meta property=”og:url” content=”https://www.example.com/page-url” />
<meta property=”og:image” content=”https://www.example.com/image.jpg” />
<meta property=”og:description” content=”このページの簡潔な説明” />
<meta property=”og:site_name” content=”サイトの名前” />
<!– Twitterカードに対応する場合は、以下のようなタグも追加することがあります –>
<meta name=”twitter:card” content=”summary_large_image”>
<meta name=”twitter:site” content=”@Twitterユーザー名”>
<meta name=”twitter:title” content=”ページのタイトル”>
<meta name=”twitter:description” content=”このページの簡潔な説明”>
<meta name=”twitter:image” content=”https://www.example.com/image.jpg”>
</head>
この例では、OGPタグを使用してWebページのタイトル、タイプ（この場合はウェブサイト）、URL、共有時に表示される画像、ページの説明、およびサイト名を設定しています。また、Twitterカードに対応するための追加のメタタグも示しています。これらのタグは、Twitter上でページが共有された際にどのように表示されるかを制御するために使用されます。
このブログもFacebookで、共有した時に下記のように表示されました。
OGPについては、知識が足りていないところがあるので、また、機会がありましたら、」追記していきたいと思います。
