ワードプレスのOGP設定

OGP設定 Facebook

の続き。今回はワードプレス版です。
ワードプレスのOGP設定も簡単ですよ。

管理画面のテーマ編集から「header.php」を開いて

</head>直前の記述を…

<!–OGP開始–>
<meta property=”fb:admin” content=”個人のアカウントに設定された15桁の数字”>
<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”;//投稿記事パーマリンク
} 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() 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”;
} else if ( preg_match( $searchPattern, $str, $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”;
}
?>
</head>

とすれば良いだけです。
なんて簡単なんでしょう(‘ ‘*)!


OGP設定 まずはFacebookに向けて

今回はWeb関連のお話です(‘ ‘*)

先日OGP設定というキーワードを知り、
実は’head’内の記述でかなり重要なものだということを知りました。

OGP設定とは、Facebookやtwitterなどのソーシャルメディアに向けた
このページはこんな内容ですよー。というシグナルを伝えるためのものです。

このOGP設定のメリットとしては、
誰かがいいねを押してくれた時、タイムライン上で拡散されやすくなる事

だからサイト運営者さんでFacebookしてる方は、ぜひ設定してみましょう!
記述自体はとっても簡単で、head要素に以下のような項目を追記するだけです。

html5の場合

<!DOCTYPE html>
<html lang=”ja” xmlns:og=”http://ogp.me/ns#” xmlns:fb=”http://www.facebook.com/2008/fbml”>
<head>
<meta charset=”UTF-8″>

<title>タイトル</title>

<meta property=”og:url” content=”サイトURL”>
<meta property=”og:title” content=”ページタイトル”>
<meta property=”og:description” content=”ページの説明文(約80〜90文字前後がいいらしい)”>
<meta property=”og:image” content=”サムネイル画像のURL”>
<meta property=”og:site_name” content=”サイト名”>
<meta property=”og:locale” content=”ja_JP”>
<meta property=”og:type” content=”website”>
<meta property=”fb:admins” content=”15桁の定められた数字”>

Xhtmlの場合はこのように…

<?xml version=”1.0″ encoding=”Shift_JIS”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”ja” xml:lang=”ja” xmlns:og=”http://ogp.me/ns#” xmlns:fb=”http://www.facebook.com/2008/fbml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”>

<title>タイトル</title>

<meta property=”og:url” content=”ページURL”>
<meta property=”og:title” content=”ページタイトル”>
<meta property=”og:description” content=”ページの説明文(約80〜90文字前後がいいらしい)”>
<meta property=”og:image” content=”サムネイル画像のURL”>
<meta property=”og:site_name” content=”サイト名”>
<meta property=”og:locale” content=”ja_JP”>
<meta property=”og:type” content=”website”>
<meta property=”fb:admins” content=”15桁の定められた数字”>

たったコレだけの設定を入れ込むだけなんですよ。
そうすると、Facebookでページがシェアされた時に…
フェイスブックページ
タイムラインにサイト概要が同時に表示されます。

 
実際に時の迷い人のフェイスブックページを見るとよく分かるかも

https://www.facebook.com/timelessberry

 

<meta property=”og:〜” content=””>

此の記述を数個置くだけだから簡単ですね。
ちょっとわかりづらい項目を補足しますと。

og:typeとは

ウェブサイトの場合はwebsite、ブログの場合はblog、個別の記事の場合はarticleとするようです。

fb:adminsについては

自分のフェイスブックアカウントに設定された15桁の数字を入れる。
何処にあるかというと、フェイスブックのご自分のプロフ画像をクリックした時のURL…
プロフ画像URLの末尾に&type=1&theateとあります。その直前の15桁の数字です。
fb:admin
画像の例だと「135383459946011」となります

 
これらの設定を自分のサイトの各ページに反映させればOKです(‘ ‘*).。.:*・゜
上手く反映されていれば、下記のページでURLを打ち込んだ時に
きちんと設定が表示されます。

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

 
どうですか? 上手くいきましたか?

この記事がお役に立ちましたら、ぜひ「いいね」お願いします.。.:*・゜
 


姉妹ブログを開設しました

姉妹ブログを開設しました。
ロハスで楽しい日常生活ぶりを綴った美容情報ブログです。

美容コラム
身体にやさしい料理レシピ
シンプルなナチュラルライフ
風水インテリアなど、

音楽サイトに書けないこと全部詰め込んだ感じになってます。
興味がありましたら、合わせてこちらもご覧ください(‘ ‘*)

http://goldenflower.jp
 

[美容ブログ] ブログ村キーワード


サイト改善案

音屋イベントを終えてみて。
自分のサイトの反省点を思いついたよ(。◕ ∀ ◕。)ノ

・そもそもときまよは素材サイトにみえないw
・素材がげんてーてき(‘ ‘*)
・ずらーって曲が並べてあって終わり
・お目当ての曲が何処にあるかわからないよー
・よし、トップリンクから他の素材サイトに飛ぼう(。◕ ∀ ◕。)ノ

うみゅ、自分のサイトに訪れたユーザーが。
どのような行動パターンをとるかちと想像してみる。

やや、大手さんのユーザビリティに比べたら。
うちのサイトって、隠れ家的に限定的だ0

ちと頑張るかぇ?

 

で、改善案を揚げてみるよ(。◕ ∀ ◕。)ノ

・テーマ別に専用素材ページを創る
・一連の場面の流れを決めて、BGMのセット素材にする。
・トップページから各素材ページに行けるようにする。
・曲の雛形を創って、そこから素材を3バージョンくらいに分ける。
・依頼を受ける(一曲30まんくらいでw

よし、ちと実践してみよう(o v o。)


音屋FES【踊-Odori-】が終了しました

時の迷い人はイベント企画を担当させて頂きました。
たくさんの方にご来場いただき、ありがとうございます。

イベント終わったあとも、本編のストーリー+音ゲーを存分に楽しむことが出来るので、
どうぞお暇なときに遊びにいらしてくださいませ。

本家URL:http://www.otoyafes.com/
ミラー:http://timelessberry.com/otoyafes/

一応、続きの企画も練ってます。
次回のイベントに向けてのシステム全般の調整とか。
追加の楽曲とか、ストーリーとか入れ込んだり。
普通にアプリにも出来たら良いなぁって。

今回、割りと実験的にやってみましたが、
思いのほか素晴らしいベースが出来たような。。
これも様々な方のご協力のお陰ですね。

システム構築にご協力いただいたtypebeatsさん ⇒ http://typebeats.com
譜面作成にご協力いただいたサイレフォさん ⇒ http://cyber-rainforce.net
スキンを描いてくださったKOUICHIさん ⇒ http://maoudamashii.jokersounds.com
そしてキャラクターデザインを担当してくれたうちのデザイナーCuちゃん。

最後に、曲を提供してくださった音屋FES参加者全員に感謝です。
これまで本当にありがとうございました。

今後もよろしゅう頼みます♪ヽ(。◕ v ◕。)ノ~*:・’゚☆