【10分で終了】facebook投稿時にサムネイルを表示するためのOGP設定-WordPressカスタマイズ

ogp facebookでブログ記事を拡散したいなら必ず設定しないといけないのがOGPです。プラグインは使わずに、コピペするだけで設定が終わるスニペットを作ってみました。（HTML5用、header.phpに貼り付け）

OGPとは

OGPはOpen Graph Protocolの略語です。ウェブページの内容をプログラムが把握しやすい形式で書いたものです。その形式は以下の通り

<meta property="og:title" content="ページタイトル">
<meta property="og:type" content="トップページはwesiteそれ以外はarticle">
<meta property="og:description" content="ページの概要">
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="フェイスブックに投稿したときに表示するサムネイル画像のURL">
<meta property="og:site_name" content="サイト名">
<meta property="fb:admins" content="fb:adminsナンバー">

このページの実際のOGP設定は以下のようになっています。

<meta property="og:title" content="【コピペで即使用可】WordPressのOGP設定はこれだけでOK！｜ウェブシュフ">
<meta property="og:type" content="article">
<meta property="og:description" content="facebookでブログ記事を拡散したいなら必ず設定しないといけないのがOGPです。設定用のプラグインもありますが、プラグインは使わずに済むならそれに越したことはないので、コピペするだけで設定が終わるスニペットを作ってみました。">
<meta property="og:url" content="https://webshufu.com/setting-ogp-in-wordpress/">
<meta property="og:image" content="https://webshufu.com/top/wp-content/uploads/2013/01/2013-01-27_1723-ogp.png">
<meta property="og:site_name" content="ウェブシュフ">
<meta property="fb:admins" content="●●●●●●●●●●●●●●●●●●●●●●●">

OGPを設定しないと不便

facebookのシェア投稿もOGPを利用しています。ですから、wordpressの記事をfacebookを通じて拡散したいなら、OGPを導入しないといけません。

ウェブシュフがOGPを導入していなかった頃は、ブログ記事をfacebookに投稿してもサムネイルが自動的には表示されずに、手動で画像を貼ったりしていました。

ここで「あ～面倒くせ」と思ったのがOGPを設定するきっかけでした。

og:titleの設定

ここからOGPの設定に入ります。色々説明していますが、手っ取り早くOGP設定を完成させたい人は、説明そっちのけでコピペに専念してください。

og:titleは<head>～</head>内の<title>～</title>と同じ設定にするのが自然です。

ウェブシュフの場合は、og:titleの設定のためのコードは以下の通りになります。（<head>～</head>内に貼り付けてください。）

<?php if ( is_home() ) {
    $title=get_bloginfo('name');
} 
else 
{
    $title=wp_title( '', false, 'right' ).'｜'.get_bloginfo('name');
}
if ( $paged >= 2 || $page >= 2)
{
    if(is_home)
    {
    $title=$title.'-記事一覧-'.max( $paged, $page ).'ページ目｜';
    }
    else
    {
    $title=str_replace('｜','-'.max( $paged, $page ).'ページ目｜', $title);
    }
}
?>
<meta property="og:title" content="<?php echo $title; ?>">

og:typeの設定

トップページはwebsiteそれ以外はarticleなので、<head>～</head>内に以下を記述すればOK。

<?php if(is_home())
{
$og_type="website";
}
else
{
$og_type="article";
}
?>
<meta property="og:type" content="<?php echo $og_type; ?>">

og:descriptionの設定

og:descriptionはそのページの概要なので、<head>～</head>内の<meta name=”description” content=”～” />の設定と同じ考え方で設定するのが自然です。

よって、og:descriptionの設定のためのコードは以下の通りになります。（<head>～</head>内に貼り付けてください。）

<?php if ( is_home() ) {
    $description=get_bloginfo('description');
} 
else if (is_category())
{
    $description=str_replace("\n", "", category_description());
}
else if (is_page())
{ 
    $description=get_the_excerpt();
}
else if (is_single())
{ 
    $description=get_the_excerpt();
}
if ( $paged >= 2 || $page >= 2)
{
    $description="";
}
/***余分な</p>を取り除く***/
$description=str_replace("<p>", "", $description);
$description=str_replace("</p>", "", $description);
/***余分な<p></p>を取り除く（終）***/
?>
<meta property="og:description" content="<?php echo $description; ?>">

og:urlの設定

og:urlはそのページの正式なURLなので、その意味するところはcanonical urlと同じです。

よって、og:urlの設定のためのコードは以下の通りになります。（<head>～</head>内に貼り付けてください。）

<?php if ( is_home() ) {
    $canonical_url=get_bloginfo('url')."/";
} 
else if (is_category())
{
    $canonical_url=get_category_link(get_query_var('cat'));
}
else if (is_page()||is_single())
{ 
    $canonical_url=get_permalink();
}
if ( $paged >= 2 || $page >= 2)
{
    $canonical_url=$canonical_url.'page/'.max( $paged, $page ).'/';
}
?>
<meta property="og:url" content="<?php echo $canonical_url; ?>">

