9月更新・前月(8月)の人気記事トップ10 09/02/2024
- ( 01 – ) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 07 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 03 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- ( 10 ↑) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- (圏外↑) 【Labs】CSSだけでドロップダウンメニュー
- ( 02 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 09 ↑) 【Mac】Safariでソースコードを見る方法
- ( 04 ↓) 【jQuery】入門7. jQueryで新しいWindowを開く
- ( 06 ↓) 【2024年5月】iPad画面解像度まとめ
- (圏外↑) 【GIMP】レイヤーをロック
【Labs】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要素の詳細についてはこちらの【Labs】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設定についてでしたが、いかがでしたでしょうか、これでトップページと下層ページでの設定内容を分けることができました。