menu
menu

キーワード検索

 

前月(4月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【CSS】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  4. (10 ↑) 【Mac】MacにInkscapeをインストール
  5. ( 5 - ) 【HTML5】スマホサイトの作成・基本編
  6. ( 8 ↑) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  7. ( 6 ↓) 【CSS】CSSだけでブロック要素の表示非表示(トグルボタン)
  8. ( 4 ↓) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直して...
  9. ( - ↑) 【jQuery】jQueryでドロップダウンメニュー
  10. ( - ↑) 【CSS】スマホサイト向け横にスクロールするナビゲーション
このエントリーをはてなブックマークに追加

【制作Tips】facebook・TwitterのOGP設定

【制作Tips】facebookシェアデバッガー

こんにちは(・∀・)

今日はWebサイトのOGP設定方法について解説します。

OGPとは⁉️

OGPとは「Open Graph Protcol」の略で、facebookやTwitterなどに記事がシェアされた際、そのページが持っている情報をそれらSNSに伝えるためのプロトコルです。

http://ogp.me/

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)」を設定してみた

  • Facebook OGP Open Graph Protcol Twitter
このエントリーをはてなブックマークに追加