og:imageの設定

og:imageはサムネイル画像を指定する場所です。ウェブシュフはこの記事と同じ考え方でog:imageを設定しました。

コードは以下の通りです。（<head>～</head>内に貼り付けてください。）

<?php 
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (has_post_thumbnail() && ! is_archive() && ! is_front_page() && ! is_home())
{//投稿にサムネイルがある場合の処理
     $image_id = get_post_thumbnail_id();
     $image = wp_get_attachment_image_src( $image_id, 'full');
     $ogimage=$image[0];
} 
else if ( preg_match( $searchPattern, $str, $imgurl ) &&is_single()) 
{//投稿にサムネイルは無いが画像がある場合の処理
     $ogimage=$imgurl[2];
} 
else 
{//投稿にサムネイルも画像も無い場合、もしくはアーカイブページの処理
     $ogimage=get_bloginfo('url')."/top/wp-content/uploads/2013/01/2013-01-20_1952.png";
}
?>
<meta property="og:image" content="<?php echo $ogimage; ?>">

og:site_nameの設定

ここは、説明不要だと思います。

<meta property="og:site_name" content="<?php echo get_bloginfo('name'); ?>">

fb:adminsの設定

2013-01-27_1334_get-open-graph-tags_001 fb:adminsの番号は、以下のようにして取得します。

まず、フェイスブックにログインした状態でLike Button – Facebook開発者に行きます。

次に、下スクロールして、Step 2 – Get Open Graph Tagsの直下の入力フォームを見てください。（左図）

すると、「admin」の下の欄にはすでに数字が入っていると思います。これが、fb:adminsの番号です。

あとは、<head>～</head>内に以下を記述すればOK。

<meta property="fb:admins" content="今調べたfb:adminsの番号">

DOCTYPE宣言直後に挿入する1行

最後に、DOCTYPE宣言直後、<head>の直前に次の1行を入れます。

<html lang="ja" prefix="og: http://ogp.me/ns# fb: http://www.facebook.com/2008/fbml">

これで、facebookに記事を投稿すると自動的にサムネイルが表示されるようになります。

お疲れ様でした。

追記

2013/3/16追記：大き目のサムネイルを確実に表示する方法も参考にしてください。

追記：facebook投稿時に大きいサムネイル画像を100％確実に表示する方法

facebookにブログ記事を投稿すると、今までに比べて大きいサムネイルが表示されるようになりました。とはいっても、正しい手順を踏まないと表示されないようなので、これなら間違いないという方法をご紹介します。

新旧のサムネイルを比較すると、どちらがより読者をひきつけるかは一目瞭然です。

従来の小サムネイル（90X90）

従来の小サムネイル

新登場の大サムネイル（154X154）

従来の小サムネイル

確実に大きいサムネイルを表示する方法

確実に大きいサムネイルを表示するには、以下の3点を守ってください。

og:imageに大きい画像を設定する

facebookでサムネイルとして表示されるのはOGPのog:imageに設定された画像です。

この画像が154X154より小さいと、大サムネイルは表示されません。

og:imageの画像は正方形か横4縦3の長方形に近い形にする

また、いくら大きい画像を設定していても、あまりに横長すぎたり縦長すぎたりする画像をog:imageに設定していると、サムネイルの周りに変な隙間が出てきます。

横長すぎる画像を設定してサムネイルの上下に隙間が出来てしまった例
従来の小サムネイル

適切な形の画像を設定したためサムネイルの周りに隙間が出来ていない例
従来の小サムネイル

手動で投稿

また、dlvr.itなどを使ってfacebookへの投稿を自動化していると、小さいサムネイルしか表示されません。

面倒でも手動で投稿し、どうせなら一言コメントでも添えて、血の通った投稿にしましょう。

さらに大きい画像を投稿するには

写真投稿しかありません。下の図のように大きく表示されます。もちろん手動で投稿しないといけません。

従来の小サムネイル

最後に

ウェブシュフは、この機会にフェイスブックの投稿を手動にしました。

そのほうが、自分のアカウントに人間味が出ると思います。

皆さんはいかがですか。

Special Thanks

[img-link url=”http://wayohoo.com/facebook/tips/how-to-share-impact-post.html” title=”【Facebook】インパクトのあるシェア投稿にするために必要な3つのテクニック。”][img-link url=”http://gaiax-socialmedialab.jp/facebook/172″ title=”WordPressでFacebookからのアクセス数を簡単に増やすための3つの設定手順 | シェア時の画像サイズを3倍にしよう！”]

投稿日

2013年1月27日

カテゴリー:

未分類

投稿者:

webshufu

　最終更新日:

2024年3月2日

タグ: