「Open Graph Protocol」の略。
SNSやwebページやブログの記事をシェアした時、メッセージ機能でページのURLを送信した時、
そのページのタイトル、URL、概要、画像を表示させる仕組み。
ページの内容をわかりやすくユーザーに伝えることができます。
タイムラインでリンクが流れてきたとき、サイトのタイトルだけ、リンクσだけでは、どんな内容なのかわからないし、クリックしてもらいにくいですよね。
サイトの概要や、アイキャッチ画像などで、見た人が興味を惹きやすくなります。
htmlに宣言
<html lang="ja" prefix="og: http://ogp.me/ns#">
(Facebook)Headerに記述
<meta property="og:title" content="タイトル">
<meta property="og:type" content="website または blog または article">
<meta property="og:description" content="ページの簡単な説明">
<meta property="og:url" content="ページのURL">
<meta property="og:site_name" content="サイトのタイトル">
<meta property="og:image" content="サムネイル画像のURL>
最近のWPテーマは、カスタマイズで設定できることが多い
(Twitter)Headerに記述
<!-- Twitterアカウントを指定します -->
<meta name="twitter:site" content="@remopro" />
<!-- 対象ページのタイトルを設定します -->
<meta name="twitter:title" content="日常スコープ" />
<!-- 対象ページの概要を設定します -->
<meta name="twitter:description" content="WEB・デザイン・生活・マネー・ビジネスのブログです" />
<!-- サムネイル画像のURLを指定します -->
<meta name="twitter:image" content="https://〇〇/〇〇/〇〇.jpg" />
<!-- サムネイルを小さく表示する場合はSummary Cardを指定します -->
<meta name="twitter:card" content="summary" />
<!-- サムネイルを大きく表示する場合はSummary Card with Large Imageを指定します -->
<meta name="twitter:card" content="summary_large_image" />
最近のWPテーマは、カスタマイズで設定できることが多い
次にアクセスして、更新後反映される