多くのブログやサイトで今ではFacebookやTwitterのOGP設定がされています。
なので、
OGP設定はある意味SEO的にもFacebookなどのSNSを使用している人にとっては、
必須の設定と言えるかもしれません。
これまでBloggerブログにおいても特別に設定方法が異なりましたが、
WordPressにおいても関数を用いての設定などと、
ちょっと特殊の部類なのかもしれません。
そこで、
人気記事
車のキーナンバー確認方法。キーレス紛失や壊れた時
141.1k件のビュー
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく
101.8k件のビュー
Windows10,Windows8.1プロダクトキー確認方法
75.1k件のビュー
Windows10でエラーコード0x800705b4の対処方法
67.2k件のビュー
スロットルポジションセンサー調整で不安定なアイドリング調整
39k件のビュー
車から異音の原因。カラカラ、カタカタ、コトコトなど…。
37.9k件のビュー
Office2010・2013でプラダクトキー紛失して確認・再発行してもった方法
37.2k件のビュー
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法
36.7k件のビュー
ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法
34.9k件のビュー
カーメイトのエンジンスターターでエラー15表示と対処方法
29.7k件のビュー
今回はWordPressでOGP設定の方法を
備忘録として残しておきたいと思います。
いろいろな説明がされているサイト様があります。
ですが、
良いのでは？
と思われたサイト様を参考にさせて頂きました。
（参考サイト）
[Wordpress]これは簡単！プラグインを使わずにOGPを設定する方法！ | コンチクワブログ
スポンサーリンク
まず、
普通にheader.php内にHTMLにて記述しても大丈夫なような気もしますが、
やはり個別ページやカテゴリ毎トップページなどと設定をしっかりするには関数を使わなければなりません。
（おそらく）
また、
header内のHTMLという宣言をする初めの文言内にも追加する文字もあるようですが、
実際のところHTML5においては必要ないようです。
こんな風にする必要はないようです。
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:og="https://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">これは、
HTML4まで？なのでしょうか。
WordPressではおそらく必要ないと思います。
（テーマにもよるのでしょうか。たぶんそれはない…。BloggerでもHTML5なので必要ありませんでした）
なので、
headerのHTMLの宣言をする部分は一切弄らなくてよいです。
header.php内に以下ように記述します。
<!-- ここからOGP -->
<meta property='fb:app_id' content='APP IDを記入'>
<meta property="og:locale" content="ja_JP" />
<meta property="og:type" content="blog">
<?php
if (is_single()){//単一記事ページの場合
if(have_posts()): while(have_posts()): the_post();
echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n";//抜粋を表示
endwhile; endif;
echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";//単一記事タイトルを表示
echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";//単一記事URLを表示
} else {//単一記事ページページ以外の場合（アーカイブページやホームなど）
echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログの説明文を表示
echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのタイトルを表示
echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのURLを表示
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (is_single()){//単一記事ページの場合
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";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理
echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {//投稿にサムネイルも画像も無い場合の処理
echo '<meta property="og:image" content="https://www.hogehoge.com/wordpress/wp-content/uploads/default_img1.jpg">';echo "\n";
}
} else {//単一記事ページページ以外の場合（アーカイブページやホームなど）
echo '<meta property="og:image" content="https://www.hogehoge.com/wordpress/wp-content/uploads/default_img1.jpg">';echo "\n";
}
?>
<!-- ここまでOGP -->
上記の黄色下線の部分は参考サイト様ですと、
<meta property="fb:admins" content="◯◯◯◯◯◯◯◯" /><!-- 自分のFacebookアカウントに対応するid -->となっていますが、
adminIDを記述するのはちょっと抵抗があります。
なので、
appIDに変更しました。
また、
参考サイト様では、
下線赤部分を下に記入（記載）ありましたが上でも問題ありません。
あとは、
以下のサイトに行って自分のブログもしくはサイトのURLを入力して確認してみてください。
OGPについては以下サイト様が分かりやすく解説されています。
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
P・S）
正直、ちょっとくらいエラーがあってもOGP設定しないよりはマシです。
これを機にこれまでOGP設定していなかったという方はしてみてはいかがでしょうか。
comment