WP-STINGER7でOGB設定をカスタマイズする方法

ogp22
スポンサーリンク

STINGER7のテーマを使うなら絶対に設定しておきたい1つの項目が今回紹介する「OGP設定」です!

ツイッターアカウントを開設した記事を書いたので、せっかくだからとツイートしたらブログ詳細が表示されずにURLだけが表示された佐々木(@kojimaru13)です。今まで使っていたテーマはOGP設定がされていたので、こちらで設定しなくても勝手に記事の詳細を表示してくれていました。

どうやらSTINGERではOGPが初期設定されていないようですね^^;

僕にとってOGP設定は必要不可欠。といいますか、SNS上からの訪問者の導線に超効果的だと感じているので必ず設定したい項目です。

今回は、僕のテーマと同じSTINGER7でのカスタマイズ内容について紹介します。

OGPとは?

この記事をご覧のアナタは既にOGPについてはご存知のはずなので割愛します。OGPについての解説サイトは多数あるので僕が解説する必要はないでしょう^^;

簡単に言えば、「ツイッターやフェイスブックでURLを貼り付けた際に、URL先のページ情報を表示してくれる」=OGPです。

ogp02

これはOGP設定がされていないため、リンクURLだけが表示されるという寂しい表示のされ方です。これをページ先のアイキャッチ画像やサムネイル画像、タイトルや記事の抜粋情報がリッチ表示されるように切り替えるための設定がOGP設定です。

 

 

STINGERにOGP設定をする手順

OGPを設定する方法は幾つかの情報が混在していますが、僕が今回設定する方法は”プラグインを使用しない”OGP設定です。OGP設定を解説しているサイトもこれまたいくつもあって迷ってしまいました^^;

おおよその内容はどのサイトも同じことを解説しているようですが、僕の知識不足と技術不足のせいでどうも理解できない点も多々ありました。色々なブロガー様のサイトを拝見しまくった結果、以下のサイトが初心者向けに手順が分かりやすく解説してあるサイトだと思ったのでご紹介しつつ仙台カフェでも実際に同じ手順で進めていこうと思います。

ちなみに、半日以上格闘しました。最終的に困り果てたのが、すべての設置が完了したのにツイート内容に設定が反映しなかった点です。半ば訳が分からなくなりながらどうにか設置が完了しました。最後に僕が成功したソースコードを記載しておきます。

 

参考サイト

