この記事は2016年1月1日のものです。現在は状況が異なる可能性がありますのでご注意ください。
目次に行く・戻る
メルカリ招待コード: 招待コードをコピー
多くのブログやサイトで今ではFacebookやTwitterのOGP設定がされています。
なので、 OGP設定はある意味SEO的にもFacebookなどのSNSを使用している人にとっては、 必須の設定と言えるかもしれません。
これまでBloggerブログにおいても特別に設定方法が異なりましたが、 WordPressにおいても関数を用いての設定などと、 ちょっと特殊の部類なのかもしれません。
そこで、
+これまでによく読まれている記事一覧クリックでOPEN+
150,536件の PV
106,579件の PV
75,739件の PV
67,237件の PV
44,118件の PV
40,649件の PV
38,216件の PV
37,258件の PV
36,589件の PV
33,270件の PV
今回はWordPressでOGP設定の方法を 備忘録として残しておきたいと思います。
いろいろな説明がされているサイト様があります。 ですが、 良いのでは? と思われたサイト様を参考にさせて頂きました。
(参考サイト) [Wordpress]これは簡単!プラグインを使わずにOGPを設定する方法! | コンチクワブログ [Å] Facebookで記事をシェアしたら一部でタイトルが文字化け!解決方法ご紹介! | あかめ女子のwebメモ
アドセンス336pxPC閲覧記事下表示1つ目コード
まず、
普通に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を入力して確認してみてください。 デバッガー - 開発者向けFacebook
OGPについては以下サイト様が分かりやすく解説されています。 フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
P・S) 正直、ちょっとくらいエラーがあってもOGP設定しないよりはマシです。
これを機にこれまでOGP設定していなかったという方はしてみてはいかがでしょうか。
あなたにおすすめな関連記事 WordPress, カスタマイズ , 備忘録 」同じカテゴリーの記事一覧 おすすめの記事一部広告 Total346
アドセンス336pxPC閲覧記事下表示1つ目コード
目次に戻る
-WordPress , カスタマイズ , 備忘録 -OGP設定 , WordPress
目次に戻る
目次に戻る
Opt-out complete; your visits to this website will not be recorded by the Web Analytics tool. Note that if you clear your cookies, delete the opt-out cookie, or if you change computers or Web browsers, you will need to perform the opt-out procedure again.
You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.
This opt out feature requires JavaScript.
The tracking opt-out feature requires cookies to be enabled.
comment