OGP(Open Graph Protcol)とは、SNSでシェアされた時に表示されるサムネイル画像です。
検索キーワードを使用する場合とは違い、SNSで気になるサイトや記事を見つけた場合、クリックする・しないの判断はOGP次第なので、とても影響のある要素です。
OGPの設定
Facebookが提唱した仕様で、標準化されていないので、各メディアによって仕様が異なります。
基本設定
htmlのheadタグに以下のコードを設定
<head prefix="og: https://ogp.me/ns#"> </head>
Facebookの設定
<meta property="og:url" content="ページのURL"/> <meta property="og:type" content="ページの種類(website または blog または article)"/> <meta property="og:title" content="ページのタイトル"/> <meta property="og:description" content="ページの概要"/> <meta property="og:site_name" content="ページのサイト名"/> <meta property="og:image" content="サムネイル画像のURL"/>
設定する内容
プロパティ | 設定される項目・内容 |
title | ページのタイトル見出し |
discription | ページの紹介文 |
url | このページのURL |
type | このページの種類 (article、blog、websiteのどれかを指定する) |
site_name | このページが所属するWebサイトの名前 |
image | 表示したいイメージ画像のURL |
X(Twitter)の設定
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@your_account">