[blogcard url=”http://wispyon.com/facebook-ogp-twittercards/”][/blogcard] [blogcard url=”https://ferret-plus.com/610″][/blogcard] [blogcard url=”http://millkeyweb.com/wordpress-ogp/”][/blogcard] [blogcard url=”http://kotori-blog.com/wordpress/excerpt_custom/”][/blogcard]

上記のサイト様の内容を参考にして無事設置完了しました^^

ソースコードのベースは@yume_pyonさん、分岐タグやexpertタグなどは他サイト様で公開してあるソースを組み合わせることで対処できました。

 

OGP設定に必要な手順まとめ

  1. 使っているテーマがOGP対応しているかどうかチェック
  2. header.phpのheadタグ内にソースコードを追加
  3. Facebook AppのIDを取得
  4. TwitterCardを取得
  5. OGP設定が反映しているか最終チェック

このような流れで作業を進めていくと迷わずに設定をすることができると思います。コピペするだけかと思いきや苦戦を強いられた僕でしたが、初心者の方でも簡単にOGP設定ができる手順で紹介いたします^^

では早速各項目の設定をしていきましょう!

 

 

1.使っているテーマがOGP対応しているかどうかチェック

まずはフェイスブックのデバッガーにアクセスし、アナタのサイトで公開済みの記事URLを入力して確認してみましょう!

>>>https://developers.facebook.com/tools/debug/

ogp04

僕の仙台カフェの場合は未設定なので以下のようにエラーが表示されました。

ogp03

ここで正常にページ情報が読み取れている場合は使用しているテンプレートはOGP設定済みと理解して大丈夫ですよ^^

僕と同じワードプレスのテーマ「STINGER7」を使用している方はデフォルトでOGP設定はされていないので以下にお進みください。

 

 

2.header.phpファイルのheadタグ内にソースコードを追加

ここからは実際のOGP設定の手順になります。最新の情報を整理するとheadタグ内への記述が正しいようで、Facebook Developersでも推奨されている方法です。prefix属性とmeta要素を分けて解説してあるサイトがほとんどだったのですが、prefix属性をどこに挿入すればいいのか訳が分からずに50サイト以上を横断しまくりました。笑

初心者ゆえの遠回りですが、納得のいく情報にたどり着けたので結果としては非常に良かったし、設置方法も当初よりもシンプルな形にまとまりました。設置は簡単で以下のソースコードをheader.phpファイル内のheadタグ内に貼り付けるだけです♪(公開されているコードをそのまま流用させていただきました)

 

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta property='og:locale' content='ja_JP'>
<meta property='fb:app_id' content='【取得したApp ID】'>
<meta property='article:publisher' content='【FacebookページがあればそのURL】' />
<?php if(is_single()){ // 投稿記事 ?>
<meta property='og:type' content='article'>
<meta property='og:title' content='<?php the_title() ?>'>
<meta property='og:url' content='<?php the_permalink() ?>'>
<meta property='og:description' content='<?php echo mb_substr(get_the_excerpt(), 0, 100) ?>'>
<?php } else { //ホーム・カテゴリー・固定ページなど ?>
<meta property='og:type' content='website'>
<meta property='og:title' content='<?php bloginfo('name') ?>'>
<meta property='og:url' content='<?php bloginfo('url') ?>'>
<meta property='og:description' content='<?php bloginfo('description') ?>'>
<?php } ?>
<meta property='og:site_name' content='<?php bloginfo('name'); ?>'>
<?php
if (is_single() or is_page()){//投稿記事か固定ページ
if (has_post_thumbnail()){//アイキャッチがある場合
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src($image_id, 'full');
echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
} elseif( preg_match( '/<img.*?src=(["\'])(.+?)\1.*?>/i', $post->post_content, $imgurl ) && !is_archive()) {//アイキャッチ以外の画像がある場合
echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {//画像が1つも無い場合
echo '<meta property="og:image" content="【デフォルト画像のURL】">';echo "\n";
}
} else { //ホーム・カテゴリーページなど
echo '<meta property="og:image" content="【デフォルト画像のURL】">';echo "\n";
}
?>
<!--Twtter Cards-->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="【サイトのツイッターアカウント。@から】">
<meta name="twitter:creator" content="【製作者のツイッターアカウント。@から】">
<meta name="twitter:domain" content="【ドメイン wispyon.comなど】" />

 

【】の部分にご自身の情報を書き込む必要があるので以下を参考にしてください。
コピペはまだですよ!このままでは正常に表示されなかったため最後にコピペ用のソースコードを貼ってあります。

 

 

3.Facebook AppのIDを取得

お次はフェイスブックのAppのIDを取得しに行きましょう。

https://developers.facebook.com/apps/

ogp05

フェイスブックにログインしましょう

ogp06

「create a new app」という表示が出たらクリック

ogp07

「Display Name」は分かりやすい名前をつけましょう。サイト名などでも大丈夫です^^

以下2つは空白でも構わないのですが、そのまま進もうとすると「Category」の選択を求められますのでサイトにマッチするカテゴリーを選択してください。

ogp08

画像認証を求められるので、該当する絵を複数枚選択し「Submit」

ogp09

APPが完成し、「16桁のApp ID」が表示されればOK!メモしておきましょう!

フェイスブックのAPP IDの取得はこれで完了です。次はツイッターカード!

 

 

4.TwitterCardを取得

次にツイッターでツイートされた時に表示するツイッターカードの取得を以下のサイトから申請します。

https://cards-dev.twitter.com/validator

ogp10

 

https://dev.twitter.com/cards/overview

「Card URL」にサイトURLを打ち込んで「Preview card」

ogp11

この画像はまだOGP設定していない時に表示される画面です。

OGP設定後の画面は以下のように表示されるはずです。

ogp12

このようにURLがツイッターカード形式で表示されていればとりあえずOKですね^^

ツイッターカードを取得するには申請が必要であると僕が見た全てのサイトで解説してあったのですが、僕の場合は特に「申請ボタン」が表示されないので、どこかで申請していたのかしら??ここも迷ったポイントでしたが、とりあえずOKとします!

ところが、記事ページを試しに打ち込んだところ以下の画面が!!!

ogp13

「ERROR: Required meta tag missing (twitter:text:description)」このエラーが僕を出口の見えない無限ネットサーフィンループにハマることになります。笑

この画像が表示された人は以下で原因と対処法を解説しているのでそのまま読み進めてください。

 

ツイッターカードが上手く表示されない時の原因と対処法

結論から言ってしまうと、このエラーは「Discription」が原因でした。記事ごとにしっかりディスクリプションを打ち込んでいる人は問題ないのですが、抜粋を自動で設定していたり打ち込んでない人はツイッターのクローラーが記事の内容を上手く読み取れずにエラーが出ているということのようです。

ogp14と、いうことでツイッターのDiscription部分のソースを改変し、設定していなくてもツイッターカードが表示されるように変更を加えることでこの問題は解決できるということです。

しかし、世の中そんなに甘くなく、全然目的の内容が見つからない^^;

今回はプラグインを使わないので、ALL IN SEO PACKも不要です。使えば簡単なのかもしれませんが、色々と弊害があるので自力で数時間探しまくりました。その結果冒頭で触れた「expertタグ」で解決することができたのです。(本当に感謝です!参考サイトを御覧くださいね!)

ogp16

 

 

5.OGP設定が反映しているか最終チェック

最後に、もう一度フェイスブックデバッガーにアクセスしURLを打ち込んで確認してみましょう!

ogp20

エラーも出ず無事に設定が反映されました!!

いやー長かった。久しぶりに格闘しました。またトラウマになりそうでしたが、今回はphpファイルの機嫌も良くてホッとしました^^

 

 

コピペ用のソースコード

header.phpファイルに書き込むコード

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<?php } else { ?>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<?php } ?>
<meta property='og:locale' content='ja_JP'>
<meta property='fb:app_id' content='XXXXXXXXX-XXXXXXX'>
<meta property='article:publisher' content='【FacebookページURL】' />
<?php if(is_single()){ // 投稿記事 ?>
<meta property='og:type' content='article'>
<meta property='og:title' content='<?php the_title() ?>'>
<meta property='og:url' content='<?php the_permalink() ?>'>
<meta property='og:description' content='<?php echo kotoriexcerpt(140); ?>'>
<?php } else { //ホーム・カテゴリー・固定ページなど ?>
<meta property='og:type' content='website'>
<meta property='og:title' content='<?php bloginfo('name') ?>'>
<meta property='og:url' content='<?php bloginfo('url') ?>'>
<meta property='og:description' content='<?php bloginfo('description') ?>'>
<?php } ?>
<meta property='og:site_name' content='<?php bloginfo('name'); ?>'>
<?php
if (is_single() or is_page()){//投稿記事か固定ページ
if (has_post_thumbnail()){//アイキャッチがある場合
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src($image_id, 'full');
echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
} elseif( preg_match( '/<img.*?src=(["\'])(.+?)\1.*?>/i', $post->post_content, $imgurl ) && !is_archive()) {//アイキャッチ以外の画像がある場合
echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {//画像が1つも無い場合
echo '<meta property="og:image" content="【デフォルト画像のURL】">';echo "\n";
}
} else { //ホーム・カテゴリーページなど
echo '<meta property="og:image" content="【デフォルト画像のURL】">';echo "\n";
}
?>
<!--Twtter Cards-->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@kojimaru13">
<meta name="twitter:creator" content="@kojimaru13">
<meta name="twitter:domain" content="sasakikoji.com">

 

こちらのコードは<head>~</head>内に挿入してください

【】とXXXXXX-XXXXX、Twitter cardの内容をご自身のアカウント情報に書き換えてください

teitter cardの種類はこちらを参考にして、”summary/summary_large_image/photo/gallery/app/product”などから指定してください。通常のブログであれば、”summary”で問題ないでしょう^^

 

function.phpに書き込むコード

/*抜粋を表示*/
function kotoriexcerpt($length) {
global $post;
$content = mb_substr(strip_tags($post->post_excerpt),0,$length);

if(!$content){
$content = $post->post_content;
$content = strip_shortcodes($content);
$content = strip_tags($content);
$content = str_replace("&nbsp;","",$content);
$content = html_entity_decode($content,ENT_QUOTES,"UTF-8");
$content = mb_substr($content,0,$length);
}
return $content;
}

 

function.phpファイルは子テーマなのでお好きな場所にコピペしてお使いください

 

 

佐々木の失敗ポイントと対処法まとめ

トップドメインはOGP設定が反映するけど記事ページが表示されない

分岐タグで該当ページを指定するコードを参考に追加修正

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<?php } else { ?>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<?php } ?>

 

分岐タグで記事ページを指定してもツイッターカードが表示されない

抜粋文(ディスクリプション)を読み取れるようにexpertタグの解説を参考に追加修正(function.phpコードも追記)

<meta property='og:description' content='<?php echo kotoriexcerpt(140); ?>'>

 

 

上記を設定してもフェイスブックデバッガーでエラーが表示される

フェイスブックページを開設していなかったのが原因だったため以下のコードを削除

<meta property='article:publisher' content='【FacebookページURL】' />

 

 

振り返ってみるとつまづきポイントは少なかったですが、解決するのに色々なサイトを参考にさせていただきました!

おかげさまで無事にサイドバーのツイート内容もリッチ表示されるようになりました^^

ogp21

スカイプなどでURLを貼り付けた時にも画像リンクがちゃんと表示されます。

ogp19

次はフェイスブックページの開設方法の流れをご紹介しますね♪

初心者さんでも同じ手順で進めていけばブログを構築するのも簡単簡単^^

当サイトをフルに活用してください!!

ogp22

コメントを残す

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