menu
menu

キーワード検索

 

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

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

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

  • Labs

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

  • カテゴリー:Labs
このエントリーをはてなブックマークに追加