SNSにサイトの情報を連携する「OGPタグ」

ウェブサイトを制作するうえで、サイトを広く告知していく必要があるのですが、その気に役に立つ方法としてSNSとの連携があります。

SNSにURLをコピーするとサイトの情報が挿入されると思うのですが、これはどういう仕組みになっているのでしょうか。

OGPタグと言う情報をサイトに埋め込むと、そのサイトの情報をSNSに連携することができるのです。

OGP（Open Graph Protocol）タグは、SNSなどでウェブページがシェアされた際に、リンクプレビューとして表示される情報を制御するためのタグです。OGPタグを使うと、サイトの見栄えや印象を良くし、ユーザーがコンテンツをシェアしたくなるようなプレビューを作成できます。

OGPタグはHTMLの<head>内に記述します。主なOGPタグは以下の4つです：

og:title
ページのタイトルを設定します。SNSで表示されるページのタイトルとして使われ、記事や商品名などが分かりやすく伝わります。

<meta property="og:title" content="サイトのタイトル">
og:description
ページの説明文を設定します。こちらは、タイトルの下に短い説明として表示され、ユーザーにページの内容を簡単に伝えます。SNSではこの部分が特に重要です。

<meta property="og:description" content="サイトの概要説明">
og:image
シェア時に表示される画像を指定します。魅力的な画像を設定することで、ユーザーが目を引き、クリック率が向上します。画像は一般的に1200×630ピクセルのサイズが推奨されています。

<meta property="og:image" content="https://example.com/image.jpg">
og:url
ページのURLを指定します。これは、シェア時のリンク先URLを明示するためのものです。正規URL（canonical URL）を指定するのが一般的です。

<meta property="og:url" content="https://example.com/page.html">

OGPにはさらに多くのタグがあります。たとえば、ページの種類を示す「og:type」タグ（articleやwebsiteなど）や、サイト名を示す「og:site_name」タグなどが使われます。

OGPタグを設定することで、SNSでの見た目や印象が改善され、クリック率やシェア率が向上する可能性があります。特にFacebookやTwitterなどではOGPに対応しており、設定しておくことで情報が整った形で表示されるため、SEO対策にもつながります。

OGPタグの詳細は、公式サイトのOpen Graph Protocolにも記載されているので参考にすると良いでしょう。