menu
menu

キーワード検索

 

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

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 3 - ) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 4 - ) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 6 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  6. ( 5 ↓) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  7. ( 9 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  8. ( 8 - ) 【CSS】レスポンシブデザインのブレークポイントは⁉
  9. (10 ↑) 【Mac】iMovieの保存場所を変更する
  10. ( - ↑) 【PHP】PHPでシンプルなメールフォーム
このエントリーをはてなブックマークに追加

【制作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
このエントリーをはてなブックマークに追加