OGP(Open Graph Protocol)の設定例

OGPとは、Open Graph Protocolの略で、Facebookやmixi、Google+などのSNS上でWebページの内容を伝えるために定められたプロトコルです。OGPを設定しておくと、URLが共有された際に、設定された画像やタイトル・説明文が表示されるようになり、ユーザーに対して、フィード上あるいはウォール上でWebページの内容を伝えることができます。

1.templates/header.htmlの3行目の
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
 を
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#" xml:lang="ja" lang="ja" dir="ltr">
 に変更する。
※HTML5を導入している場合は、上記ではなくtemplates/header.htmlの3行目あたりの
<head>
 を
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# {if $smarty.server.REQUEST_URI == '/'}website{else}article{/if}: http://ogp.me/ns/{if $smarty.server.REQUEST_URI == '/'}website{else}article{/if}#">
 に変更する。
2.templates/header.htmlの<head>~</head>のメタタグ部分に
  <meta property="og:site_name" content="{$freo.config.basis.title}" />
  <meta property="og:title" content="{if $plugin_title}{$plugin_title} | {elseif $entry.title}{$entry.title} | {elseif $page.title}{$page.title} | {elseif $title}{$title} | {/if}{$freo.config.basis.title}" />
  <meta property="og:url" content="{if $smarty.server.HTTPS and $smarty.server.HTTPS == 'on'}https://{else}http://{/if}{$smarty.server.SERVER_NAME}{$smarty.server.REQUEST_URI}" />
  <meta property="og:type" content="{if $smarty.server.REQUEST_URI == '/'}website{else}article{/if}" />
  <!--{assign var="entry_noline" value=$entry_text.excerpt|smarty:nodefaults|regex_replace:"/[\r\t\n]/":" "}-->
  <!--{assign var="page_noline" value=$page_text.excerpt|smarty:nodefaults|regex_replace:"/[\r\t\n]/":" "}-->
  <meta property="og:description" content="{if $entry.id}{$entry_noline|smarty:nodefaults|strip_tags:false|mb_truncate:200:'...'}{elseif $page.id}{$page_noline|smarty:nodefaults|strip_tags:false|mb_truncate:200:'...'}{else}{$freo.config.basis.description}{/if}" />
  <!--{if $entry.image or $page.image}-->
  <meta property="og:image" content="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}{if $entry.image}entry_images/{$entry.id}/{$entry.image}{elseif $page.image}page_images/{$page.id}/{$page.image}{/if}" />
  <!--{elseif $entry_thumbnail or $page_thumbnail}-->
  <meta property="og:image" content="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}{if $entry.thumbnail}entry_thumbnails/{$entry.id}/{$entry.file}{elseif $page.thumbnail}page_thumbnails/{$page.id}/{$page.file}{/if}" />
  <!--{elseif ($entry.file and $entry_file.width and $entry_file.height) or ($page.file and $page_file.width and $page_file.height)}-->
  <meta property="og:image" content="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}{if $entry.file}entry_files/{$entry.id}/{$entry.file}{elseif $page.file}page_files/{$page.id}/{$page.file}{/if}" />
  <!--{elseif $entry_noline|smarty:nodefaults|regex_match:'/<img[^>]+src="([^"]+\/files\/[^"]+)[^>]+>/i'}-->
  <!--{assign var="og_image" value=$entry_noline|smarty:nodefaults|regex_replace:'/.+?<img[^>]+src="([^"]+\/files\/[^"]+)[^>]+>.+/i':'$1'}-->
  <meta property="og:image" content="{$og_image}" />
  <!--{elseif $page_noline|smarty:nodefaults|regex_match:'/<img[^>]+src="([^"]+\/files\/[^"]+)[^>]+>/i'}-->
  <!--{assign var="og_image" value=$page_noline|smarty:nodefaults|regex_replace:'/.+?<img[^>]+src="([^"]+\/files\/[^"]+)[^>]+>.+/i':'$1'}-->
  <meta property="og:image" content="{$og_image}" />
  <!--{else}-->
  <meta property="og:image" content="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}image.jpg" />
  <!--{/if}-->
 を追加する。
 ※上記設定の解説
    • og:site_name(サイト名)⇒基本設定のタイトル
    • og:title(ページのタイトル)⇒エントリーまたはページのタイトル(<title>~</title>と同じものを使用)
    • og:url(ページのURL)⇒現在開いている場所のURL
    • og:type(ページのオブジェクトタイプ)⇒トップページは"website"(Webサイトのトップページを表す)それ以外は"article"(記事を表す)
    • og:description(ページの概要)⇒エントリー個別表示(view)の場合は記事本文の最初の200字、ページ表示(page)の場合はページ本文の最初の200字、それ以外の場合は基本設定の概要
    • og_image(ページの画像)⇒エントリー個別表示(view)とページ表示(page)の場合は、イメージ > サムネイル > 画像ファイル > 本文に挿入されたfiles/内にある画像 の優先順位で表示、それ以外の場合は下から2行目の部分を独自に設定すること(上記は/files/image.jpgに設定した場合)
3.Twitterカードを導入する場合は、2.の他に
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content="@TwitterのID" />
 を追加する(大きな画像を使用する場合は"summary"を"summary_large_image"に変更)。
4.FacebookでOGPを使用する場合は、2.の他に
  <meta property="fb:app_id" content="appID(15文字の半角数字)" />
 を追加するとFacebookインサイトが利用可能になる。
※appIDの取得にはFacebookへの開発者登録からアプリの初期設定まで必要(fb:adminsを設定する方法もあるが、そこからFacebookの個人アカウントが特定できるためお奨めしない)。
【2017年版】Facebook App ID(アプリID)の取得方法(Suzaku(朱雀))

OGPの設定を確認するツール

  • Open Graph Debugger(Facebook Developers)
    ※使い方はOGP設定を確認したいページのURLを入力して「Debug」ボタンを押す
  • Card Validator(Twitter Developers)
    ※使い方はOGP設定を確認したいページのURLを入力して「Preview card」ボタンを押す


  • 最終更新:2019-01-13 15:07:11

このWIKIを編集するにはパスワード入力が必要です

認証パスワード