スポンサーリンク

WordPressでOGP設定方法。プラグイン使わない。

更新日:

本日の人気記事BEST10

所要時間目安: 約 3

Facebook携帯番号対処方法

WordPress カスタマイズ 備忘録

多くのブログやサイトで今ではFacebookやTwitterのOGP設定がされています。

なので、
OGP設定はある意味SEO的にもFacebookなどのSNSを使用している人にとっては、
必須の設定と言えるかもしれません。

これまでBloggerブログにおいても特別に設定方法が異なりましたが、
WordPressにおいても関数を用いての設定などと、
ちょっと特殊の部類なのかもしれません。

そこで、

今回はWordPressでOGP設定の方法を

備忘録として残しておきたいと思います。

いろいろな説明がされているサイト様があります。
ですが、
良いのでは?
と思われたサイト様を参考にさせて頂きました。

(参考サイト)
[Wordpress]これは簡単!プラグインを使わずにOGPを設定する方法! | コンチクワブログ[Å] Facebookで記事をシェアしたら一部でタイトルが文字化け!解決方法ご紹介! | あかめ女子のwebメモ

OGP設定

スポンサーリンク


まず、
普通にheader.php内にHTMLにて記述しても大丈夫なような気もしますが、
やはり個別ページやカテゴリ毎トップページなどと設定をしっかりするには関数を使わなければなりません。
(おそらく)

また、
header内のHTMLという宣言をする初めの文言内にも追加する文字もあるようですが、
実際のところHTML5においては必要ないようです。

こんな風にする必要はないようです。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://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="http://www.hogehoge.com/wordpress/wp-content/uploads/default_img1.jpg">';echo "\n";
 }
 } else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
 echo '<meta property="og:image" content="http://www.hogehoge.com/wordpress/wp-content/uploads/default_img1.jpg">';echo "\n";
 }
 ?>
 <!-- ここまでOGP -->

 

上記の黄色下線の部分は参考サイト様ですと、

<meta property="fb:admins" content="◯◯◯◯◯◯◯◯" /><!-- 自分のFacebookアカウントに対応するid -->

となっていますが、
adminIDを記述するのはちょっと抵抗があります。

なので、
appIDに変更しました。

また、
参考サイト様では、
下線赤部分を下に記入(記載)ありましたが上でも問題ありません。

あとは、

スポンサーリンク

以下のサイトに行って自分のブログもしくはサイトのURLを入力して確認してみてください。

デバッガー - 開発者向けFacebook

 

OGPについては以下サイト様が分かりやすく解説されています。
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記

P・S)
正直、ちょっとくらいエラーがあってもOGP設定しないよりはマシです。

これを機にこれまでOGP設定していなかったという方はしてみてはいかがでしょうか。

-WordPress, カスタマイズ, 備忘録
-,

おすすめ記事一部広告

スポンサーリンク


  • この記事を書いた人
  • 最新記事

izu

プロフィールページ詳細

はじめまして、izuと申します。医療ミスにより長胸神経麻痺になってしまい若干の障害がありブログをさせていただいています。旦那との共同運営になりつつありますがよろしくお願いいたします。

Follow Me !

よろしかったらシェアよろしくお願いします。

おすすめ!!

加圧シェイプで24時間無意識運動状態が可能!! 引き締め効果で魅力的なシルエットをサポート!! 運動している時だけでなく、仕事やプライベート就寝中にも!! 通気性がよく、体の動かしやすい伸縮性のある素材です!! 常に体が引き締まって、着心地いい!! 毎日着たい方用にセットも充実!!

女性必見のバストアップにおすすめ!!

マンガでの商品説明を販売ページに採用しています。 商品のメリットや良さが伝わりやすいです。 ★知名度と信頼度!ニュースアプリや芸能人ブログでも話題! (インスタグラム SmartNews yahoo アメーバ crooz 楽天) ●知名度が高く購入率の高い商品です。 ●ニュースサイトの紹介でも話題となり、有名タレント、モデル等にも使用して頂きブログなどでも紹介されている信頼度の高い商品です。 ●まとめ買いが多いのが特徴です。



この記事が良かったら
いいね!お願いします(#^.^#)

WordPressデビュー津々浦々の
最新情報をお届けします

言えないことはTwitterで!!




Copyright© WordPressデビュー津々浦々 , 2017 AllRights Reserved Powered by AFFINGER4.