【WordPress】Stinger3にFacebookのOGP設定をしたよ。

公開日: : wordpress

当ブログもたまにツイッターでシェアしてくれたり、フェイスブックでいいね!してくれたりする記事があるので、せっかくシェアされたチャンスをもっと活かせるようにきちんと設定をしておくことにしました。
まずはフェイスブックのOGP設定をしましたので、Stinger3でフェイスブックのOGP設定をする方法としてまとめておきたいと思います。
OGP設定ってなによ?って方はここらへんが参考になるかと。

事前準備

テンプレートのカスタマイズをするので、Stinger3の子テーマを作成しておきます。(今回カスタマイズするのは、header.phpのみです。)
フェイスブックのアカウントが必須ですので、持ってない方は登録します。
fb:app_idを使う場合はapp_idの登録もします。

最終的にはき出したいOGP用のHTMLコードは以下です。

投稿・固定ページ用

<meta property="og:title" content="【ページタイトル】">
<meta property="og:type" content="article">
<meta property="og:url" content="【ページのURL】">
<meta property="og:image" content="【アイキャッチ画像(ない場合の設定も一応)】">
<meta property="og:description" content="【ページの説明文】">
<meta property="og:site_name" content="【ブログ名】">
<meta property="fb:app_id" content="【FacebookのAPP ID】">

アーカイブページ用

<meta property="og:title" content="【ページタイトル】">
<meta property="og:type" content="article">
<meta property="og:url" content="【ページのURL】">
<meta property="og:image" content="【アーカイブ用の画像】">
<meta property="og:description" content="【アーカイブの説明文】">
<meta property="og:site_name" content="【ブログ名】">
<meta property="fb:app_id" content="【FacebookのAPP ID】">

トップページ用

<meta property="og:title" content="【ブログ名】">
<meta property="og:type" content="blog">
<meta property="og:url" content="【サイトのURL】">
<meta property="og:image" content="【トップページ用の画像】">
<meta property="og:description" content="【ブログの説明文】">
<meta property="og:site_name" content="【サイトタイトル】">
<meta property="fb:app_id" content="【FacebookのAPP ID">

上記のコードをWordPressに吐き出させるためのコードが以下です。

まず、header.phpの先頭の

<html <?php language_attributes(); ?>>

を、以下に書き換えます。

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" xmlns:og="http://ogp.me/ns#">

 

さらにちょっと長いですが、以下のコードを、header.phpの<head>セクションに追記します。
このコードは、Electric Fruits(エレクトリック・フルーツ)さんの記事で公開されていたものをちょっとカスタマイズさせていただきました。
【Wordpress】プラグインを使わずにOGPを設定する方法 - WEBサイト制作のElectric Fruits

<!--//OGP設定ここから-->
<?php
if(is_single() || is_page()):// for single page ogp
?>
<meta property="og:title" content="<?php wp_title(''); ?>">
<meta property="og:type" content="<?php echo 'article'; ?>">
<meta property="og:url" content="<?php the_permalink(); ?>">
<meta property="og:image" content="<?php
//アイキャッチ画像が設定されている場合の画像指定
if(has_post_thumbnail()):
 $opgimg_id = get_post_thumbnail_id();
 $opgimg = wp_get_attachment_image_src($opgimg_id,$size="full",$icon=false);
 echo esc_url($opgimg[0]);
 else ://アイキャッチ画像が設定されていない場合の画像の指定
 echo esc_url(home_url('/')) . 'img/ogp-article-logo.jpg';
endif;
?>">
<meta property='og:description' content='<?php the_excerpt(); ?>'>

<?php
 elseif(is_archive())://for archive page ogp
?>
<meta property="og:title" content="<?php wp_title(''); ?>">
<meta property="og:type" content="<?php echo 'article'; ?>">
<meta property="og:url" content="<?php
 echo esc_url(home_url('','http') . $_SERVER['REQUEST_URI']);
?>">
<meta property="og:image" content="<?php
 echo esc_url(home_url('/')) . 'img/ogp-archive-logo.jpg';
?>">
<meta property="og:description" content="<?php bloginfo('description')?>">

<?php elseif(is_front_page())://for front_page ogp ?>
<meta property="og:title" content="<?php bloginfo('name')?>">
<meta property="og:type" content="blog">
<meta property="og:url" content="<?php echo esc_url(home_url('/')); ?>">
<meta property="og:image" content="<?php echo esc_url(home_url('/')) . 'img/ogp-front-logo.jpg'; ?>">
<meta property="og:description" content="<?php bloginfo('description')?>">
<?php endif; ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="fb:app_id" content="【それぞれのFacebookのapp_idに置き換え】">
<!--//OGP設定ここまで-->

コードの解説

if(is_single() || is_page()): // for single page ogp
elseif(is_archive()): //for archive page ogp
elseif(is_front_page()): //for front_page ogp

と条件分岐していて、それぞれ、投稿・固定ページ用、アーカイブページ用、トップページ用と3パターンの設定をしています。

