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

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

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

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

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

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

今回の内容

1 OGPとは？
2 STINGERにOGP設定をする手順
- 2.1 参考サイト
- 2.2 OGP設定に必要な手順まとめ
3 1.使っているテーマがOGP対応しているかどうかチェック
4 2.header.phpファイルのheadタグ内にソースコードを追加
5 3.Facebook AppのIDを取得
6 4.TwitterCardを取得
- 6.1 ツイッターカードが上手く表示されない時の原因と対処法
7 5.OGP設定が反映しているか最終チェック
8 コピペ用のソースコード
- 8.1 header.phpファイルに書き込むコード
- 8.2 function.phpに書き込むコード
9 佐々木の失敗ポイントと対処法まとめ

OGPとは？

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

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

これは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設定に必要な手順まとめ

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

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

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

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

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

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

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

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

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

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

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

初心者ゆえの遠回りですが、納得のいく情報にたどり着けたので結果としては非常に良かったし、設置方法も当初よりもシンプルな形にまとまりました。設置は簡単で以下のソースコードを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/

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

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

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

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

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

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

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

4.TwitterCardを取得

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

いやー長かった。久しぶりに格闘しました。またトラウマになりそうでしたが、今回は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】' />

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

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

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

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

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

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

カテゴリー

アーカイブ

OGPとは？

STINGERにOGP設定をする手順

参考サイト

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

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

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

3.Facebook AppのIDを取得

4.TwitterCardを取得

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

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

コピペ用のソースコード

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

function.phpに書き込むコード

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

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

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

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

コメントを残すコメントをキャンセル

ABOUTこの記事をかいた人

NEW POSTこのライターの最新記事

XSERVERでサイトをSSL設定！http→https化が料金不要で超絶簡…

サイト移転が簡単！wpXからXサーバーへの引っ越し方法を分かりやすくまとめた…

電子タバコ初心者におすすめ！仙台のVAPEショップ「Vape Treasur…

【ブログ開設1年半】アクセス数/報酬額/記事数はこうなりました。

カテゴリー

アーカイブ

カテゴリー

アーカイブ

OGPとは？

STINGERにOGP設定をする手順

参考サイト

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

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

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

3.Facebook AppのIDを取得

4.TwitterCardを取得

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

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

コピペ用のソースコード

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

function.phpに書き込むコード

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

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

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

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

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

記事内の＠以降をツイッターアカウントに自動リンクする方法

ワードプレス人気有料テンプレート比較とデモサイトを公開！

無料ブログからwordpressに記事を移行する時の注意点と３つの対処法

サイドバーの背景色を透かし設定にカスタマイズする方法

サイト作成できない初心者にWPをオススメする５つの理由

【STINGERカスタマイズ】画像に枠やフレーム・影を装飾する方法

プラグイン不要でソースコードを綺麗でシンプルに表示する方法

フェイスブックページの作り方とLikeBoxをブログ埋め込みするまでの3…

ABOUTこの記事をかいた人

NEW POSTこのライターの最新記事

XSERVERでサイトをSSL設定！http→https化が料金不要で超絶簡…

サイト移転が簡単！wpXからXサーバーへの引っ越し方法を分かりやすくまとめた…

電子タバコ初心者におすすめ！仙台のVAPEショップ「Vape Treasur…

【ブログ開設1年半】アクセス数/報酬額/記事数はこうなりました。

カテゴリー

アーカイブ

コメントを残すコメントをキャンセル