menu
menu

キーワード検索

 

前月(8月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【jQuery】jQueryでドロップダウンメニュー
  3. ( 5 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
  4. ( 3 ↓) 【CSS】CSSだけでサイズ可変・スマホ対応のアコーディオン
  5. ( 4 ↓) 【CSS】レスポンシブデザインのブレークポイントは⁉
  6. ( 6 - ) 【CSS】スマホサイト向け横にスクロールするナビゲーション
  7. ( 8 ↑) 【PHP】PHPでシンプルなメールフォーム
  8. ( 9 ↑) 【CSS】CSSだけでブロック要素の表示非表示(トグルボタン)
  9. ( - ↑) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  10. ( - ↑) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
このエントリーをはてなブックマークに追加

【WordPress】WordPressでOGP設定

【WordPress】WordPressでOGP設定

こんにちは(・∀・)

今日はWordPressでのOGPの設定方法についてご紹介します。

WordPressでfacebook・TwitterのOGP設定

以前ご紹介しましたOGPの設定方法ですが、今日はWordPressでOGPを設定する方法について解説します。

通常のOGP設定

ちなみに、通常の設定方法は次の通りです。

html要素に次のコードを記述します。


<html prefix="og: http://ogp.me/ns#">

head要素内に次のコードを記述します。


<!--共通-->
<meta property="og:type" content="ページのタイプ">
<meta property="og:url" content="ページのURL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:image" content="画像のURL">
<meta property="og:locale" content="地域">
<meta property="og:site_name"  content="サイト名">
<meta property="og:description" content="ページのディスクリプション">
<!--facebook-->
<meta property="fb:app_id" content="facebookのApp ID">
<meta property="article:publisher" content="FacebookページのURL">
<!--Twitter-->
<meta name="twitter:card" content="Twitterカードの種類">
<meta name="twitter:site" content="@ユーザー名">

以上が基本的なOGP設定です。

各meta要素の詳細についてはこちらの【制作Tips】facebook・TwitterのOGP設定でご確認ください。

WordPressでOGP設定

WordPressでのOGPの設定方法は次の通りです。

こちらは通常のOGP設定と同じで、html要素に次のコードを記述します。


<html prefix="og: http://ogp.me/ns#">

次がWordPressでの設定です。

トップページと下層ページでの設定内容を分けます。

head要素内に次のコードを記述します。


<?php if(is_home()):/*ホームが表示されている場合*/ ?>
<meta property="og:type" content="①ページのタイプ">
<meta property="og:url" content="<?php echo home_url('/') ?>">
<meta property="og:title" content="<?php bloginfo('name') ?>">
<meta property="og:image" content="<?php echo home_url('②画像のURL') ?>">
<?php else:/*ホーム以外のページが表示されている場合*/ ?>
<meta property="og:type" content="③ページのタイプ">
<meta property="og:url" content="<?php the_permalink() ?>">
<meta property="og:title" content="<?php wp_title('', true, 'right'); ?> | <?php bloginfo('name') ?>">
<?php endif; ?>
<!--共通-->
<meta property="og:locale" content="ja_JP">
<meta property="og:site_name"  content="<?php bloginfo() ?>">
<meta property="og:description" content="<?php bloginfo('description') ?>">
<!--Facebook-->
<meta property="fb:app_id" content="④あなたのApp ID">
<meta property="article:publisher" content="https://www.facebook.com/⑤あなたのfacebookページ/">
<!--twitter-->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="⑥@ユーザー名">

①から⑥までを変更してheader.phpのhead要素内に記述します。


WordPressでのOGP設定についてでしたが、いかがでしたでしょうか、これでトップページと下層ページでの設定内容を分けることができました。

  • Facebook OGP Twitter
このエントリーをはてなブックマークに追加