投稿・固定ページ用の画像にはアイキャッチ画像を使用するようにしており、もしアイキャッチ画像が設定されていない場合は、ogp-article-logo.jpgという画像を表示するようにしています。
基本的にアイキャッチ画像を設定しないって選択肢はないのですが、まあ一応設定しておきました。

画像のパスとかファイル名とかはそれぞれ好きなものに変更してお使いください。

アーカイブページとトップページ用の画像はそれぞれ、ogp-archive-logo.jpgとogp-front-logo.jpgという画像を固定で設定しています。
カテゴリ毎に表示する画像を変えたいという場合は、Advanced Custom Fieldsでカテゴリにカスタムフィールドを追加し表示する方法を見て頂ければ設定できると思います。

アーカイブ用の説明文もちょっと手抜きしてブログの説明文を表示するようにしていますが、カテゴリの説明文を表示するようにしてもいいと思います。
カテゴリページがシェアされることはまあないかな?と思い、ちょっとここらへんは手抜きしています。

最後に、投稿・固定ページ用、アーカイブページ用、トップページ用で共通に表示される項目として、
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="fb:app_id" content="【それぞれのFacebookのapp_idに置き換え】">

で、ブログ名とFacebookのapp_idを表示しています。

app_idではなく、
<meta property="fb:admins" content="facebookのユーザーID" />
を使ってもOKです。

正しく設置できているか確認

以下のページにチェックしたいURLを入れて正しく設定できているか確認することができます。
https://developers.facebook.com/tools/debug
(※Facebookへのログインが必要です。)

関連記事

TablePressにも対応!横長テーブルのスマホ対応はFooTableで決まり。【WordPressプラグイン】

グーグルが「スマホ対応ができているかどうかを4/21からランキング決定要因に加えるよ~。」と異例の事

記事を読む

【WordPress】iframeを使わずにはてなのブログカード風に外部リンクをデザインするショートコード

先日、WordPressで自分のブログ内のほかの記事に内部リンクを貼る場合に、はてなブログなんかでよ

記事を読む

【WordPressプラグイン】画像アップロード時に自動で透かしを入れられる『Easy Watermark』で画像の不正利用を防ごう!

サイトやブログに画像をアップする際に、著作権フリーの無料素材画像などならともかく、自分で撮影した

記事を読む

投稿記事内でスマホ用とPC用で出力するコンテンツを条件分岐させる方法

前回は、テーブル表示をPC・スマホ両方に対応させるレスポンシブ化する方法をご紹介しましたが、今回も引

記事を読む

host2

サーバー移転時にDNSの浸透を待たずに新旧サーバーに自在にアクセスする方法

今回は、独自ドメインでwebサイトを運用している方向けのTIPSです。 サーバーの引越時などに、新サ

記事を読む

093

複数のカテゴリ(ターム)に属する投稿を抽出してアーカイブに表示する方法

たとえば、全国の飲食店を紹介するサイトをWordPressで構築するとします。 そのときに、カ

記事を読む

【WordPress】記事ごとにアドセンスの表示・非表示を設定し、代替広告を表示するカスタマイズ

先日、ブロガーの桃音さんにアドセンスの警告が来たということで話題になっていました。  

記事を読む

スクリーンショット 2014-11-16 12.07

【WordPress】「下書きを保存しています…」と表示されたまま投稿画面で記事の保存ができなくなる。

先日、いつも通りこのブログを更新しようと記事を書いていたところ、WordPressの投稿画面で、

記事を読む

education-614155_640

【WordPress】内部リンクをはてなのブログカード風のサムネイル付きリンクにデザインするショートコード

はてなブログで使われているブログカードみたいなデザインで、WordPressで内部リンクを貼るこ

記事を読む

contactform7-spam5

contact form 7からのうざい迷惑メールを完全に届かなくする方法

WordPressでお問い合わせフォームを設置する際に超便利なプラグイン『contact for

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


第一滝本館外観
登別温泉の第一滝本館にて日帰り入浴 ※1,500坪の敷地に35の湯船の大浴場!

北海道旅行5日目に札幌駅前のトヨタレンタカーでプリウスをレンタルして日

ドゥーブルプレート
小樽の洋菓子店「LeTAO(ルタオ)」で極上スイーツ「ドゥーブルプレート」をいただきました。

札幌から少し足を延ばして小樽まで。 小樽のレトロでかわいい町をぶ

「すすきの」で北海道料理をリーズナブルに味わえる海鮮居酒屋『海さくら』

登別温泉に日帰りで行った次の日はお昼までゆっくり寝て、ランチにラマイの

スープカレー(ポーク)
RAMAI(ラマイ)札幌中央店で食べた初スープカレーが美味すぎた!

札幌発祥の道産子のソウルフード『スープカレー』を食べてきましたよ。

すすきの「禅」で海鮮しゃぶしゃぶと北海道の地酒を堪能

札幌・すすきのの狸小路あたりにあるしゃぶしゃぶ・すき焼き専門店「禅」で

→もっと見る

PAGE TOP ↑