9月更新・前月(8月)の人気記事トップ10 09/02/2024
- ( 01 – ) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 07 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 03 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- ( 10 ↑) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- (圏外↑) 【Labs】CSSだけでドロップダウンメニュー
- ( 02 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 09 ↑) 【Mac】Safariでソースコードを見る方法
- ( 04 ↓) 【jQuery】入門7. jQueryで新しいWindowを開く
- ( 06 ↓) 【2024年5月】iPad画面解像度まとめ
- (圏外↑) 【GIMP】レイヤーをロック
【Labs】facebook・TwitterのOGP設定
こんにちは（・∀・）
今日はWebサイトのOGP設定方法について解説します。
OGPとは⁉️
OGPとは「Open Graph Protcol」の略で、facebookやTwitterなどに記事がシェアされた際、そのページが持っている情報をそれらSNSに伝えるためのプロトコルです。
OGPの設定
今回はfacebookとTwitter用のOGPの設定方法をご紹介します。
html要素に次のコードを記述します。
<html prefix="og: http://ogp.me/ns#">
head要素内に次のコードを記述します。
<!--共通-->
<meta property="og:type" content="ページのタイプ">
<meta property="og:url" content="ページのURL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:image" content="画像のURL">
<meta property="og:locale" content="地域">
<meta property="og:site_name" content="サイト名">
<meta property="og:description" content="ページのディスクリプション">
<!--facebook-->
<meta property="fb:app_id" content="facebookのApp ID">
<meta property="article:publisher" content="FacebookページのURL">
<!--Twitter-->
<meta name="twitter:card" content="Twitterカードの種類">
<meta name="twitter:site" content="@ユーザー名">
以上が基本的なOGP設定です。
og:type
ページのタイプを記載
website、article、blog等を指定をします。トップページに「website」、下層ページに「article」などと指定すれば良いと思います。
og:url
URLを記述
og:title
ページタイトルを記述
og:image
SNSに表示させたい画像のURLを記述
Facebook推奨サイズは、横1200px × 縦630pxです。
og:locale
地域の指定
日本なら「ja_JP」です。
og:site_name
Webサイトの名前を記述
og:description
Webサイトのディスクリプションを記述
fb:app_id
facebookのApp IDを記述
facebook App IDの記述が必要です。なければ取得してください。
article:publisher
FacebookページのURLを記述
twitter:card
Twitterカードの種類を選択
シェアされた内容がタイムラインに表示される際、通常の大きさで良い場合は「summary」、大きく表示したい場合は「summary_large_image」を選択してください。
twitter:site
@ユーザー名
@で始まるユーザー名を記述してください。
その他、twitter:title、twitter:description、twitter:imageがありますが、それらはfacebook OGPで設定されていれば共有できるので省略することができます。
OGP設定についてでしたが、いかがでしたでしょうか、設定自体はそれ程難しくありません。Webサイトがシェアされた時の印象が変わりますので、ぜひOGPは設定しておきましょう❗️
参考サイト
【2016年版】Facebook、Twitterに最適なOGP記述設定まとめ
ツイートにページ情報を表示する「Twitterカード（Twitter Cards）」を設定してみた