Facebookのリンクで表示されるOGP画像を設定

公開日: : 最終更新日:2014/04/08 SEO

OGPとは

Facebookでリンクを貼付けると下のようなサイト情報と画像が表示される。これはOGP(Open Graph Protocol)によるもの。

ogp01

OGPの設定

OGPはHTMLのheadタグ内にメタタグを使って記述。

<meta property="og:title" content="ページのタイトル" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="ページの内容" />
<meta property="og:type" content="ページの種類:例)article,blog,website等" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="表示させる画像のパス" />

画像のサイズ

Facebookの場合、推奨サイズが横1200px、縦630px以上。結構デカい!

OGP画像シミュレータ

作った画像がFacebook上でどのように表示されるか確認できるサービス「OGP画像シミュレータ」。
いろんなシチュエーションでの表示状況を確認できるのですごい便利。
ちなみにこのサイト用に作った画像を読み込ませるとこんな感じ。

ogp02

OGP用Wordpressプラグイン「Open Graph Pro」

WordPressの場合はheader.phpにpostからデータを取得してメタタグを記述してもいいけど、「Open Graph Pro」プラグインを使うと楽。記事内の内容をもとにメタタグを自動生成してくれる。
しかも、記事内のアイキャッチ画像(アイキャッチ画像がなければ記事内の画像)を自動で指定。

「Open Graph Pro」のOGP画像を専用画像に

ちなみにこのサイトではアイキャッチ画像を横200px、縦200pxで作っている。
そのまま使うとあまりよくなかったので専用のOGP画像を用意して指定してみた。

管理画面の[設定] > [Open Graph Pro]に進み「Replace Header Image with」に作った専用画像のパスを指定。

ogp03

「Use Header Image only」のチェックを入れて完了。

ogp04

Facebookのリンクに画像が設定されてるとクリックしたくなる時あるから地味に重要かも。

関連記事

icon_webtan

ページの表示速度を検証する

Web担に掲載されていた記事にページの表示速度を検証するブックマークが紹介されていた。 Firebugのネットタブでも確認できるが、お客さんに見せるのはこっちの方がわかりやすい。 ちなみにこ...

記事を読む

icon_googlesafe

Googleからペナルティを受けているか調べる

自分のサイトや作成したサイトがGoogleからペナルティを受けているかをGoogleセーフブラウジングで調べる。 Googleセーフブラウジング 「http://www.google.com/...

記事を読む

wp
WordPressフロントページ設定とテンプレート

固定ページに最新投稿一覧を表示させた時の使用テンプレートが何なのか調べる機会があったので保存。 管理画面「設定」→「表示設定」の「フロントページの表示」 「最新の投稿」選択時 フロントページ...

js
GoogleMap左上の白い枠を消す

左上の白い枠を消してほしいという要望が多いので。よく使うマップコードをスクラップ。 <!doctype html> <html> <head>...

wp
WordPressでよく使う関数

string get_site_url( ] ] ) 管理者ページの「設定」-「一般」の「WordPressのアドレス(URL)」 現在のブログのサイトURL取得 [php]<?php ...

wp
WordPressにFacebookのいいねボタン

WordPressにFacebookのいいねボタンを表示する。 コピペで対応したい時用 <body>の直後に記述するコード <div id="fb-root&qu...

js
スムーススクロールを作る – 応用

指定位置にするするとスクロールするプログラムを作ります。 必要な値は? ページ内スクロールをした際のゴール地点「y座標」の値 画面に必要なパーツは? 高さのあるコン...

→もっと見る

    • icon_sublime1
      41,290 views

      ファイルの操作 ファイル名を検索して開く Windows:Ctrl+P Mac:Cmd+P 表示された入力欄にファイル名の一部を入力すると検索結果が表示されるので選択して開きます。 使用言語の指定 Windows:Ctrl+Shift+P Mac:Cmd+Shift+P 表示された入力欄に使用する言語名の一部を入力すると検索結果に「Set Syntax」が表示されるので選択しま...

    • 曜日番号
      18,059 views

      現在の曜日番号を表示 [php]<?php //現在の曜日番号(日:0 月:1 火:2 水:3 木:4 金:5 土:6)を取得 $weekno = date('w'); //現在の曜日番号出力 echo $weekno; ?>[/php] 現在の曜日を表示 [php]<?php //日本語の曜日配列 $weekjp = array( '日', //0 ...

    • wp
      8,632 views

      WordPressの固定ページに投稿ページの最新記事を表示する。 [php]<?php //最新5件を表示 $paged = get_query_var('paged'); //現在のページ番号 $num = 5; //表示件数 query_posts('posts_per_page='.$num.'&paged='.$paged); if ( have_posts() ) :...

    • groupby
      6,374 views

      まずここをチェック!を先に 「フィールド名=NULL」はダメ 「フィールド名 IS NULL」を使う やりたいこと 会員を全員の名前を表示したい 最新の予約日付を表示したい 使用するテーブル 会員テーブル [ps]mysql> SELECT * FROM member; +----+--------+ | id | name | +----+----...

    • icon_kaiten
      5,798 views

      jQueryのanimateメソッドを使って要素を回転させてみるプログラム。 サンプルデータ [js] $('#box1').animate( {'z-index': 1},//z-indexを0から1に変更する { duration: 1000, //アニメーションの時間 //ステップ中の処理 //引数num:処理途中の変化している値 step: f...

PAGE TOP ↑
←幅を狭くする