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# article: http://ogp.me/ns/article#">
 に変更する。
2.templates/header.htmlの<head>~</head>のメタタグ部分に
    <meta property="og:site_name" content="{$freo.config.basis.title}" />
    <meta property="og:title" content="{if $entry.title}{$entry.title} | {elseif $page.title}{$page.title} | {/if}{$freo.config.basis.title}" />
    <meta property="og:url" content="{$freo.core.http_file}{$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}-->
    <meta property="og:image" content="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_images/{$entry.id}/{$entry.image}" />
    <!--{elseif $entry_thumbnail}-->
    <meta property="og:image" content="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_thumbnails/{$entry.id}/{$entry.file}" />
    <!--{elseif $entry.file and $entry_file.width and $entry_file.height}-->
    <meta property="og:image" content="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/{$entry.id}/{$entry.file}" />
    <!--{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.image}-->
    <meta property="og:image" content="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_images/{$page.id}/{$page.image}" />
    <!--{elseif $page_thumbnail}-->
    <meta property="og:image" content="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_thumbnails/{$page.id}/{$page.file}" />
    <!--{elseif $page.file and $page_file.width and $page_file.height}-->
    <meta property="og:image" content="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_files/{$page.id}/{$page.file}" />
    <!--{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文字の半角数字)" />
 を追加する。
※appIDの取得にはFacebookへの開発者登録からアプリの初期設定まで必要(fb:adminsを設定する方法もあるが、そこからFacebookの個人アカウントが特定できるためお奨めしない)。
【2016年版】Facebook App ID(アプリID)の取得方法(Suzaku(朱雀))

  • Open Graph Debugger(Facebook Developers)
    OGPの設定を確認するツール
    ※使い方はOGP設定を確認したいページのURLを入力して「デバッグ」ボタンを押す


  • 最終更新:2016-06-17 21:17:05

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

認証パスワード