webサイト制作の勉強|2024年5月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

OGP(Open Graph Protcol)とは

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

Facebookシェアデバッカー

developers.facebook.com


X(Twitter)の設定

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@your_account">

画像サイズ

OGPの画像サイズは1200px×630pxを推奨




mieru-ca.com