ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

facebookのOGPをWordPressに追加する

OGP(Open Graph Protocol)を追加する方法と、参考になるサイトを紹介しています。

facebookの他、mixiやグリーなどのSNSに導入されているOPG(Open Graph Protocol)は、metaタグにOGP情報を追加することで、facebookの「いいね」「シェア」ボタンを押したユーザーのウォールに表示される内容をコントロールできます。

OGPタグの追加方法

1.htmlタグを編集

まずはhtmlタグにOGP情報を追加します。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" xmlns:fb="http://www.facebook.com/2008/fbml">

mixi、グリーのOGPにも対応させる場合のhtmlタグは下記に変更してください。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr" xmlns:og="http://ogp.me/ns#" xmlns:mixi="http://mixi-platform.com/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

2.OGPのmetaタグを追加

続いてOGPのmetaタグを追加していきます。
OGPのmetaタグの「ページタイプ」「ページのタイトル」「ページのURL」は必須になります。

ページタイプ(og:type)には、ブログ記事なので「article」を選択します。 ブログの場合はトップページは「blog」、記事ページは「article」とするのが一般的のようです。 ページタイプの一覧はfacebookのOGP一覧に書かれています。

facebookのウォールなどに表示させる画像をコントロールするタグは「og:image」になります。 画像サイズは、横50×縦50で用意します。

このブログでは下記のOGPを設定しています。

<meta property="og:site_name" content="ブログ名" /><!--サイト名-->
<meta property="og:type" content="article"><!--必須。ページのタイプ-->
<meta property="og:image" content="meta-img.png" /><!--ウォールなどに表示させる画像 50×50-->
<meta property="og:title" content="ブログ記事タイトル" /><!--必須 このページのタイトル-->
<meta property="og:url" content="記事のURL" /><!--必須 このページのURL-->
<meta property="og:description" content="記事の概要" /><!--このページの概要-->
<meta property="og:locale" content="ja_JP" /><!--サイトの言語-->
<meta property="fb:app_id" content="XXXXXXXXXXXXXXX" /><!--FBページのid-->

WordPress用にしたのが下記になります

<?php if(is_single()||is_page()) { ?>
<?php while (have_posts()) : the_post(); ?>
<meta property="og:title" content="<?php the_title(); ?> | <?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php the_excerpt(); ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:image" content="<?php echo get_bloginfo('template_directory') . '/common/img/basic/fb.png'; ?>" />
<meta property="og:author" content="ITTI" />
<?php endwhile; ?>

<?php } else { ?>
<meta property="og:title" content="<?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="og:url" content="<?php echo get_bloginfo('url') . $_SERVER['REQUEST_URI']; ?>" />
<meta property="og:image" content="<?php echo get_bloginfo('template_directory') . '/common/img/basic/fb.png'; ?>" />
<?php } ?>

<meta property="og:site_name" content="<?php bloginfo('name'); ?> | <?php bloginfo('description'); ?>" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="XXXXXXXXXXXXXXX" />

その他、住所、電話番号、動画、音声に関するOGPのmetaタグなどもあります。

 

新しい記事

東京のWEB制作会社イッティ